乐闻世界logo
搜索文章和话题

bind、call、apply 的区别

浏览22
7月28日 17:16

bindcallapply都是JavaScript中的函数对象的方法,它们都可以用来改变函数的this指向。每个方法的使用场景和方式有所不同:

call

call方法可以让我们在调用一个函数的同时,指定函数内部this的值,也就是改变函数运行时的上下文。call的第一个参数是this要指向的对象,其余参数依次传入。

例子

javascript
function introduce(name, age) { console.log(`My name is ${name}, and I am ${age} years old. I work as a ${this.job}.`); } const person = { job: 'developer' }; introduce.call(person, 'Alice', 30); // 输出:My name is Alice, and I am 30 years old. I work as a developer.

在以上例子中,我们使用callintroduce函数内部的this绑定到person对象,同时传入了nameage作为参数。

apply

apply方法与call非常相似,区别在于apply传入参数的方式。apply的第一个参数同样是this的值,但第二个参数是一个数组,数组中包含了所有传给函数的参数。

例子

javascript
function introduce(name, age) { console.log(`My name is ${name}, and I am ${age} years old. I work as a ${this.job}.`); } const person = { job: 'developer' }; introduce.apply(person, ['Alice', 30]); // 输出:My name is Alice, and I am 30 years old. I work as a developer.

在这个例子中,apply被用来将introduce函数的this绑定到person对象,参数以数组形式传入。

bind

bind方法创建一个新的函数,可以在稍后时间里执行,它允许我们绑定this及初始参数。与callapply不同,bind并不立即执行函数,而是返回一个改变了上下文this后的新函数。

例子

javascript
function introduce(name, age) { console.log(`My name is ${name}, and I am ${age} years old. I work as a ${this.job}.`); } const person = { job: 'developer' }; const boundIntroduce = introduce.bind(person, 'Alice', 30); boundIntroduce(); // 输出:My name is Alice, and I am 30 years old. I work as a developer.

在这里,bind被用来创建了一个新的introduce函数,该函数的this被永久绑定到person对象。

总结callapply都是立即调用函数,但是参数传递方式不同;call将参数按顺序传递,而apply则是传入参数数组。而bind则是返回一个新的函数,可以在以后任何时间点调用,其this值和参数都已经预设好了。

标签:前端