JavaScript: Keyword “this”

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 “ThisBinding”. (Except arrow functions. 〔►see JavaScript: Arrow Function〕)

In function definition, the “ThisBinding” is represented by the keyword this.

The purpose of “ThisBinding” is to allow function to implicitly work with a object. (without actually declare a parameter in definition and passing a argument in call.)

For example, when you call myArray.pop(), the function pop's “ThisBinding” 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 “ThisBinding”. For example, if a user defined function definition does not contain this keyword, then the associated “ThisBinding” does nothing.

ECMAScript 2015 §ECMAScript Language: Expressions#sec-this-keyword

What is the Value of “this”?

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 calling object. (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: Keyword “this”
  2. JavaScript: What's Constructor?
  3. JavaScript: Property Key "prototype"
  4. JavaScript: Operator “new”
  5. JavaScript “instanceof” Operator
  6. JavaScript: How to Use Object.create() to Emulate Constructor?
  7. JavaScript: Property Key "constructor"
Like what you read? Buy JavaScript in Depth
or, buy a new keyboard, see Keyboard Reviews.