Home

Welcome to the Javascript-implict-binding-of-this- wiki!

_{This repository is part of a larger project!}

◀️ PREVIOUS PROJECT| NEXT PROJECT ▶️

---

In Javascript the possibility to use the keyword this in a wrong context exists.

An example follows:

function myClass()
{
    this.X = "World!";
    this.myMethod = function(yourArray)
    {
        return yourArray.map(function(element)
        {
            return element + this.X;
        })
    }
}

// Creating a new context by declaring an object
var myContext = new myClass();
var myArray = ["Hello ","Greetings ","How are you "];

// Output:
// ["Hello undefined", "Greetings undefined", "How are you undefined"],
// because "this.X" in "MyMethod" references to the context "map", thus is "undefined".
console.log(myContext.myMethod(myArray));

There should be at least three possible solutions for the case above.

1. Using provided parameter "thisArg"

function myClass()
{
    this.X = "World!";
    this.myMethod = function(yourArray)
    {
        return yourArray.map(function(element)
        {
            return element + this.X;
        }, this) // "map" parameter "thisArg" set with argument "this"
    }
}

// Creating a new context by declaring an object
var myContext = new myClass();
var myArray = ["Hello ","Greetings ","How are you "];

// Output:
// ["Hello World!", "Greetings World!", "How are you World!"],
// because "this.X" in "MyMethod" references to the context "myContext".
console.log(myContext.myMethod(myArray));

2. Lexicallly scoped variable

function myClass()
{
    this.X = "World!";
    
    // Lexically scoped variable. 
    // Other variable names could be "self" and "that".
    // This solution would be useful,when e.g. no paramteres like "thisArg" is available.
    var me = this;
    
    this.myMethod = function(yourArray)
    {
        return yourArray.map(function(element)
        {
            return element + me.X;
        })
    }
}

// Creating a new context by declaring an object
var myContext = new myClass();
var myArray = ["Hello ","Greetings ","How are you "];

// Output:
// ["Hello World!", "Greetings World!", "How are you World!"],
// because "me.X" in "MyMethod" references to the context "myContext",
// thus is equal to "this.X = "World!";"
console.log(myContext.myMethod(myArray));

3. Callback function`s bind method

function myClass()
{
    this.X = "World!";
    
    this.myMethod = function(yourArray)
    {
        return yourArray.map(function(element)
        {
            return element + this.X;
        }.bind(this)) // bind method of callback function "function(element)"
    }
}

// Creating a new context by declaring an object
var myContext = new myClass();
var myArray = ["Hello ","Greetings ","How are you "];

// Output:
// ["Hello World!", "Greetings World!", "How are you World!"],
// because "this.X" in "MyMethod" references to the context "myContext",
// thus is equal to "this.X = "World!";"
console.log(myContext.myMethod(myArray));

Content

The user interaction part could look like the content as seen below by starting "index.html" in a web browser and interacting with its features.

• Area "File Options" should offer the possibilities to load a CSV file, select one separator and parse the CSV file
• 🅱️ utton "START" would parse the CSV file when pressed
• Area "Table Content" should present CSV content after successfully parsed

To use the project just download the files and execute "index.html". Note that all files(folder "wiki_images" excluded while folder "files" is optional, it is recommended) should be placed in the same folder so that the functionality of the code is guaranteed.

There are four premade CSV files from the file "myData.odt" which were used while implementing the CSV-Reader.

NOTE

The files "myData_semicolon.csv" and "myData_tabulator.csv" should work as expected.
The other two CSV files wouldn`t be parsed properly 
due to not realized implementation complexity.
Nevertheless it should illustrate that self-implementation 
of a full fledged CSV-Reader should be approached very carefully.