Front-end 100 questions cut [014]-these "this" points in js are worth knowing

The original intention of writing this series of articles is to "let every front-end engineer master high-frequency knowledge points to help work." This is the 14th cut of the front-end Hundred Topics. I hope that friends will pay attention to the public account "Kite Holder" and arm their minds with knowledge.

14.1 Introduction

This is a keyword in javascript, its use is similar to a variable, and it is an important part of the execution context. Its function is to get the current running environment inside the function body.

14.2 Pointing

The this of each function is bound based on the execution environment of the function when it is called, and the direction of this depends entirely on the call location of the function. (The following are the results of testing in a browser environment)

1. In the global environment, this always points to the global object (window), regardless of whether it is in strict mode or not;

console.log(this); // window

2. There are two types of this in ordinary functions, strict mode and non-strict mode.

​ (1) In non-strict mode, this points to the global object window by default

​ (2) In strict mode, this is undefined

function fun() {
    console.log(this); // window
}

3. The this of the internal methods of the object points to the object that calls these methods

   (1) The definition position of the function does not affect its this point, this point is only related to the object calling the function;

   (2) For multi-level nested objects, the this of the internal method points to the object closest to the called function (window is also an object, and the this of the internal object calling method points to the internal object, not window).

const obj = {
    a: 10,
    b: 20,
    add: function () {
        return this.a + this.b;
    }
};

console.log(obj.add()); // 30
const add = obj.add;
console.log(add()); // NaN

4. The this of the method in the prototype chain still points to the object that called it

const obj = {
    a: 10,
    b: 20
};

const prototypeObj = {
    add: function () {
        return this.a + this.b;
    }
};

Object.setPrototypeOf(obj, prototypeObj);

console.log(obj.add()); // 30

5. The this in the constructor is bound to the new object being created.

function Fun() {
    this.a = 10;
}

const fun = new Fun();
console.log(fun.a); // 10

6. When a function is called through the call() and apply() methods inherited from the prototype of the Function object, the value of this inside the function can be bound to the first object specified by the call() & apply() method. A parameter is not an object, JavaScript internally will try to convert it into an object and then point to it. (See follow-up code)
7. After being bound by the bind method, the function will always be bound to its first parameter object, no matter under what circumstances it is called. (See follow-up code)
8. When a function is used as a listener event processing function, its this points to the element that triggered the event (for the addEventListener event)

<button id="testId">按钮</button>

const btn = document.getElementById('testId');
btn.addEventListener('click', function() {
    console.log(this); // <button id="testId">按钮</button>
});

9. The this point in inline events can be divided into two cases:

   (1) When the code is called by the inline processing function, its this points to the DOM element where the listener is located

   <button onclick="console.log(this)">按钮</button> // 输出该DOM节点

(2) When the code is included in a function for execution, its this point is equivalent to the case of a direct function call, that is, it points to the global object window in non-strict mode, and it points to undefined in strict mode.

<button onclick="clickFun()">按钮</button>

function clickFun() {
    console.log(this); // window
}

10. The this of the callback function inside the delay function points to the global object window (of course, the this point of the internal function can be changed through the bind method)

function Fun() {
    this.a = 10;
    this.method = function() {
        setTimeout(function() {
            console.log(this); // window
        }, 1000);
    }
}

const fun = new Fun();
fun.method();

11. Since the arrow function does not bind this, it will capture the this value of the context where it is located (that is, the defined position) as its own this value, so the call() / apply() / bind() method is just passed to the arrow function The input parameter has no effect on its this.

function Fun() {
    this.a = 10;
    this.method = function() {
        setTimeout(() => {
            console.log(this); // Fun {a: 10, method: ƒ}
        }, 1000);
    }
}

const fun = new Fun();
fun.method();

14.3 Change this point

In addition to implicitly binding this, you can also change the this point through call, apply, and bind through explicit binding. The difference between these three will be explained by a hundred questions later, and this section will mainly proceed. A wave of simple use.

1. call()

call() method uses a specified this value and one or more parameters to call a function.

function method(val1, val2) {
    return this.a + this.b + val1 + val2;
}

const obj = {
    a: 1,
    b: 2
};

console.log(method.call(obj, 3, 4)); // 10

2. apply()

apply() method calls a function with a given this and the parameters provided in the form of an array (or array-like object).

function method(val1, val2) {
    return this.a + this.b + val1 + val2;
}

const obj = {
    a: 1,
    b: 2
};

console.log(method.apply(obj, [3, 4])); // 10

3. bind()

bind() method creates a new function, in bind() is called, this new function this is designated as bind() the first parameter, and the remaining arguments as parameters of the new function for use during calls.

function method(val1, val2) {
    return this.a + this.b + val1 + val2;
}

const obj = {
    a: 1,
    b: 2
};

const bindMethod = method.bind(obj, 3, 4);
console.log(bindMethod); // [Function: bound method]
console.log(bindMethod()); // 10

Expand

1. The difference between call() and apply() call() method accepts a parameter list , while the apply() method accepts a parameter array ;
2. Bind returns a binding function, while call and apply return the running result;
3. Bind() multiple times is invalid and will only be bound to the object called for the first time;
4. The call() / apply() / bind() methods only pass in parameters to the arrow function, and have no effect on its this.

1. If you think this article is good, share it, like it, and let more people see it

2. Follow the official account holders, and kill the front-end 100 questions with the account owner.