JavaScript函数中的this四种绑定形式

JavaScript 中的 this 指向可以按照四种绑定形式进行绑定，这四种形式分别是默认绑定、隐式绑定、显式绑定和 new 绑定。下面将分别对这四种绑定形式进行详细介绍。

默认绑定

当函数直接被调用时，且函数内部没有使用特殊的this绑定方式，this 指向就是默认绑定到全局对象上。

function printThis() {
  console.log(this);
}
printThis(); // 全局对象，浏览器环境下是 window

隐式绑定

当函数作为对象的方法被调用时，this 指向就会隐式绑定到该对象上。也就是说，this 指向调用当前方法的对象。

const person = {
  name: 'Jack',
  printThis() {
    console.log(this);
  }
};
person.printThis(); // person 对象

显式绑定

使用函数的 call 或 apply 方法调用时，可以显式指定 this 指向。通过传入 call 或 apply 方法的第一个参数设置 this 指向。

function printThis() {
  console.log(this);
}
const person = {
  name: 'Jack'
};
printThis.call(person); // person 对象

new 绑定

通过使用 new 关键字来调用函数时，this 指向会绑定到新创建的对象上。在构造函数中使用 this 时，指向的是 new 出来的实例对象。

function Person(name) {
  this.name = name;
  this.printThis = function() {
    console.log(this);
  };
}
const jack = new Person('Jack');
jack.printThis(); // jack 对象

这些绑定的形式很有用，但需要注意的是它们可能会产生一些问题。例如在默认绑定中，this 指向全局对象很容易产生副作用。在显式绑定中，很容易误用 call 或 apply 方法，从而必须谨慎使用。在隐式绑定中，当函数使用箭头函数时，this 指向可能会不符合预期。因此，在使用这些绑定的时候需要谨慎。