原来JS中的this还可以这样玩？通过三剑客实现完美指向！

2023-12-10 12:09:31

原生JS中的this绑定规则

在原生JS中，this的指向取决于函数的调用方式。有三种最常用的函数调用方式：

直接调用： 当函数被直接调用时，this指向函数所在的全局对象。
方法调用： 当函数作为对象的方法被调用时，this指向该对象。
构造函数调用： 当函数作为构造函数被调用时，this指向新建的对象。

this绑定规则示例

下面是一个示例，展示了this的指向是如何根据函数的调用方式而变化的：

// 全局对象
console.log(this); // Window

// 方法调用
const person = {
  name: 'John',
  sayName: function() {
    console.log(this.name);
  }
};

person.sayName(); // John

// 构造函数调用
function Person(name) {
  this.name = name;
  this.sayName = function() {
    console.log(this.name);
  };
}

const john = new Person('John');
john.sayName(); // John

在这个示例中，当函数被直接调用时，this指向全局对象。当函数作为对象的方法被调用时，this指向该对象。当函数作为构造函数被调用时，this指向新建的对象。

改变this指向的方法

在某些情况下，我们可能需要改变this的指向，以便能够访问特定的对象。我们可以通过以下三个方法来实现this的指向改变：

call()： call()方法可以将this指向指定的对象，并可以传入参数。
bind()： bind()方法可以创建函数的一个新版本，并将this指向指定的对象，但不会立即执行函数。
apply()： apply()方法可以将this指向指定的对象，并传入参数数组。

改变this指向的示例

下面是一个示例，展示了如何使用call()、bind()和apply()来改变this的指向：

// 使用call()改变this指向
const person = {
  name: 'John',
  sayName: function() {
    console.log(this.name);
  }
};

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

greet.call(person); // Hello, John!

// 使用bind()改变this指向
const boundGreet = greet.bind(person);
boundGreet(); // Hello, John!

// 使用apply()改变this指向
greet.apply(person); // Hello, John!