多魔幻 JavaScript 系列（一）：call、bind 以及上下文

JavaScript 是一门优雅的编程语言，也是一门魔幻的语言。它是一门多范式的编程语言，支持面向对象、面向过程和函数式编程。它拥有丰富的库和框架，可以帮助我们快速开发出各种各样的应用程序。然而，它也是一门魔幻的语言，经常会给我们带来一些惊喜。

在 JavaScript 中，call、bind 和 apply 是三个非常重要的函数。它们可以改变函数的上下文，从而实现一些有趣的功能。

call() 方法

call() 方法可以改变函数的上下文。它接受两个参数：第一个参数是函数要调用的对象，第二个参数是函数要传递的参数。例如：

function greet(name) {
  console.log("Hello " + name);
}

greet("John"); // Hello John

var person = {
  name: "John"
};

greet.call(person); // Hello John

在上面的例子中，我们调用 greet() 函数，并传递了一个参数 "John"。这样，函数 greet() 就会在 person 对象的上下文中执行。因此，console.log() 语句会输出 "Hello John"。

bind() 方法

bind() 方法也可以改变函数的上下文。它与 call() 方法的区别在于，bind() 方法不会立即调用函数，而是返回一个新的函数。这个新的函数的上下文已经绑定到了指定的对象。例如：

function greet(name) {
  console.log("Hello " + name);
}

var person = {
  name: "John"
};

var greetJohn = greet.bind(person);

greetJohn(); // Hello John

在上面的例子中，我们调用 greet() 函数的 bind() 方法，并传递了一个参数 person。这样，就返回了一个新的函数 greetJohn。这个函数的上下文已经绑定到了 person 对象。因此，当我们调用 greetJohn() 函数时，console.log() 语句会输出 "Hello John"。

apply() 方法

apply() 方法也可以改变函数的上下文。它与 call() 方法的区别在于，apply() 方法的第二个参数是一个数组，包含了要传递给函数的参数。例如：

function greet(name) {
  console.log("Hello " + name);
}

var person = {
  name: "John"
};

greet.apply(person, ["John"]); // Hello John

在上面的例子中，我们调用 greet() 函数的 apply() 方法，并传递了两个参数：person 和 ["John"]。这样，函数 greet() 就会在 person 对象的上下文中执行，并且会收到参数 ["John"]。因此，console.log() 语句会输出 "Hello John"。

上下文

在 JavaScript 中，上下文是一个非常重要的概念。上下文决定了函数中的 this 的值。this 关键字的值可以是对象、数组、函数等等。在大多数情况下，this 的值是函数被调用的对象。例如：

var person = {
  name: "John",
  greet: function() {
    console.log("Hello " + this.name);
  }
};

person.greet(); // Hello John

在上面的例子中，我们定义了一个对象 person，并为它添加了一个方法 greet()。当我们调用 person.greet() 方法时，this 的值是 person 对象。因此，console.log() 语句会输出 "Hello John"。

然而，在某些情况下，this 的值可能会发生改变。例如：

var person = {
  name: "John",
  greet: function() {
    setTimeout(function() {
      console.log("Hello " + this.name);
    }, 1000);
  }
};

person.greet(); // Hello undefined

在上面的例子中，我们调用 person.greet() 方法。这个方法中有一个 setTimeout() 函数。setTimeout() 函数会延迟执行一段代码。在这个例子中，setTimeout() 函数会延迟 1 秒执行一段代码。这段代码中，我们调用了 console.log() 语句。这时，this 的值已经不是 person 对象了，而是 window 对象。因此，console.log() 语句会输出 "Hello undefined"。

总结

在 JavaScript 中，call()、bind() 和 apply() 方法可以改变函数的上下文。上下文决定了函数中的 this 关键字的值。this 的值可以是对象、数组、函数等等。在大多数情况下，this 的值是函数被调用的对象。然而，在某些情况下，this 的值可能会发生改变。