显式绑定：`call()`, `apply()`, `bind()` 的使用与区别

好的，各位编程界的探险家们，欢迎来到今天的“显式绑定三剑客：call(), apply(), bind()” 专题讲座！我是你们的向导，将带领大家拨开迷雾，深入了解这三个JavaScript中操控 this 指向的利器。

准备好了吗？让我们扬帆起航，征服 this 的海洋！🌊

开场白：`this`，那个让人又爱又恨的家伙

在JavaScript的世界里，this 是一个非常重要，但也常常让人摸不着头脑的概念。它就像一个神秘的访客，总是根据不同的场合，以不同的身份出现。有时它是全局对象（浏览器中是 window，Node.js中是 global），有时它是某个对象，有时甚至会是 undefined。

this 的灵活多变固然带来了强大的表达能力，但也让许多开发者在它的迷宫里晕头转向。别担心，今天我们要学习的 call(), apply(), 和 bind()，就是帮助我们驯服 this 这匹野马的三大法宝！有了它们，我们就能明确地告诉 this：“嘿，哥们儿，这次你得听我的！”

第一幕：`this` 的默认绑定规则回顾

在深入了解显式绑定之前，我们先简单回顾一下 this 的默认绑定规则，这有助于我们更好地理解显式绑定的作用。

默认绑定（Default Binding）： 在非严格模式下，如果 this 的绑定无法应用其他规则，那么它会默认绑定到全局对象。在严格模式下，this 则会被绑定到 undefined。
```
function foo() {
  console.log(this.a);
}

var a = 2;
foo(); // 2 (非严格模式)

function bar() {
  "use strict";
  console.log(this);
}

bar(); // undefined (严格模式)
```
隐式绑定（Implicit Binding）： 当函数作为对象的方法被调用时，this 会绑定到该对象。
```
var obj = {
  a: 2,
  foo: function() {
    console.log(this.a);
  }
};

obj.foo(); // 2
```
new 绑定（New Binding）： 当使用 new 关键字调用函数时，会创建一个新的对象，并将 this 绑定到这个新对象。
```
function Foo(a) {
  this.a = a;
}

var bar = new Foo(2);
console.log(bar.a); // 2
```

箭头函数（Arrow Function）： 箭头函数没有自己的 this，它会继承外层作用域的 this。

var obj = {
  a: 2,
  foo: function() {
    setTimeout(() => {
      console.log(this.a); // 2
    }, 100);
  }
};

obj.foo();

第二幕：显式绑定三剑客登场！

现在，让我们隆重请出今天的明星：call(), apply(), 和 bind()！这三个方法都是函数对象自带的，它们的作用只有一个：显式地指定函数执行时 this 的值。

1. `call()`：简单直接，点石成金

call() 方法是最直接的显式绑定方式。它的语法如下：

function.call(thisArg, arg1, arg2, ...);

thisArg：指定函数执行时 this 的值。
arg1, arg2, ...：传递给函数的参数列表。

示例：

假设我们有一个对象 person：

var person = {
  name: "Alice",
  sayHello: function(greeting) {
    console.log(greeting + ", my name is " + this.name);
  }
};

现在，我们想让另一个对象 animal 也能够使用 sayHello 方法，但 this 指向 animal。我们可以使用 call() 来实现：

var animal = {
  name: "Bob the Dog"
};

person.sayHello.call(animal, "Woof"); // Woof, my name is Bob the Dog

在这个例子中，我们使用 call() 方法，将 person.sayHello 函数的 this 绑定到 animal 对象，并传递了一个参数 "Woof"。最终，sayHello 函数在 animal 的上下文中执行，输出了 "Woof, my name is Bob the Dog"。

用人话说： call() 就像一个魔法棒，它能把一个函数“借”给另一个对象使用，并让这个函数在这个对象的家里（上下文中）执行。

2. `apply()`：参数打包，灵活高效

apply() 方法与 call() 方法非常相似，它们唯一的区别在于传递参数的方式。apply() 接收两个参数：

function.apply(thisArg, [argsArray]);

thisArg：指定函数执行时 this 的值。
[argsArray]：一个包含所有参数的数组。

示例：

我们沿用上面的 person 和 animal 对象：

var person = {
  name: "Alice",
  sayHello: function(greeting) {
    console.log(greeting + ", my name is " + this.name);
  }
};

