what is this?

If you have learned object-oriented programming languages (such as C#, Java, C++), please throw your preconceived concepts about what this keyword should be in the trash can. The this keyword of JavaScript is very different. Because JavaScript is not originally a class-based object-oriented programming language.

Although JavaScript in ES6 provides us with the class feature for us to use, it is just a syntactic sugar, a syntactic sugar based on prototypal inheritance! ! ! !

this does not refer to the function itself, nor does it refer to the lexical scope of the function. If only the English explanation of this is used, it would be too misleading. It is actually a binding that occurs when the function is called, that is to say, what this points to depends on how you call the function.

The javaScript this keyword refers to the object it belongs to.

It has different values, depending on where it is used:

1. In the method, this refers to the owner object.
2. In a single case, this refers to the global object.
3. In the function, this refers to the global object.
4. In functions, in strict mode, this is undefined.
5. In the event, this refers to the element receiving the event.
6. The this of the arrow function is bound when the function is defined, not during execution
7. Methods like call() and apply() can refer this to any object.

1. This in the method

In object methods, this refers to the "owner" of this method. In the following example, this refers to the person object. The person object is the owner of the fullName method.

 var person = {
  firstName: "Tony",
  lastName : "ji"
  fullName : function() {
    return this.firstName + " " + this.lastName;
  }
};
 

2. Separate this

When used alone, the owner is the global object, so this refers to the global object.

In the browser window, the global object is [object Window]

var tony = this;

3. This in the function (default)

In JavaScript functions, the owner of the function binds this by default.

Therefore, in the function, this refers to the global object [object Window]

function myFunction() {
  return this;
}
 

4. This in the function (strict mode)

JavaScript strict mode does not allow default binding.

Therefore, when used in a function, this is undefined in strict mode.

"use strict";
function myFunction() {
  return this;
}

 

5. This in the event handler

In the HTML event handler, this refers to the HTML element that received this event

<button onclick="this.style.display='none'">
   
</button>

 

6. This definition of arrow function

The this of the arrow function is bound when the function is defined, not during execution. Simply put, when a function is defined, this inherits the object that defines the function. Therefore, this will solve the problem of anonymous functions and the this point of setTimeout and setInterval. We don't need to use that variable to store this.

Printed result:

This is the this in the arrow function

7. Change the direction of this

call()

The first parameter: this points to

If you want to pass parameters, follow the parameters in order

        function fn(x,y){
            console.log(this);  
        }
        var obj = {
            name:"zs"
        }
        fn(1,2);
        fn.call(obj,1,2);

 

apply()

The difference from the first method is that the parameters are represented in the form of an array

        function fn(x,y){
            console.log(this);  
        }
        var obj = {
            name:"zs"
        }
        fn(1,2);
        fn.apply(obj,[1,2]);

 

bind()

Bind only changes this point and needs to be manually invoked to be executable!!!

        function fn(x,y){
            console.log(this);  
        }
        var obj = {
            name:"zs"
        }
        fn(1,2);
        fn.bind(obj,1,2)();