函数call、apply与bind方法之间的区别

call与apply

每个函数都包含两个非继承而来的方法:call()方法和apply()方法。

javascript权威指南上的解释是 call()、apply()可以看做是某个对象的方法,通过调用方法的形式来间接的调用函数。

var func = function(arg1, arg2) {

};

就可以通过如下方式来调用:
func.call(this, arg1, arg2);
func.apply(this, [arg1, arg2]);

call与apply相同点与不同点

相同点是这两个方法的作用是一样的,改变this的指向,继承别的函数中的实例(对象冒充),两个方法的第一个参数相同,都是this要指向的对象。

不同点在于call方法后面传入的是参数列表,参数可以是任意类型,当第一个参数为null、undefined的时候,默认指向window;apply方法的第二个参数是数组。

例子1:
函数call、apply与bind方法之间的区别_第1张图片
例子2:
函数call、apply与bind方法之间的区别_第2张图片
弹出三次“心想事成”

例子3:
函数call、apply与bind方法之间的区别_第3张图片
例子4:
函数call、apply与bind方法之间的区别_第4张图片

bind

函数的bind方法会返回一个新的函数,便于稍后调用,而不是直接执行函数。当你希望改变上下文环境之后并非立即执行函数,而是回调执行函数的时候,使用 bind() 方法。返回的这个新函数我们称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。这句话有点拗口,看看下面的例子2就清楚了。
例子1:
函数call、apply与bind方法之间的区别_第5张图片
例子2:
函数call、apply与bind方法之间的区别_第6张图片

总结

函数的apply 、 call 、bind 三者都是用来改变函数的this指向的方法;三者第一个参数都是this要指向的对象,也就是想指定的上下文;三者都可以利用后续参数传参;bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。注意,在 ES6 的箭头函数下, call 和 apply 将失效, 对于箭头函数来说,箭头函数体内的 this 对象, 就是定义时所在的对象, 而不是使用时所在的对象;所以不需要类似于var _this = this这种丑陋的写法。
函数call、apply与bind方法之间的区别_第7张图片

你可能感兴趣的:(JavaScript,js)