On the This keyword in JS

---restore content starts---

This is one of the keywords in JavaScript, which is often used when writing programs, and it is especially important to understand and use the keyword this correctly. Next, the author from the scope of the perspective of the rough talk about their understanding of this keyword, I hope to give you some inspiration, right when the exchange.

This in the global scope

This keyword is progressively understood in this article in a way that is scoped from outside to inside. First, look at the following line of code:

Console.log (this//  Window {top:window, location:location, Document:document, Window:window, External:object ...}    Window Global Object

After executing the above statement in the browser, we will get a Window object, which is a global object. Within the global scope, we can access all global properties through this. As shown in the following code:

var a = 1; Console.log (this//  1

This in the scope of the function

Now, let's put the This keyword in the function scope and test the code as follows:

var a = 1; function Test () {    var a = 2;    Console.log (this//  1}test ();

We can see that the printed result is still 1, which means that this is the global object at this point.

It can also be clarified here that this does not point to the function scope (or not to the active object in the function scope chain, the concept of the active object can refer to the JavaScript shorthand 5--execution Environment, variable object and scope chain), then this will point to the function itself, Let's take a look at the following example:

var a = 1; function Test () {    var a = 2;    Console.log (this//  1= 3; test ();

From the above example, we know that this also does not point to the function itself. In the example above, this ultimately points to a global object, so what happens when this points to other objects, let's look at the following example:

var a = 1; function Test () {    var a = 2;    Console.log (this//  3}var obj = {a:3};test.call (obj);

In the example above, this points to object obj. Since the object to which this is directed can be determined only when the function is called, the next section describes the use of this for different function invocation methods.

This is called directly under different function invocation methods

var a = 1; function Test () {    Console.log (this//1}test ();

Obviously, the function is called directly and this is the global object.

Method invocation as an object

var a = 1; function Test () {    Console.log (this//  2}var obj = {a:2 , Fn:test};obj.fn ();

When a function is called as a method of an object, this points to the object that is currently calling the method.

Called as a constructor function

var a = 1; function Test () {    this. A = 2;}  var New  //  1//  2

The result of the code above shows that the property A in the global object has not been changed, and this point points to the object created by the constructor.

Called by call or the Apply method

Both call and apply are methods of function objects that can be used to dynamically change the direction of this and achieve the purpose of function reuse. Here the author does not introduce these two methods in detail, interested readers can refer to the relevant articles. In particular, the first parameter of these two methods is this one. As these two methods are used similarly, here we only take the call method as an example. above example:

var a = 1; function Test () {    Console.log (this//  1}test.call ();

The first parameter of the call method is this, and in the case where there is no argument, the object that this is pointing to in the example above is the global object. Let's look at one more example:

var a = 1; function Test () {    Console.log (this//  1}var obj = {a:2 , Fn:test};obj.fn.call ();

The above example further proves that even if the method call Call,this using the object is pointing to the global object by default. In order to change the direction of this, we need to explicitly pass the first parameter past, the following code:

var a = 1; function Test () {    Console.log (this//  2}var obj = {a:2}; Test.call (obj);

This in the scope of the nested function

At the end of the article, let's look at the this reference in the nested function. The sample code is as follows:

var a = 1; function Test () {    Console.log (this//  2    function  test2 () {        Console.log (this//  1    }    test2 ();} var obj = {a:2, Fn:test};obj.fn ();

The above example shows that the nested function is called and does not inherit the this reference of the nested function, which points to the global object when the nested function is called. In some applications, we need to read the properties of the object that called the nested function in the nested function, and you can declare a local variable to hold the This reference, as shown in the following code:

var a = 1; function Test () {    Console.log (this//  2    varthis;     function test2 () {        //  2    }    test2 ();} var obj = {a:2, Fn:test};obj.fn ();

---restore content ends---

This is one of the keywords in JavaScript, which is often used when writing programs, and it is especially important to understand and use the keyword this correctly. Next, the author from the scope of the perspective of the rough talk about their understanding of this keyword, I hope to give you some inspiration, right when the exchange.

This in the global scope

This keyword is progressively understood in this article in a way that is scoped from outside to inside. First, look at the following line of code:

Console.log (this//  Window {top:window, location:location, Document:document, Window:window, External:object ...}    Window Global Object

After executing the above statement in the browser, we will get a Window object, which is a global object. Within the global scope, we can access all global properties through this. As shown in the following code:

var a = 1; Console.log (this//  1

This in the scope of the function

Now, let's put the This keyword in the function scope and test the code as follows:

var a = 1; function Test () {    var a = 2;    Console.log (this//  1}test ();

We can see that the printed result is still 1, which means that this is the global object at this point.

It can also be clarified here that this does not point to the function scope (or not to the active object in the function scope chain, the concept of the active object can refer to the JavaScript shorthand 5--execution Environment, variable object and scope chain), then this will point to the function itself, Let's take a look at the following example:

var a = 1; function Test () {    var a = 2;    Console.log (this//  1= 3; test ();

From the above example, we know that this also does not point to the function itself. In the example above, this ultimately points to a global object, so what happens when this points to other objects, let's look at the following example:

var a = 1; function Test () {    var a = 2;    Console.log (this//  3}var obj = {a:3};test.call (obj);

In the example above, this points to object obj. Since the object to which this is directed can be determined only when the function is called, the next section describes the use of this for different function invocation methods.

This is called directly under different function invocation methods

var a = 1; function Test () {    Console.log (this//1}test ();

Obviously, the function is called directly and this is the global object.

Method invocation as an object

var a = 1; function Test () {    Console.log (this//  2}var obj = {a:2 , Fn:test};obj.fn ();

When a function is called as a method of an object, this points to the object that is currently calling the method.

Called as a constructor function

var a = 1; function Test () {    this. A = 2;}  var New  //  1//  2

The result of the code above shows that the property A in the global object has not been changed, and this point points to the object created by the constructor.

Called by call or the Apply method

Both call and apply are methods of function objects that can be used to dynamically change the direction of this and achieve the purpose of function reuse. Here the author does not introduce these two methods in detail, interested readers can refer to the relevant articles. In particular, the first parameter of these two methods is this one. As these two methods are used similarly, here we only take the call method as an example. above example:

var a = 1; function Test () {    Console.log (this//  1}test.call ();

The first parameter of the call method is this, and in the case where there is no argument, the object that this is pointing to in the example above is the global object. Let's look at one more example:

var a = 1; function Test () {    Console.log (this//  1}var obj = {a:2 , Fn:test};obj.fn.call ();

The above example further proves that even if the method call Call,this using the object is pointing to the global object by default. In order to change the direction of this, we need to explicitly pass the first parameter past, the following code:

var a = 1; function Test () {    Console.log (this//  2}var obj = {a:2}; Test.call (obj);

This in the scope of the nested function

At the end of the article, let's look at the this reference in the nested function. The sample code is as follows:

var a = 1; function Test () {    Console.log (this//  2    function  test2 () {        Console.log (this//  1    }    test2 ();} var obj = {a:2, Fn:test};obj.fn ();

The above example shows that the nested function is called and does not inherit the this reference of the nested function, which points to the global object when the nested function is called. In some applications, we need to read the properties of the object that called the nested function in the nested function, and you can declare a local variable to hold the This reference, as shown in the following code:

var a = 1; function Test () {    Console.log (this//  2    varthis;     function test2 () {        //  2    }    test2 ();} var obj = {a:2, Fn:test};obj.fn ();

On the This keyword in JS