函数调用方法 call、apply、bind 区别和详解

2023-10-04 01:44:33

在 JavaScript 中，函数调用方法 call、apply、bind 可以改变函数的执行上下文，从而影响函数内部的 this 指向。这三个方法具有相似的功能，但也有细微的差别。

一、call 方法

call 方法的语法如下：

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

thisArg：指定函数执行时，this 指向的对象。
arg1, arg2, ...：传递给函数的参数。

call 方法的用法如下：

// 创建一个函数
function greet(name) {
  console.log(`Hello, ${name}!`);
}

// 调用 greet 函数，并将 this 指向 div 元素
const div = document.getElementById('myDiv');
greet.call(div, 'John Doe'); // 输出: Hello, John Doe!

call 方法的特点：

可以改变 this 指向。
可以传入任意数量的参数。

二、apply 方法

apply 方法的语法如下：

function.apply(thisArg, [args])

thisArg：指定函数执行时，this 指向的对象。
[args]：一个包含所有参数的数组。

apply 方法的用法如下：

// 创建一个函数
function sum(a, b) {
  return a + b;
}

// 调用 sum 函数，并将 this 指向 div 元素
const div = document.getElementById('myDiv');
sum.apply(div, [1, 2]); // 输出: 3

apply 方法的特点：

可以改变 this 指向。
参数必须是一个数组。

三、bind 方法

bind 方法的语法如下：

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

thisArg：指定函数执行时，this 指向的对象。
arg1, arg2, ...：传递给函数的参数。

bind 方法的用法如下：

// 创建一个函数
function greet(name) {
  console.log(`Hello, ${name}!`);
}

// 使用 bind 方法创建一个新函数，并将 this 指向 div 元素
const boundGreet = greet.bind(div);

// 调用 boundGreet 函数
boundGreet('John Doe'); // 输出: Hello, John Doe!