Js(Javascript)的apply call 和bind区别

apply、call 和 bind 是用于调用函数的三种不同方式,它们的主要区别在于函数调用时的上下文(this 关键字)以及参数传递的方式。call 和 apply 是用于立即调用函数并设置 this 上下文的方法,它们的主要区别在于参数传递的方式。bind 不会立即执行函数,而是创建一个新的函数,将 this 绑定到指定的上下文。并可选地预设参数,然后可稍后调用这个新函数。

1、function.bind(obj[,param1,param2,...])

obj是要设置为函数内部的 this 的对象。param1,param2,...是可选的参数列表,如果在绑定时提供,那么在调用新函数时可以传递更多参数。bind 方法返回一个新函数,可在稍后调用这个新函数。

bind 方法不会立即执行函数,而是创建一个新的函数,该函数的 this 值被永久地绑定到指定的上下文,而且在调用时可以传递参数。

使用参考Js(Javascript)中的bind方法的使

2、function.call(context, arg1, arg2, ...)

context 是要设置为函数内部的 this 的对象。arg1, arg2, ... 是要传递给函数的参数列表。call 方法会立即执行函数。

call 是一个函数的方法,可以在调用函数的同时显式指定函数内部的 this 值,以及以参数列表的形式传递参数。

使用参考:Js(Javascript)中的call方法的使用

3、function.apply(obj,[arg1, arg2, ...])

obj是要设置为函数内部的 this 的对象,[arg1, arg2, ...] 是一个数组,包含要传递给函数的参数。apply 方法会立即执行函数。

applycall 类似,也可以显式设置函数内部的 this 值,并传递参数,但参数以数组的形式传递。

使用参考Js(Javascript)中的apply方法的使用

4、总结

 callapply 是用于立即调用函数并设置 this 上下文的方法,它们的主要区别在于参数传递的方式。bind 不会立即执行函数,而是创建一个新的函数,将 this 绑定到指定的上下文,并可选地预设参数,然后你可以稍后调用这个新函数。区别如下,

特性bindapplycall
调用方式创建新函数立即执行函数立即执行函数
this 绑定
参数传递方式可选数组参数列表
参数个数可选可变可变
返回值新函数函数执行结果函数执行结果

示例代码:

function displayInfo(job, city) {
  console.log(`Name: ${this.name}, Job: ${job}, City: ${city}`);
}

const person1 = { name: 'Levi' };
const person2 = { name: 'John' };

// 使用 call 和 apply 动态绑定上下文并传递参数
displayInfo.call(person1, 'Engineer', 'Shanghai'); 
displayInfo.apply(person2, ['Doctor', 'BeiJing']); 

// 使用 bind 动态绑定上下文并创建新函数
const infoToA = displayInfo.bind(person1, 'Designer');
const infoToB = displayInfo.bind(person2, 'Teacher');

infoToA('ShenZhen');  
infoToB('GuangZhou'); 
推荐阅读
cjavapy编程之路首页