前端小姐姐的进阶秘籍：掌握JavaScript方法的妙用

2023-10-14 04:42:28

在前端开发中，JavaScript方法的灵活运用是衡量一名工程师是否资深的重要标准。这篇文章中，我们将深入浅出地介绍apply、call、bind这三个方法，帮助你掌握JavaScript方法的妙用，让你在前端开发的道路上更上一层楼。

JavaScript方法的妙用

JavaScript方法的妙用主要体现在改变this指向的能力上。this指向决定了方法内部的this所引用的对象，它可以是调用方法的对象，也可以是其他对象。通过改变this指向，我们可以灵活地控制方法的执行上下文，实现一些意想不到的效果。

三种方法的异同

apply、call、bind这三个方法都是用来改变this指向的，但它们之间也存在一些差异。

apply ：apply方法接受两个参数，第一个参数是this指向的目标对象，第二个参数是一个数组，包含要传递给方法的参数。apply方法会立即执行方法，并将执行结果返回。
call ：call方法与apply方法类似，也接受两个参数，第一个参数是this指向的目标对象，第二个参数是方法的参数列表。call方法也会立即执行方法，并将执行结果返回。
bind ：bind方法与apply和call方法不同，它只接受一个参数，即this指向的目标对象。bind方法不会立即执行方法，而是返回一个新的函数，该函数的this指向被绑定到目标对象。这个新的函数可以被多次调用，每次调用时，this指向都会是目标对象。

实例演示

为了更好地理解这三个方法的使用方法，我们来看一个实例。假设我们有一个对象A，它有一个方法叫做sayHello，该方法会输出this指向的对象。

const A = {
  name: 'A',
  sayHello: function() {
    console.log(this.name);
  }
};

现在，我们使用apply、call和bind方法来改变sayHello方法的this指向。

// 使用apply方法
A.sayHello.apply({name: 'B'}, []); // 输出：B

// 使用call方法
A.sayHello.call({name: 'C'}); // 输出：C

// 使用bind方法
const boundSayHello = A.sayHello.bind({name: 'D'});
boundSayHello(); // 输出：D