指哪打哪！改变this指向的四种方式（模拟实现call、apply、bind、new）

一、call方法

call() 方法使用一个指定的 this 值和单独给出的一个或多个参数来调用一个函数。

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

const person = {
  name: 'John Doe'
};

greet.call(person); // 输出: Hello, John Doe!

在这个例子中，greet() 函数被调用时，this指向person对象，因此console.log() 输出 "Hello, John Doe!"。

二、apply方法

apply() 方法与call() 方法类似，但它接受一个数组作为第二个参数，而不是单独的参数。

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

const person = {
  name: 'John Doe'
};

const args = ['Jane Doe'];

greet.apply(person, args); // 输出: Hello, Jane Doe!

在这个例子中，greet() 函数被调用时，this指向person对象，而args数组中的值被作为函数的参数传递。因此，console.log() 输出 "Hello, Jane Doe!"。

三、bind方法

bind() 方法创建一个新的函数，该函数在调用时将this指向指定的对象。

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

const person = {
  name: 'John Doe'
};

const boundGreet = greet.bind(person);

boundGreet(); // 输出: Hello, John Doe!

在这个例子中，greet.bind(person) 创建了一个新的函数boundGreet，该函数在调用时this指向person对象。因此，console.log() 输出 "Hello, John Doe!"。

四、new运算符

new运算符创建一个新对象，并将this指向该对象。

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

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

console.log(person.name); // 输出: John Doe

在这个例子中，new Person('John Doe') 创建了一个新的Person对象person，并将this指向该对象。因此，console.log() 输出 "John Doe"。

总结

改变this指向的四种方式：call、apply、bind和new，它们都可以用于在不同的上下文中调用函数。call() 和apply() 方法允许我们指定this指向的对象和传递参数，而bind() 方法创建一个新的函数，该函数在调用时this指向指定的对象。new运算符创建一个新对象，并将this指向该对象。

通过模拟实现这些方法，我们可以更好地理解它们的原理和用法。希望本文对您有所帮助！