JavaScript 中的 apply、call、bind

时间：2023-02-23 12:08:14

一、常规

在 JavaScript 中，apply、call、bind 是三个与函数调用相关的方法，它们都允许你在调用函数时手动设置函数的上下文（即 this 指向）。

1、apply 方法：apply 方法允许你调用一个函数，并且手动设置函数的上下文（即 this 指向）以及传递一个参数数组。其语法如下：

function.apply(thisArg, [argsArray])

其中，thisArg 表示函数要绑定的上下文，argsArray 是一个可选的数组，其中包含将传递给函数的参数列表。

例如，以下代码会将数组 [1, 2, 3] 作为参数传递给函数 foo，并且将函数的上下文设置为对象 obj：

function foo(a, b, c) {
  console.log(a + b + c);
}

var obj = {
  x: 1,
  y: 2,
  z: 3
};

foo.apply(obj, [1, 2, 3]); // 输出 6

2、call 方法：call 方法与 apply 方法类似，也是允许你调用一个函数，并且手动设置函数的上下文（即 this 指向），但是它需要你手动传递一个参数列表，而不是一个参数数组。其语法如下：

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

其中，thisArg 表示函数要绑定的上下文，arg1、arg2、... 是将传递给函数的参数列表。

例如，以下代码会将参数 1、2、3 传递给函数 foo，并且将函数的上下文设置为对象 obj：

function foo(a, b, c) {
  console.log(a + b + c);
}

var obj = {
  x: 1,
  y: 2,
  z: 3
};

foo.call(obj, 1, 2, 3); // 输出 6

3、bind 方法：bind 方法与 apply、call 方法不同，它并不会立即调用函数，而是会返回一个新的函数，并且这个新函数的上下文（即 this 指向）被永久地绑定到了指定的对象上。其语法如下：

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

其中，thisArg 表示函数要绑定的上下文，arg1、arg2、... 是一些可选的参数，这些参数将在调用新函数时作为参数列表传递给原函数。

例如，以下代码会将函数 foo 的上下文绑定到对象 obj 上，并返回一个新函数 newFoo，当调用 newFoo 时，它的参数将被传递给原函数 foo：

function foo(a, b, c) {
  console.log(a + b + c + this.x + this.y + this.z);
}

var obj = {
  x: 1,
  y: 2,
  z: 3
};

var newFoo = foo.bind(obj, 1, 2, 3);
newFoo(); // 输出 12

 

下面是一个示例，演示了使用 apply、call、bind 方法的一些特性：

function foo(a, b) {
  console.log(this.x + this.y + a + b);
}

var obj1 = {
  x: 1,
  y: 2
};

var obj2 = {
  x: 3,
  y: 4
};

// 使用 apply 方法调用函数 foo，并将 obj1 作为上下文
foo.apply(obj1, [3, 4]); // 输出 10

// 使用 call 方法调用函数 foo，并将 obj2 作为上下文
foo.call(obj2, 5, 6); // 输出 18

// 使用 bind 方法绑定函数 foo 的上下文为 obj1，并创建一个新函数 newFoo
var newFoo = foo.bind(obj1, 7);
newFoo(8); // 输出 18

// 使用 bind 方法绑定函数 foo 的上下文为 obj2，并创建一个新函数 newFoo2
var newFoo2 = foo.bind(obj2);
newFoo2(9, 10); // 输出 26

二、特殊

1、如果在使用 apply、call、bind 方法时没有传递 thisArg 参数或者传递了 null 或 undefined，那么默认的上下文将是全局对象（在浏览器环境中，通常是 window 对象）。

function foo() {
  console.log(this === window); // 在浏览器环境中，输出 true
}

// 使用 apply 方法调用函数 foo，没有传递 thisArg 参数
foo.apply(); // 输出 true

// 使用 call 方法调用函数 foo，传递了 null 作为 thisArg 参数
foo.call(null); // 输出 true

// 使用 bind 方法绑定函数 foo 的上下文为 null，并创建一个新函数 newFoo
var newFoo = foo.bind(null);
newFoo(); // 输出 true

2、如果使用 bind 方法绑定了函数的上下文后，再使用 apply 或 call 方法调用这个函数，那么绑定的上下文将会被忽略，仍然使用传递给 bind 方法的上下文。

var obj1 = {
  x: 1,
  y: 2
};

var obj2 = {
  x: 3,
  y: 4
};

function foo() {
  console.log(this.x + this.y);
}

// 使用 bind 方法绑定函数 foo 的上下文为 obj1，并创建一个新函数 newFoo
var newFoo = foo.bind(obj1);

// 使用 apply 方法调用新函数 newFoo，并将 obj2 作为上下文
newFoo.apply(obj2); // 输出 3

// 使用 call 方法调用新函数 newFoo，并将 obj2 作为上下文
newFoo.call(obj2); // 输出 3

在这个示例中，先使用 bind 方法将函数 foo 的上下文绑定为 obj1，并创建了一个新函数 newFoo。然后，分别使用 apply 和 call 方法调用新函数 newFoo，并将 obj2 作为上下文。由于使用了 bind 方法绑定了上下文，无论传递了什么参数，都不会改变绑定的上下文。这就是绑定的上下文被忽略的情况。最终输出的结果为 3，而不是 7。

3、如果使用 bind 方法绑定了函数的上下文后，再使用 new 操作符创建实例，那么绑定的上下文将被忽略，而是创建一个新的对象作为 this，并且原函数中的 this 将会指向这个新对象。

function Foo() {
  this.x = 1;
  this.y = 2;
}

var obj = {
  x: 3,
  y: 4
};

// 使用 bind 方法绑定函数 Foo 的上下文为 obj，并创建一个新函数 NewFoo
var NewFoo = Foo.bind(obj);

// 使用 new 操作符创建实例，此时会忽略绑定的上下文 obj，而是创建一个新对象作为 this
var newObj = new NewFoo();

console.log(newObj.x); // 输出 1
console.log(newObj.y); // 输出 2

console.log(obj.x); // 输出 3
console.log(obj.y); // 输出 4

在这个示例中，先使用 bind 方法将函数 Foo 的上下文绑定为 obj，并创建了一个新函数 NewFoo。然后，使用 new 操作符创建实例，此时会忽略绑定的上下文 obj，而是创建一个新对象作为 this。因此，实例 newObj 中继承了绑定函数 Foo 中定义的属性 x 和 y，输出 1 和 2。同时，原函数中的 this 指向了新创建的对象 newObj，因此在原函数中定义的属性 x 和 y 也被添加到了新对象上。

 

综上所述，apply、call、bind 方法都是用于手动设置函数的上下文（即 this 指向），在实际开发中也经常被使用。对于这三个方法，需要了解它们的使用方法、语法和一些注意事项，以便在开发中更加灵活地使用它们。

 

标签：

相关文章