this绑定规则先声夺人，箭头函数和this爱恨情仇

2023-11-11 08:12:13

this绑定规则先行：四种绑定类型

JavaScript 中的this绑定规则决定了this在函数中的引用。它有四种主要绑定类型：隐式绑定、显式绑定、new绑定和默认绑定。

隐式绑定：

隐式绑定是最常见的this绑定类型。当函数作为对象的方法调用时，this被绑定到该对象。例如：

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

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

显式绑定：

显式绑定允许您明确指定this的值。可以使用call()、apply()和bind()方法来实现显式绑定。例如：

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

const person1 = {
  name: 'John'
};

const person2 = {
  name: 'Mary'
};

greet.call(person1); // Hello, my name is John.
greet.apply(person2); // Hello, my name is Mary.
const boundGreet = greet.bind(person1);
boundGreet(); // Hello, my name is John.

new绑定：

new绑定用于构造函数。当使用new关键字创建对象时，this被绑定到新创建的对象。例如：

class Person {
  constructor(name) {
    this.name = name;
  }

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

const person = new Person('John');
person.greet(); // Hello, my name is John.

默认绑定：

默认绑定用于全局对象。当函数作为全局函数调用时，this被绑定到全局对象。例如：

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

window.name = 'John';
greet(); // Hello, my name is John.

箭头函数与this：曲折往事

箭头函数是ES6中引入的一种新函数语法。它没有自己的this绑定，而是继承外层函数的this值。这意味着箭头函数无法改变this的绑定。例如：

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

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

在上面的例子中，箭头函数greet()继承了person对象的this值。但是，当greet()被调用时，this的值是undefined，因为箭头函数没有自己的this绑定。