JavaScript: “this” Binding

By Xah Lee. Date: . Last updated: .

What is the Purpose of “this”?

In JavaScript, when a function is called, it has a associated value called “this binding”. (Except arrow functions. 〔►see JavaScript: Arrow Function〕)

ECMAScript® 2016 Language Specification#sec-function-environment-records

In function body, the “this binding” is represented by the keyword this.

The purpose of “this binding” is to allow function to implicitly work with a object. (without actually passing a argument in call.)

For example, when you call myArray.pop(), the function pop's “this binding” is myArray. That's how pop knows about myArray.

(But how does myArray find the “pop” function? 〔►see JavaScript: Prototype and Inheritance〕 )

A function may or may not make use of “this binding”. For example, if a user defined function body does not contain this keyword, then the associated “this binding” does nothing.

What is the Value of “this”?

The “this binding” is designed for use with function only. Typically, for function call of the form obj.method_name(), where the function method_name's “this binding” will be obj.

When this is evaluated outsite a function, its value is the global object. In browser, it is the window object. 〔►see JavaScript: Browser Window Object, Document Object Model

When this is used inside a function and the function is called, the value of this depends on how the function is called. Here's a summary:

Following are details.

“this” in Method Call

The most common use is calling a function as a method of some object. For example, myobj.f(). In such case, the value of this is the object that the method f is a property of. (the myobj)

// example showing what 「this」 is in a method call
var ff = function () { return this; };
var oo = { p1: ff};
console.log(oo === oo.p1());    // true

“this” in Constructor Call (new …)

When a function is invoked as a constructor (For example, new F() or new o.F()), its this value is the newly created object. (similar to this = Object.create(F.prototype))

〔►see JavaScript: Object.create

〔►see JavaScript: Operator “new”

Note: as long as the new is used, such as new myObject.myMethod(), the this is still the newly created object, not the object that the function is a method of.

// example of showing the value of 「this」 in a constructor
var Ff = function () { this.ppp = 4; };
var x8 = new Ff();
console.log(x8);                // { ppp: 4 }

Here's a example of using a constructor that's a method of some object.

// example of showing the value of 「this」 in a constructor

// object oo with a method ff
var oo = {"ff": function () { this.ppp = 4; }}

// using the method oo.ff as a constructor to create a new object
var x7 = new oo.ff();

// new property is added to the new object
console.log(x7.hasOwnProperty("ppp")); // true

// the ppp isn't added to oo
console.log(oo.hasOwnProperty("ppp")); // false

〔►see JavaScript: Operator “new”

“this” in Global Function Call

When a function is called in a global context and not as a method of another object, the this evaluates to undefined if strict mode is on, else it's the global object.

"use strict"
var ff = function () { return this; };
console.log(ff());              // → 「undefined」
// 「this」 is the global object 「window」, in non-strict mode, running in browser
var ff = function () { return this; };
console.log( ff() === window) // → true

〔►see JavaScript: What's Strict Mode and How to Determine Strict Mode?

“this” in Nested Functions

In a nested function (For example, g is nested inside f), when g is called inside f, the value of g's this is undefined if strict mode is on, else the global object.

// 「this」 is in nested function has value undefined, if under use strict
"use strict"

var ff = function () {
    var gg = function () {
        return this;
    };
    return gg();
};

console.log(ff() === undefined); // true

// if in non strict mode, it returns the global object.
// example of testing what 「this」 is in nested function
"use strict"

var o = {
    ff:function () {
        var gg = function () {
        return this;
        };
        return gg();
    }
};

console.log(o.ff() === undefined); // true

// if in non strict mode, it returns the global object.

Call Function with any thisBinding

You can call a function with its this set to any object you want. You can do this by using the method “call” or “apply”. See: JavaScript: Function Call, Apply, Bind.

JS Constructor Topic

  1. JavaScript: “this” Binding
  2. JavaScript: What's Constructor?
  3. JavaScript: Property Key "prototype"
  4. JavaScript: Operator “new”
  5. JavaScript: “instanceof” Operator
  6. JavaScript: Property Key "constructor"
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.