Lightning Talk One

The this keyword in comparison to JavaScript and C#

Kyana Bowers

Accompanying Powerpoint
Accompanying Video
This is JavaScript, refers to the object it belongs to. Depending on the content, it will determine the value or object it refers to of this (by default, inside a fuction, inside a method etc.).
This in C# refers to the current instance of the class. It can be used to distinguish between variables that use the same name, and pass objects to a method.
In JavaScript, objects are made up of Key-Value Pairs, where there is a user-defined key and a value.
For example, if we are looking at an object "fridge" then the key will be "colour" and the value will be "white".

const fridge = {
    colour: "white",
}

In C#, the Dictionary is fundamentally the same as the Java Script object and is represented like this:

Dictionary<string,string> Fridge =
    new Dictionary<string,string>();

Fridge.Add("colour", "white");

When using JavaScript, a Function is a block of code used to perfomr a task when it's called.

function FunctionExample() {
    document.getElementByID("demo").innerHTML = "Hello World!";
}

With C#, the Function is also known as a Method. This, like in JavaScript, is an instruction that performs a task when it is called.

static void FunctionExample(){
    Console.WriteLine("Hello World!");
}

Execution Context in JavaScript is the environment created to write the code. Each one operates independently from the others. This is also the same in C#.
The following Execution Contexts exist in JavaScript, but not in C#:
- Explicit Binding
- Implicit Binding
- Window Binding
- New Binding
- Lexical Binding
Explicit Binding is used in Java Script when we want to use functions from different Execution Contexts. There are three methods in which we can do this: call(), apply() and bind().
Call()

let getname = function(){
    console.log(this.name);
}

let user = {
    name: 'Kyana'
    workplace: 'JourneyOne'
};

getName.call(user);

Apply()

let getName = function(lang1, lang2){
    console.log(this.name + ' is learning ' + lang1 + ' and ' + lang2);
}

let user = {
    name:'Kyana',
    workplace: 'JourneyOne'
};

let languages = ['JavaScript' , 'CSS'];

getname.apply(user, languages);

Bind()

let getName = function(lang1, lang2){
    console.log(this.name + ' is learning ' + lang1 + ' and ' + lang2);
}

let user = {
    name:'Kyana',
    workplace: 'JourneyOne'
};

let languages = ['JavaScript' , 'CSS'];

let newFn= getName.bind(user, languages[0], languages[1]);

newFn();

Implicit Binding is used in Java Script when you want to access an object's function using the dot (.) notation.

let info = {
    name:'Kyana',
    workplace:  'JourneyOne',
    message: function(){
        console.log(`${this.name} works at ${this.workplace}`);
    }
};

info.message();

Window Binding is the default binding for JavaScript. It is used when this is accessed by itself, and in the browser refers to the Window object. In strict mode, Window Binding is not allowed.

let sayName = function(name) {
    console.log(this.name);
}

window.name = 'Kyana';
sayName();

Strict Mode allows for JavaScript to be more harsh on your code. It makes “mistakes” and less severe errors or warnings throw errors, which allows for cleaner and more secure code.
Changed error examples include:
Using a variable or object but not declaring it first.

"use strict";
x = 1;

Duplicate parameter names

"use strict";
function x(parameter1, parameter1){};

Window bound this will return undefined

"use strict"
function strictFunction(){
    console.log(this); //will return undefined
}

New Binding is using in JavaScript when an object is created using the new operator. new is used to call constructor functions, so the new object instantiated will have the function's parameters that can be accessed using this.

let Person = function(name,workplace){
    this.name = name;
    this.workplace = workplace;
    this.log = function(){
        console.log(this.name + ' works at ' + this.workplace);
    }
}

let myself = new Person('Kyana', 'JourneyOne');

In JavaScript, a normal function defines this automatically. Arrow functions do not, therefore if you reference this in an arrow function, it will use the parent function's dcope to look for the intended variable. This is called Lexical Binding.

var countup = {
    counter: 0 ,
    start:function(){
        setInterval(() =>{
            this.counter++;
        }, 100);
    }
}

So how does all this compare to C#?
C# merges all Execution Contexts into one and uses primarily classes, whereas JavaScript has many different Execution Contexts.