js中call,apply和bind

15 阅读3分钟

callapplybind 这三个 JavaScript 方法的英文原意及在编程中的对应含义如下:

1. call

  • 英文原意:动词,意为“调用”、“呼叫”、“召集”。
  • 编程含义:在 JavaScript 中,用于调用函数并指定其执行时的 this 上下文,同时逐个传递参数。

2. apply

  • 英文原意:动词,意为“应用”、“运用”、“申请”。
  • 编程含义:在 JavaScript 中,用于应用函数并指定其执行时的 this 上下文,参数以数组或类数组对象的形式传递。

3. bind

  • 英文原意:动词,意为“绑定”、“系住”、“约束”。
  • 编程含义:在 JavaScript 中,用于绑定函数的 this 上下文和初始参数,返回一个新的函数(不立即执行)。

总结

这三个方法的命名与其功能高度相关:

  • callapply 强调“执行函数”的动作(调用/应用),区别仅在于参数传递方式。
  • bind 强调“绑定上下文”的动作,返回绑定后的新函数供后续使用。

这种命名方式体现了 JavaScript 设计的直观性,通过英文动词的原意即可大致理解其功能。

在JavaScript中,与call功能相似的函数对象方法还有 applybind。这三个方法都用于改变函数执行时的this上下文,但在参数传递方式和执行时机上有所不同。

1. call 方法

功能:调用函数并指定this值和参数列表。
语法function.call(thisArg, arg1, arg2, ...)
特点:参数逐个传递。

2. apply 方法

功能:调用函数并指定this值和参数数组。
语法function.apply(thisArg, [argsArray])
特点:参数以数组或类数组对象的形式传递。

3. bind 方法

功能:创建一个新函数,绑定指定的this值和初始参数,返回新函数(不立即执行)。
语法function.bind(thisArg, arg1, arg2, ...)
特点:返回绑定后的新函数,需手动调用。

三者的区别

方法参数传递方式执行时机返回值
call逐个传递参数立即执行函数执行结果
apply数组或类数组传递参数立即执行函数执行结果
bind逐个传递参数延迟执行(返回新函数)绑定后的新函数

使用示例

1. call 方法示例

const obj = { name: "Alice" };

function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}

// 使用call调用,逐个传递参数
greet.call(obj, "Hello", "!"); // 输出: Hello, Alice!

2. apply 方法示例

const obj = { name: "Bob" };

function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}

// 使用apply调用,参数以数组形式传递
greet.apply(obj, ["Hi", "!"]); // 输出: Hi, Bob!

3. bind 方法示例

const obj = { name: "Charlie" };

function greet(greeting, punctuation) {
    console.log(`${greeting}, ${this.name}${punctuation}`);
}

// 使用bind创建新函数,绑定this和初始参数
const boundGreet = greet.bind(obj, "Hey");

// 稍后调用新函数,传递剩余参数
boundGreet("!"); // 输出: Hey, Charlie!

典型使用场景

  • call:当参数数量固定且明确时使用,例如调用对象的方法并指定不同的this
  • apply:当参数是数组或类数组对象时使用,例如Math.max.apply(null, [1, 2, 3])获取数组最大值。
  • bind:当需要预先绑定this和参数,稍后多次执行时使用,例如在事件监听器中保持正确的this上下文。

总结

  • callapply 都是立即执行函数,区别仅在于参数传递方式。
  • bind延迟执行,返回绑定后的新函数,适用于需要复用绑定上下文的场景。

这三个方法在JavaScript中非常常用,尤其是在面向对象编程和函数式编程中,可以灵活控制函数的执行上下文和参数传递。