Skip to content

JavaScript函数方法 - call()、apply()和bind()

Function.prototype.call()

Function.prototype.call()用于使用给定的this上下文和单独提供的任何参数调用函数。例如:

function printThisAndData(...data) {
  console.log(this.data, ...data);
}

const obj = { data: 0 };
const data = [1, 2, 3];

printThisAndData.call(obj, data);       // 输出:0 [1, 2, 3]
printThisAndData.call(obj, ...data);    // 输出:0 1 2 3

Function.prototype.apply()

Function.prototype.apply()Function.prototype.call()几乎相同,因为它使用给定的this上下文调用函数,但它要求参数以数组的形式提供。例如:

function printThisAndData(...data) {
  console.log(this.data, ...data);
}

const obj = { data: 0 };
const data = [1, 2, 3];

## Function.prototype.call()

`Function.prototype.call()` 方法用于调用一个函数,并将一个指定的 `this` 值和单独的参数传递给该函数。例如:

```js
function printThisAndData(...data) {
  console.log(this.data, ...data);
}

const obj = { data: 0 };
const data = [1, 2, 3];

printThisAndData.call(obj, data);       // 输出:0 [1, 2, 3]
printThisAndData.call(obj, ...data);    // 输出:0 1 2 3

Function.prototype.apply()

Function.prototype.apply() 方法也用于调用一个函数,但是它接收一个指定的 this 值和一个参数数组作为参数。参数数组中的每个元素都会作为单独的参数传递给函数。例如:

function printThisAndData(...data) {
  console.log(this.data, ...data);
}

const obj = { data: 0 };
const data = [1, 2, 3];

printThisAndData.apply(obj, data);      // 输出:0 1 2 3
printThisAndData.apply(obj, ...data);   // 抛出 TypeError

Function.prototype.bind()

Function.prototype.bind() 方法与前面两个方法略有不同。它不是直接调用函数并返回结果,而是返回一个绑定了指定 this 值的函数,并且在调用返回的函数时,会将提供的参数逐个添加到调用时的参数之前。例如:

function printThisAndData(...data) {
  console.log(this.data, ...data);
}

const obj = { data: 0 };
const data = [1, 2, 3];

const printObjAndData = printThisAndData.bind(obj);

printObjAndData(data);                  // 输出:0 [1, 2, 3]
printObjAndData(...data);               // 输出:0 1 2 3

const printObjTwoAndData = printThisAndData.bind(obj, 2);

printObjTwoAndData(data);               // 输出:0 2 [1, 2, 3]
printObjTwoAndData(...data);            // 输出:0 2 1 2 3