this
This is an attribute of the function’s execution context and, in non-strict mode, always refers to the execution context. This exists in functions, and to understand this, first understand scope and scope chains
Scope and scope chain
The scope of variables and functions refers to their execution environment and the scope that can be accessed. Scope chain refers to the chain of searching variables from child scope to parent scope when accessing variables, from bottom to top, from inside to outside.
The pointer to this in ordinary functions
The this of an ordinary function refers to the object calling the function
function explain() {
console.log(this.name);
}
var a = { name: "aa" };
var b = { name: "bb" };
var name = "window";
explain(); // window
explain.call(a); // aa
explain.call(b); // bb
Copy the code
The arrow function refers to this
The arrow function’s this is already specified when it is declared; this inherits from the parent function’s this.
// example 1
var a = () = > {
var name = "inside";
console.log(this.name);
};
var name = "outside";
a(); // outside
// example 2
var b = {
name: "bb".func: () = > {
console.log(this.name); }};var name = "outside";
b.func(); // outside
// example 3
function foo() {
console.log("a:".this.id);
console.log("b:".this);
setTimeout(() = > {
console.log("c:".this.id);
console.log("d:".this);
}, 0);
}
var id = 21;
foo(); // a:21 b:window c:21 d:window
foo.call({ id: 42 }); // a:42 b:{id:42} c:42 d:{id:42}
Copy the code
Reference to this in self-executing functions (IIFE)
In non-strict mode, this of the self-executing function points to window
(function () {
console.log(this); }) ();// window
Copy the code
Change the method to which this points
- Bind binds the function to the target object, changing the function’s this pointer
function explain() {
console.log(this.name);
}
var a = { name: "aa" };
explain.bind(a)(); // aa
Copy the code
- Call binds the function to the target object and executes it, changing the function’s this pointer and passing in a single argument
function explain(secondName, age) {
console.log(this.name + "-" + secondName + "-" + age);
}
var a = { name: "aa" };
explain.call(a, "name".18); // aa-name-18
Copy the code
- Apply binds the function to the target object and executes it, changing the function’s this pointer and passing in the parameters as an array
function explain(arr) {
let [secondName, age] = arr;
console.log(this.name + "-" + secondName + "-" + age);
}
var a = { name: "aa" };
explain.call(a, ["name".18]); // aa-name- 18
Copy the code
tips
- Bind multiple times only for the first time
function getName() {
console.log(this.name);
}
let a = { name: "aa" };
let b = { name: "bb" };
getName.bind(a).bind(b)(); // 'aa'
Copy the code
The significance of learning is not how much you learn, but how much you leave in your mind after learning. This article for the [JS foundation] series of articles, more is the author for each knowledge point of personal understanding, welcome to comment, like. More knowledge points please pay attention to the little sister home page, work together ah!