Wednesday, March 2, 2016

this keyword rules in javascript

I wrote down these notes while watching one of Kyle Simpson workshops about javascript and would like to share them with Y'all :

"Every function, while executing, has a reference to its current execution context, called this. "

There are 4 rules of how this word gets bound in JavaScript: 

"1.Was the function called with 'new' ?
2.Was the function called with 'call' or apply specifying explicit 'this' ?
3. Was the function called via a containing/owning object (context)?
4. Default : global object  "



Rule 1: Default binding rule
When the call site is the default "plain" like in the lines, the function stands alone by itself. The default binding rule applies.

function foo(){
    console.log(this.hi);
}

foo();   <---- function stands alone by itself.

If you are in strict mode, then default is undefined , otherwise define it in the global.


Rule 2: Implicit binding rule
It owns the content of the call site.

function foo(){
    console.log(this.hi);
}

var object1 ={hi:1984,func:foo};
var object2= {hi:2016,func:foo};

 object1.foo();  <---- //1984
object2.foo();   <---- //2016

Rule 3:

Explicit binding
If you use .call or .apply on the call side, They take their parameter as a this.

function sayHi(){
    console.log(this.hi);


var hi="Hola";
var object1={hi:"Hi"};

sayHi();                      <----- //Hola
sayHi.call(object1);    <----- //Hi

Hard binding 
Predictably reference the object that it has to reference.
function sayHi(){
      console.log(this.hi);
}


var object1 ={hi:"Hi"};
var object2 ={hi:"Hola"};


var orig=foo;
sayHi= function(){orig.call(object1)};


sayHi();                     <----- //Hi
sayHi.call(object2);   <----- //Hi



Rule 4: The new key word
There are 4 things happen when the new key word put in front of a function call 
1. A brand new object will be created 
2. That object gets linked to different object    <---- More  clarifications later
3. That object gets bound as this  key word
4.  If that object return nothing, It will implicitly returns this .









 
Example :
var object1={
      var name="Saif";
      printName:function(){
         console.log(name);
      }
}

var object2= {name:"Khaled", printName:object1.printName};

var name="Belal";
var printMe=object1.printMe; 

object1.printMe();    <---- Saif
object1.printMe();    <---- Khaled
printMe();                 <---- Belal



No comments:

Post a Comment