var animal = {
  name: "Bob the Dog"
};

person.sayHello.apply(animal, ["Woof"]); // Woof, my name is Bob the Dog

在这个例子中，我们使用 apply() 方法，将所有参数打包成一个数组 ["Woof"] 传递给 sayHello 函数。结果与使用 call() 方法相同。

用人话说： apply() 就像一个快递员，它把所有参数打包好，一次性送到函数手中。

call() vs apply()：选择困难症患者的福音

那么，call() 和 apply() 到底该怎么选择呢？其实很简单：

如果参数数量固定，或者参数需要逐个指定，那么 call() 更方便。
如果参数数量不确定，或者参数已经存在一个数组中，那么 apply() 更灵活。

特性	`call()`	`apply()`
参数传递方式	逐个传递参数	将所有参数打包成一个数组传递
适用场景	参数数量固定，或者参数需要逐个指定	参数数量不确定，或者参数已经存在一个数组中
性能	在大多数情况下，性能差异可以忽略不计	在大多数情况下，性能差异可以忽略不计
易用性	语法简单直接，易于理解和使用	需要将参数打包成数组，稍微复杂一些

总而言之，call() 和 apply() 的功能几乎相同，选择哪个完全取决于个人喜好和具体场景。就像选择咖啡一样，有人喜欢手冲的精致，有人喜欢速溶的便捷，只要能满足你的需求，就是最好的选择！☕

3. `bind()`：提前绑定，一劳永逸

bind() 方法与 call() 和 apply() 略有不同。它不会立即执行函数，而是创建一个新的函数，并将 this 绑定到指定的值。这意味着，我们可以提前绑定 this，然后在需要的时候再执行函数。

bind() 方法的语法如下：

function.bind(thisArg, arg1, arg2, ...);

thisArg：指定函数执行时 this 的值。
arg1, arg2, ...：预先绑定的参数列表。这些参数会在函数执行时，作为前几个参数传递给函数。

示例：

我们再次沿用上面的 person 对象：

var person = {
  name: "Alice",
  sayHello: function(greeting) {
    console.log(greeting + ", my name is " + this.name);
  }
};

var greetAlice = person.sayHello.bind(person, "Hello");

greetAlice(); // Hello, my name is Alice

在这个例子中，我们使用 bind() 方法，将 person.sayHello 函数的 this 绑定到 person 对象，并预先绑定了一个参数 "Hello"。bind() 方法返回一个新的函数 greetAlice，当我们执行 greetAlice() 时，它会在 person 的上下文中执行，并输出 "Hello, my name is Alice"。

用人话说： bind() 就像一个时间胶囊，它把 this 和一些参数提前封存起来，等到需要的时候再打开，让函数在特定的上下文中执行。

bind() 的妙用：解决回调函数中的 this 问题

bind() 方法在处理回调函数时非常有用。回调函数常常会遇到 this 指向不正确的问题，例如：

function Button() {
  this.clicked = false;
  this.handleClick = function() {
    this.clicked = true;
    console.log("Button clicked!");
  };

  document.getElementById("myButton").addEventListener("click", this.handleClick);
}

var myButton = new Button();

在这个例子中，当我们点击按钮时，handleClick 函数会被执行，但 this 指向的并不是 myButton 对象，而是触发事件的 DOM 元素。这会导致 this.clicked 无法被正确地设置为 true。

为了解决这个问题，我们可以使用 bind() 方法：

function Button() {
  this.clicked = false;
  this.handleClick = function() {
    this.clicked = true;
    console.log("Button clicked!");
  }.bind(this); // 使用 bind() 绑定 this

  document.getElementById("myButton").addEventListener("click", this.handleClick);
}

var myButton = new Button();

在这个例子中，我们使用 bind(this) 将 handleClick 函数的 this 绑定到 Button 对象。这样，当按钮被点击时，handleClick 函数会在 Button 对象的上下文中执行，this.clicked 就能被正确地设置为 true 了。

call(), apply(), bind()：三兄弟的爱恨情仇

