JavaScript: What's the value of 「this」 Keyword?

, , …,

In JavaScript, there's this keyword. It is mostly used inside the definition of function.

The value of this depends on how the function is called. Here's a summary:

ECMAScript §11#sec-11.1.1

Following are details & examples.

「this」 in Method Call

The most common use is calling a function as a method of some object. ⁖ 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

Here's another example, more typical usage.

// example of using “this” keyword in a function definition

// define a function. The function adds a property “wohoho” to its invoking object
var ff = function () { this["wohoho"] = 3; };

// create a object. With property p1, value is ff. p1 is now a method of oo.
var oo = { "p1": ff};

console.log(oo);                // { p1: [Function]}

// invoke the method
oo.p1()

// new property is added to oo
console.log(oo);                // { p1: [Function], wohoho: 3 }

「this」 in Constructor Call

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

〔☛ JavaScript: Creating Object with Object.create()〕 〔☛ JavaScript: What's Constructor? What Does Keyword “new” Do?

Note: even if the function is called as a method, such as new myobj.f(), the this is still the newly created object, not the object that the function is a method of (that is, not the myobj.).

// 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

〔☛ JavaScript: What's Constructor? What Does Keyword “new” Do?

「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」

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

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

「this」 in Nested Functions

When a function is nested inside a function, its value of this is:

// example of testing what “this” is in nested function

"use strict"

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

console.log(ff());              // → 「undefined」

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

Call Any Function as Method

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: Call Any Function as Method

blog comments powered by Disqus