函数绑定与 this 指向的奥秘

前端

2023-11-29 14:10:53

在 JavaScript 中，函数绑定和 this 指向是两个重要的概念。函数绑定是指将函数绑定到某个对象，当调用该函数时，this 指向绑定的对象。this 指向决定了函数中 this 的引用。

函数有四种主要的绑定方式：

构造函数定义： 通过 new 函数名来实例化对象的函数叫构造函数。任何的函数都可以作为构造函数存在。
隐式绑定： 当一个方法被一个对象调用时，隐式绑定将 this 指向该对象。
显式绑定： 使用 bind()、call() 或 apply() 方法显式地将 this 绑定到一个对象。
箭头函数： 箭头函数没有自己的 this 绑定，它总是继承外层函数的 this 绑定。

了解 this 指向

this 指向是一个特殊的 JavaScript 关键字，它引用当前函数执行的上下文对象。this 的值由函数的调用方式决定。

在 JavaScript 中，this 可以指向以下对象：

全局对象（在浏览器中是 window 对象）
函数所属的对象（如果函数是作为对象的方法调用的）
new 操作符创建的对象（如果函数是作为构造函数调用的）
显式绑定的对象（如果函数使用 bind()、call() 或 apply() 方法调用）

函数绑定的四种方式

1. 构造函数定义

当一个函数作为构造函数被调用时，它会创建并返回一个新对象。这个新对象成为函数的 this 对象，并且 this 指向该对象。

function Person(name) {
  this.name = name;
}

const person = new Person('John Doe');

console.log(person.name); // "John Doe"

2. 隐式绑定

当一个方法被一个对象调用时，隐式绑定将 this 指向该对象。

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

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

3. 显式绑定

使用 bind()、call() 或 apply() 方法显式地将 this 绑定到一个对象。

bind() 方法创建一个新的函数，该函数将 this 绑定到指定的 this 值。
call() 方法立即调用函数，并将 this 绑定到指定的 this 值。
apply() 方法立即调用函数，并将 this 绑定到指定的 this 值，并传入一个参数数组。

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

const greet = person.greet;

greet(); // TypeError: Cannot read properties of undefined (reading 'name')

const boundGreet = greet.bind(person);

boundGreet(); // "Hello, my name is John Doe"

4. 箭头函数

箭头函数没有自己的 this 绑定，它总是继承外层函数的 this 绑定。

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

    const arrowGreet = () => {
      console.log(`Hello, my name is ${this.name}`);
    };

    arrowGreet();
  },
};

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