三剑齐发，前端面试手写代码——call、apply、bind

前言

前端面试中，手写代码是一个重要的考察点，它不仅能够考察你对JavaScript基础知识的掌握程度，还能考察你对函数调用的理解和运用能力。在众多面试题中，call、apply和bind三个函数的使用频率非常高，也是面试官比较青睐的考点。

call、apply、bind简介

call、apply、bind都是JavaScript中的函数调用方法，它们都能够改变函数的执行上下文，从而达到改变this指向的目的。但是，它们之间也存在一些区别。

• call() ：call()方法接受两个参数，第一个参数是this指向的目标对象，第二个参数是一个参数数组。当调用call()方法时，函数体内的this指向将被设置为第一个参数，而函数体中的参数将被设置为第二个参数。
• apply() ：apply()方法也接受两个参数，第一个参数是this指向的目标对象，第二个参数是一个参数列表。当调用apply()方法时，函数体内的this指向将被设置为第一个参数，而函数体中的参数将被设置为第二个参数列表中的元素。
• bind() ：bind()方法只接受一个参数，即this指向的目标对象。当调用bind()方法时，函数体内的this指向将被设置为第一个参数，并返回一个新的函数。这个新的函数可以被当作普通函数调用，而它的this指向将始终保持为bind()方法中设置的值。

call、apply、bind对比

为了更直观地了解call、apply和bind三个函数的区别，我们来看一个简单的示例：

function func() {
  console.log(this.name);
}

var obj1 = {
  name: 'obj1'
};

var obj2 = {
  name: 'obj2'
};

func.call(obj1); // 输出：obj1
func.apply(obj2); // 输出：obj2
var newFunc = func.bind(obj2);
newFunc(); // 输出：obj2

从上面的示例中我们可以看出，call()和apply()方法都可以改变函数的执行上下文，从而达到改变this指向的目的。但是，call()方法需要将参数放在第二个参数中，而apply()方法需要将参数放在第二个参数列表中。bind()方法只接受一个参数，即this指向的目标对象，并返回一个新的函数。这个新的函数可以被当作普通函数调用，而它的this指向将始终保持为bind()方法中设置的值。

call、apply、bind的应用场景

call、apply和bind三个函数在前端开发中都有广泛的应用场景，下面列举一些常见的应用场景：

• 改变this指向 ：call、apply和bind都可以改变函数的执行上下文，从而达到改变this指向的目的。这在一些特殊情况下非常有用，例如：
  • 当一个函数需要被另一个对象调用时。
  • 当一个函数需要被一个事件监听器调用时。
  • 当一个函数需要被一个定时器调用时。
• 参数传递 ：call和apply都可以将参数传递给函数。这在一些情况下非常有用，例如：
  • 当一个函数需要接收可变数量的参数时。
  • 当一个函数需要接收一个数组作为参数时。
• 函数柯里化 ：bind函数可以用来实现函数柯里化。函数柯里化是指将一个函数的部分参数固定住，使其变成一个新的函数。这在一些情况下非常有用，例如：
  • 当一个函数需要被多次调用时。
  • 当一个函数需要被多个对象调用时。

总结

call、apply和bind都是JavaScript中的函数调用方法，它们都能够改变函数的执行上下文，从而达到改变this指向的目的。但是，它们之间也存在一些区别。call()方法需要将参数放在第二个参数中，而apply()方法需要将参数放在第二个参数列表中。bind()方法只接受一个参数，即this指向的目标对象，并返回一个新的函数。这个新的函数可以被当作普通函数调用，而它的this指向将始终保持为bind()方法中设置的值。

在前端开发中，call、apply和bind都有广泛的应用场景。掌握这些函数的使用方法，可以帮助你更好地理解JavaScript的运行机制，并编写出更加灵活和健壮的代码。