What does 'this' mean?
//=======================================================
// Remember the acronym GONE (Global,Object,New,Explicit)
// It describes the different execution contexts within
// which "this" is evaluated in your code.
//=======================================================
//=======================================================
//Global Execution Context
//=======================================================
this.console; // (1)
//=======================================================
// (1) Outside of a function, "this" means the global object.
// In a browser the global object is the window object.
// So the code above is the same as window.console;
//=======================================================
//=======================================================
// Object Execution Context
//=======================================================
var square = {
width: 5,
height: 5,
getArea: function () {
return this.width * this.height; // (1)
}
}
console.log("Area of square is " + square.getArea());
//=======================================================
// (1) When a function is called on an object, the value
// of "this" inside that function, is the object that
// the function is called on i.e. square.
//=======================================================
//=======================================================
// New Execution Context
//=======================================================
function Human(name) {
this.name = name; // (1)
this.printName = function () {
console.log("My name is " + this.name); // (2)
}
}
var andy = new Human("Andrew");
andy.printName()
//=======================================================
// (1) When the "new" keyword is used along with a function call,
// the function behaves like a constructor. It's almost
// as if the function is rewritten to look like this:
//
// function Human(name) {
// var this = {};
// this.name = name;
// this.printName = function () {
// console.log("My name is " + this.name);
// }
// return this;
// }
//
// It's the "this" object which the function generates
// that gets returned assigned to the variable andy.
//
// (2) The value of "this" corresponds to the "this" object
// that gets implicitly generated and returned on behalf
// of your function.
//=======================================================
//=======================================================
// Explicit Execution Context
//=======================================================
var resultA = {};
var resultB = {};
var resultC = {};
function sum(a, b) {
this.answer = a + b;
}
function product(a, b) {
this.answer = a * b;
}
sum.call(resultA, 2, 3); // (1)
product.apply(resultB, [2, 3]); // (2)
var product2 = product.bind(resultC); // (3)
product2(4, 5);
console.log("2 + 3 is " + resultA.answer);
console.log("2 * 3 is " + resultB.answer);
console.log("4 * 5 is " + resultC.answer);
//=======================================================
// (1) We use the call() method on the sum() function to
// explicitly use resultA as the value for "this"
// inside of the sum() function
// (2) We use the apply() method on the product() function to
// explicitly use resultB as the value for "this"
// inside of the product() function
// (3) We use the bind() method on the product() function to
// explicitly use resultC as the value for "this"
// inside of the curried product() function
//
// [*] You may have noticed that call/apply result in a function call.
// However, bind results in a new function, which you can call later on.
//=======================================================
PreviousHow can I build an object with computed property names?NextHow does inheritance work between objects?
Last updated
Was this helpful?