函数点睛：深探JavaScript的call、apply与bind

2023-10-11 14:32:03

JavaScript函数调用基本概念

在JavaScript中，函数调用是一种将函数与一组参数联系起来，并执行该函数的过程。函数调用时，函数中的代码会被执行，并且可以使用传入的参数。

JavaScript中的函数调用有两种基本形式：

直接调用： 函数后面直接跟着参数，例如：

function add(a, b) {
  return a + b;
}

console.log(add(1, 2)); // 输出：3

间接调用： 函数名使用变量名或表达式引用，例如：

var add = function(a, b) {
  return a + b;
};

console.log(add(1, 2)); // 输出：3

无论哪种调用方式，函数在执行时都会创建一个执行上下文，执行上下文包含了函数的局部变量、函数的参数以及函数的this值。

call、apply和bind介绍

在JavaScript中，call、apply和bind都是函数调用的方法，它们允许我们改变函数的执行上下文。

call方法

call方法允许我们指定函数的this值和参数，然后调用该函数。语法如下：

function.call(thisValue, arg1, arg2, ...)

其中：

function：要调用的函数。
thisValue：指定函数的this值。
arg1, arg2, ...：传递给函数的参数。

例如：

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

person.greet(); // 输出：Hello, my name is John

var anotherPerson = {
  name: "Jane"
};

person.greet.call(anotherPerson); // 输出：Hello, my name is Jane

在这个例子中，我们使用call方法将person.greet()函数的this值改为anotherPerson，从而让anotherPerson对象能够调用person.greet()函数。

apply方法

apply方法与call方法类似，但它以数组的形式传递参数，而不是逐个传递。语法如下：

function.apply(thisValue, [arg1, arg2, ...])

其中：

function：要调用的函数。
thisValue：指定函数的this值。
[arg1, arg2, ...]：传递给函数的参数，以数组的形式给出。

例如：

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

person.greet(); // 输出：Hello, my name is John

var anotherPerson = {
  name: "Jane"
};

person.greet.apply(anotherPerson, ["Jane"]); // 输出：Hello, my name is Jane

在这个例子中，我们使用apply方法将person.greet()函数的this值改为anotherPerson，并传递一个数组作为参数，从而让anotherPerson对象能够调用person.greet()函数。

bind方法

bind方法与call和apply方法不同，它不会立即调用函数，而是返回一个新的函数。这个新函数的this值已经被绑定到指定的this值，并且可以传递参数。语法如下：

function.bind(thisValue, arg1, arg2, ...)

其中：

function：要绑定的函数。
thisValue：指定新函数的this值。
arg1, arg2, ...：传递给新函数的参数。

例如：

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

var greetJohn = person.greet.bind(person);

greetJohn(); // 输出：Hello, my name is John

var anotherPerson = {
  name: "Jane"
};

var greetJane = person.greet.bind(anotherPerson);

greetJane(); // 输出：Hello, my name is Jane

在这个例子中，我们使用bind方法将person.greet()函数的this值绑定到person对象，从而创建了一个新的函数greetJohn。然后我们调用greetJohn()函数，输出结果是“Hello, my name is John”。

我们还可以使用bind方法将person.greet()函数的this值绑定到anotherPerson对象，从而创建了一个新的函数greetJane。然后我们调用greetJane()函数，输出结果是“Hello, my name is Jane”。

总结

call、apply和bind都是JavaScript中改变函数执行上下文的函数，它们可以让我们在不同的对象中调用函数，从而实现代码的重用和解耦。

方法	调用方式	传参方式	返回值
call	`function.call(thisValue, arg1, arg2, ...)`	逐个传递参数	无
apply	`function.apply(thisValue, [arg1, arg2, ...])`	以数组的形式传递参数	无
bind	`function.bind(thisValue, arg1, arg2, ...)`	逐个传递参数	返回一个新的函数