Many people will be confused when they encounter the problem that this refers to in the function, so I write this article for easy memorization and understanding.

This problem in ordinary functions:

Conclusion: This always refers to the object on which the function is called.

Analysis directly through code, as shown in the following example:

Function test(){var a = 1; console.log(this.a); } test(); //undefinedCopy the code

Example 1 code that executes the test method prints undefined instead of the local variable a defined in the method. Because test is the method of the window object, this refers to the window.

Var b = 2; Function test(){var b = 1; console.log(this.b); } test(); // Prints the result as 2Copy the code

Example 2 declares the variable B under window, so 2 is finally printed.

Here is a more complex example:

Var name = 'China'; var obj = { name : 'America', show : function() { console.log(this.name) } } obj.show(); // AmericaCopy the code

In example 3 above, the show method of obj prints America, and it is clear that this in the show method refers to the obj object (that is, the object calling the show method).

Var name = 'China'; var obj = { name : 'America', show : function() { return function(){ console.log(this.name); } } } var a = obj.show(); a(); // ChinaCopy the code

In example 4 above, the show method returns an anonymous function. The a method is defined under window, so this points to window and prints the variable name under window.

This problem in arrow function:

The arrow function is a shorthand way of writing a function, but its this problem is different from that of a normal function.

Conclusion: The arrow function’s this points to an object in its scope.

Example 5: var name = 'window_name'; var A = { name: 'A', sayHello: () => { console.log(this.name) } } A.sayHello(); //window_nameCopy the code

In example 5 above, the arrow function appears, and the final print result is window_name. Because A is declared under window, the object in the scope of the arrow function is window, so it prints the name variable declared under window.

So how do I make this point to object A? You can use the following methods:

Example 6: var name = 'window_name'; var A = { name: 'A_name', sayHello: Function (){var s = () => console.log(this.name) return s// return arrow function}} var sayHello = a.sayHello (); sayHello(); A_name var B = {name: 'B_name'; } sayHello.call(B); // still A_name sayhello.call (); / / or A_nameCopy the code

The arrow function’s this is determined when the definition is complete. The scope of the arrow function is within the scope of the sayHello function, where this points to A, so any subsequent call that changes this to A does not affect the final result.

Var name = "zhansan"; Function Person() {//this points to instance one var s = () => {console.log(this.name); //lisi } this.fn = s; } const one = new Person(); one.name = "lisi"; one.fn();Copy the code

Example 8 above can help to understand the above conclusion.