this指向的本质和绑定规则

2023-11-12 09:05:32

this的本质

this本质上是一个指针，指向当前正在执行的函数所属的对象。在JavaScript中，函数有两种调用方式：

函数作为对象的方法调用
函数作为独立函数调用

当函数作为对象的方法调用时，this指向该对象。例如：

const person = {
  name: "John Doe",
  greet: function() {
    console.log(`Hello, my name is ${this.name}.`);
  },
};

person.greet(); // Hello, my name is John Doe.

当函数作为独立函数调用时，this指向全局对象。在浏览器中，全局对象是window对象，在Node.js中，全局对象是global对象。例如：

function greet() {
  console.log(`Hello, my name is ${this.name}.`);
}

greet(); // Hello, my name is undefined.

this的绑定规则

this的绑定规则决定了this在函数被调用时指向哪个对象。JavaScript中有四种this绑定规则：

默认绑定 ：当函数作为独立函数调用时，this指向全局对象。
隐式绑定 ：当函数作为对象的方法调用时，this指向该对象。
显式绑定 ：使用call、apply或bind可以显式指定this指向哪个对象。
箭头函数绑定 ：箭头函数的this与父作用域的this相同。

call、apply和bind

call、apply和bind都是可以改变this指向的对象的函数。它们都接受两个参数：

要调用的函数
要作为this指向的对象

call和apply的区别在于，call接受参数列表作为第二个参数，而apply接受参数数组作为第二个参数。bind只接受一个参数，即要作为this指向的对象，并返回一个新的函数，该函数的this指向被绑定为指定的对象。

例如：

const person = {
  name: "John Doe",
};

function greet(message) {
  console.log(`${message}, my name is ${this.name}.`);
}

greet.call(person, "Hello"); // Hello, my name is John Doe.
greet.apply(person, ["Hello"]); // Hello, my name is John Doe.

const boundGreet = greet.bind(person);
boundGreet("Hello"); // Hello, my name is John Doe.