This Keyword

/*
- Implicit Binding
- Explicit Binding
- new Binding
- window Binding
*/

Implicit

80% of cases uses this method

See http://javascriptwiki.wikidot.com/this

var me = {
  name: 'Tyler',
  age: 25,
  sayName: function(){ 
    console.log(this.name); // me.name
  }
}
 
me.sayName(); <--- parentheses binds me . Translates as user.getName.bind(user);

Quick "this" rule to remember

1. With this, always pay attention to where the function is invoked
2. Look to if there's anything to the left to the dot dot, if there is then that's what the "this" keyword is referencing

var Person = function(name, age) {
  return {
    name: name,
    age: age,
    sayName: function() { // public
      console.log(this.name);
    },
    mother: { // public
      name: 'Stacey',
      sayName: function() {
        console.log(this.name)
      }
    }
  }
}
 
var John = Person('John', 42); // create new object without prototype
John.sayName(); // John (john is this)
John.mother.sayName(); // Marie (mother is this)

Another example but i don't like this, probably use the above

var User = function(obj) {
  obj.sayName = function() {
    console.log(this.name);
  }
}
 
var me = {
  name: 'John'
}
 
var her = {
  name: 'Kate'
}
 
User(me); // links all methods and stuff to me object
User(her); // links all methods and stuff to her object
 
me.sayName(); // John
her.sayName(); // Kate

Explicit (call, apply)

We are explicitly stating what the "this" keyword is.

var sayName = function(lang1, lang2, lang3) {
   console.log(this.name);
}
 
var languages = ['Javascript', 'Ruby', 'Python'];
 
var user = {
  name: 'John'
}
 
sayName.call(user, languages[0], languages[1], languages[2]); // explicitly defining what the this keyword is, in this case it's user
sayName.apply(user, languages); // explicitly defining what the this keyword is, but it's nicer to user apply because we can pass it through as an array

Bind

Very similar to call, and apply but it returns a function instead and doesn't invoke! Just returns the function.

var sayName = function(lang1, lang2, lang3) {
   console.log(this.name + ' ' +lang1);
}
 
var languages = ['Javascript', 'Ruby', 'Python'];
 
var user = {
  name: 'John'
}
 
var sayName = sayName.bind(user, languages[0], languages[1], languages[2]); // bind returns it as a function 
console.log(sayName());

New Keyword

var User = function(name, county) {
   this.name = name;
   this.country = county;
   console.log(this.name + ' ' + this.country);
 
   return {
     getName: function() {
       return this.name;
     }
   }
}
 
var newuser = new User('John','England'); // returns object
newuser.getName(); // John England

Round up

me.sayName(); // Implicit, parenthesis passes me as "this" keyword  (obj.sayName())
 
sayName.call(user); // Explicit, call() or apply() user object is explicitly passed through as "this" keyword (sayName.call(obj)) 
 
var sayName = sayName.bind(user); // Bind just returns it as a function and does not invoke
 
var newuser = new User('John','England'); // New
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License