javascript中经典的call 、apply、bind方法以及this指向详解

2024-01-31 14:03:49

javascript 中经典的call 、apply、bind方法以及this指向详解

一说到js中的call、apply、bind方法，就一定会和this联系起来，百分之九十以上的问题都是有关这三个函数方法中this的指向问题，在前端面试题中非常的常见，掌握了这三个方法的this指向问题，不仅可以在面试官前侃侃而谈，加深面试官对你的印象，而且可以提高我们js代码的质量和可读性。

call方法

call方法是用来改变一个函数的this指向的，它接受两个参数：第一个参数是this指向的目标对象，第二个参数及以后的参数是传递给函数的参数。

function person(name, age) {
  console.log(this.name);
  console.log(this.age);
  console.log(name);
  console.log(age);
}

var obj = {
  name: 'John Doe',
  age: 30
};

// 调用person函数，this指向obj对象
person.call(obj, 'Jane Doe', 25);

// 输出结果：
// John Doe
// 30
// Jane Doe
// 25

在上面的示例中，我们定义了一个person函数，它接受两个参数：name和age。然后，我们创建了一个obj对象，并将person函数应用于该对象。

在调用person函数时，我们使用call方法将this指向obj对象。这意味着，当person函数内部使用this时，它将指向obj对象。

apply方法

apply方法与call方法非常相似，但它接受两个参数：第一个参数是this指向的目标对象，第二个参数是一个数组，其中包含要传递给函数的参数。

function person(name, age) {
  console.log(this.name);
  console.log(this.age);
  console.log(name);
  console.log(age);
}

var obj = {
  name: 'John Doe',
  age: 30
};

// 调用person函数，this指向obj对象
person.apply(obj, ['Jane Doe', 25]);

// 输出结果：
// John Doe
// 30
// Jane Doe
// 25

在上面的示例中，我们使用apply方法将this指向obj对象。与call方法一样，当person函数内部使用this时，它将指向obj对象。

bind方法

bind方法与call和apply方法不同，它不立即调用函数，而是返回一个新的函数，该函数的this指向已被绑定到指定的this值。

function person(name, age) {
  console.log(this.name);
  console.log(this.age);
  console.log(name);
  console.log(age);
}

var obj = {
  name: 'John Doe',
  age: 30
};

// 创建一个新的函数，this指向obj对象
var newPerson = person.bind(obj);

// 调用newPerson函数，this指向obj对象
newPerson('Jane Doe', 25);

// 输出结果：
// John Doe
// 30
// Jane Doe
// 25