JavaScript advanced series—how this works

• Global scope

• Function call

• Method call

• Call the constructor

• Explicitly set this

• Common misunderstanding

• method Assignment expression

#JavaScript has a completely different mechanism for handling this than other languages. In five different cases, this points to different things.

Global scope

this;

When this is used in all scopes, it will point to the global object.

Function call

foo();

Here this will also point to the global object.

Method call

test.foo();

In this example, this points to the test object.

Call the constructor

new foo();

If the function tends to be used with the new keyword, we call this function a constructor. Inside the function, this points to the newly created object.

Explicit setting this

function foo(a, b, c) {}

var bar = {};
foo.apply(bar, [1, 2, 3]); // 数组将会被扩展，如下所示
foo.call(bar, 1, 2, 3); // 传递到foo的参数是：a = 1, b = 2, c = 3

When using the call or apply method on Function.prototype, this within the function will be explicitly set as the first parameter of the function call.

Therefore, the rules of function calling no longer apply in the above example. In the foo function, this is set to bar.

Common Misconceptions

Although most situations are true, the first rule (Translator's Note: This refers to The second rule, that is, when calling a function directly, this points to the global object) is considered to be another misdesign of the JavaScript language, because it has never been of practical use.

Foo.method = function() {
    function test() {
        // this 将会被设置为全局对象（译者注：浏览器环境中也就是 window 对象）
    }
    test();
}

A common misunderstanding is that this in test will point to the Foo object, which is not actually the case.

In order to obtain a reference to the Foo object in test, we need to create a local variable inside the method function pointing to the Foo object.

Foo.method = function() {
    var that = this;
    function test() {
        // 使用 that 来指向 Foo 对象
    }
    test();
}

That is just a name we give randomly, but this name is widely used to point to the external this object. In the Closures section, we saw that can be passed as a parameter.

Note: In the literal declaration syntax of an object, this cannot be used to point to the object itself. Therefore, me in var obj = {me: this} will not point to obj, because this can only appear in the above five situations. Translator's Note: In this example, if it is run in a browser, obj.me is equal to the window object.

Assignment expression of method

Another thing that seems strange is the function alias, which is assigning a method to a variable.

var test = someObject.methodTest;
test();

In the above example, test is called like an ordinary function; therefore, this within the function will no longer be pointed to the someObject object.

Although the late binding feature of this seems unfriendly, it is indeed the soil on which prototypal inheritance depends.

function Foo() {}
Foo.prototype.method = function() {};

function Bar() {}
Bar.prototype = Foo.prototype;

new Bar().method();

When method is called, this will point to the instance object of Bar.

The above is the working principle of the JavaScript advanced series-this. For more related content, please pay attention to the PHP Chinese website (www.php.cn)!