特性	`call()`	`apply()`	`bind()`
执行时机	立即执行函数	立即执行函数	返回一个新的函数，不会立即执行
参数传递方式	逐个传递参数	将所有参数打包成一个数组传递	逐个传递参数，可以预先绑定一些参数
主要用途	立即改变函数的 `this` 指向	立即改变函数的 `this` 指向	预先绑定函数的 `this` 指向，用于创建新的函数或解决回调函数问题
适用场景	需要立即改变 `this` 指向，并且参数数量固定	需要立即改变 `this` 指向，并且参数已经存在一个数组中	需要预先绑定 `this` 指向，或者解决回调函数中的 `this` 问题

总的来说，call() 和 apply() 都是用于立即执行函数并改变 this 指向的，而 bind() 则是用于创建一个新的函数，并将 this 绑定到指定的值。它们就像三兄弟，各有各的特点和用途，在不同的场景下发挥着重要的作用。

第三幕：实战演练，融会贯通

光说不练假把式，现在让我们通过一些实际的例子，来巩固一下我们所学的知识。

例1：模拟 Array.prototype.slice()

Array.prototype.slice() 方法可以用来截取数组的一部分。我们可以使用 call() 方法来模拟它的实现：

Array.prototype.fakeSlice = function(start, end) {
  var result = [];
  start = start || 0; // 默认起始位置为 0
  end = end || this.length; // 默认结束位置为数组长度

  for (var i = start; i < end; i++) {
    result.push(this[i]);
  }

  return result;
};

var arr = [1, 2, 3, 4, 5];
var newArr = Array.prototype.fakeSlice.call(arr, 1, 3); // [2, 3]
console.log(newArr);

在这个例子中，我们使用 call() 方法，将 Array.prototype.fakeSlice 函数的 this 绑定到 arr 数组，并传递了起始位置和结束位置作为参数。最终，fakeSlice 函数在 arr 数组的上下文中执行，返回了截取后的新数组。

例2：使用 apply() 找出数组中的最大值

我们可以使用 apply() 方法，将 Math.max() 函数的 this 绑定到 null，并将数组作为参数传递给它，从而找出数组中的最大值：

var arr = [1, 2, 3, 4, 5];
var max = Math.max.apply(null, arr); // 5
console.log(max);

在这个例子中，我们将 Math.max() 函数的 this 绑定到 null，因为 Math.max() 函数本身并不需要 this。然后，我们将 arr 数组作为参数传递给 Math.max() 函数，apply() 方法会将数组中的每个元素作为单独的参数传递给 Math.max() 函数。最终，Math.max() 函数返回了数组中的最大值。

例3：使用 bind() 创建一个固定折扣的打折函数

我们可以使用 bind() 方法，创建一个固定折扣的打折函数：

function discount(price, discountRate) {
  return price * (1 - discountRate);
}

var tenPercentDiscount = discount.bind(null, undefined, 0.1); // 绑定折扣率为 0.1

console.log(tenPercentDiscount(100)); // 90
console.log(tenPercentDiscount(200)); // 180

在这个例子中，我们使用 bind() 方法，将 discount 函数的 this 绑定到 null，并将折扣率 0.1 作为预先绑定的参数传递给它。bind() 方法返回一个新的函数 tenPercentDiscount，当我们执行 tenPercentDiscount(100) 时，它会在 null 的上下文中执行，并使用预先绑定的折扣率 0.1 计算出打折后的价格。

结语：驯服 `this`，掌控全局

通过今天的学习，相信大家对 call(), apply(), 和 bind() 这三个显式绑定方法有了更深入的理解。它们是JavaScript中非常重要的工具，能够帮助我们灵活地控制 this 的指向，解决各种复杂的编程问题。

记住，this 并不是一个神秘莫测的存在，只要掌握了正确的技巧，我们就能驯服它，掌控全局！💪

希望今天的讲座对大家有所帮助。感谢大家的聆听，我们下次再见！ 👋

开场白：this，那个让人又爱又恨的家伙

第一幕：this 的默认绑定规则回顾

第二幕：显式绑定三剑客登场！

1. call()：简单直接，点石成金

2. apply()：参数打包，灵活高效

3. bind()：提前绑定，一劳永逸

第三幕：实战演练，融会贯通

结语：驯服 this，掌控全局

发表回复 取消回复

开场白：`this`，那个让人又爱又恨的家伙

第一幕：`this` 的默认绑定规则回顾

1. `call()`：简单直接，点石成金

2. `apply()`：参数打包，灵活高效

3. `bind()`：提前绑定，一劳永逸

结语：驯服 `this`，掌控全局

发表回复取消回复