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!