javascript中,call和apply方法的用途是为了扩充函数赖以生存的作用域,通俗点来说,就是为了动态改变函数体内部this的指向。
用途: 扩充函数赖以生存的作用域。
好处: 对象与方法之间不需要任何的耦合关系。
javascript的一大特点是,函数存在定义时上下文,运行时上下文,和上下文是可变的,这样的概念。
先上一个例子:
function showColor(){
console.log("my color is:" + this.color);
}
window.color = "red";
showColor.call(window); //my color is:red
上面的例子中,showColor函数并没有对外部调用自己传入的参数进行接收,那么调用者是怎么样通过调用该函数来得到想要的结果呢?
先来解释下,上面这段代码。代码中,定义了一个showColor函数,以及一个挂载在window下的一个全局对象color,showColor.call(this)执行了showColor函数,并且改变了showColor函数中this的指向,call方法传入的第一个参数,始终代表着this的指向。当传入的第一个参数是window的时候,showColor函数中的this就指向了window,那么this.color就相当于window.color了,打印出来的结果就自然是window.color的值了。
var colorObj = {"color":"blue"};
showColor.call(colorObj); //my color is:blue
那么我们再来定义一个colorObj 对象,对象中,有一个属性color,call方法中第一个参数是colorObj 对象,那么一样的道理,showColor函数中的this就指向了**colorObj **对象了。这就是call方法的简单运用了。
call的用法:
语法:call(thisObj,arg1,arg2,argN)
定义:调用一个对象的一个方法,以另一个对象替换当前对象。
说明:
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 window 对象被用作 thisObj。
apply的用法:
语法:apply(thisObj,[argArray])
定义:应用某一对象的一个方法,用另一个对象替换当前对象。
说明:
如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 argArray 和 thisObj 任何一个参数,那么 window 对象将被用作 thisObj, 并且无法被传递任何参数。
对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:
function test(arg1,arg2){......}
就可以通过以下方式调用了
test.call(this,arg1,arg2);
test.apply(this,[arg1,arg2]);
其中 this 是你想指定的上下文,可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。
bind的用法:
bind方法虽然与call,apply的用法有点不同,但是其作用也是一样的,也是可以改变函数体内this的指向。
MDN的解释是:bind()方法会创建一个新函数,称为绑定函数,当调用这个绑定函数时,绑定函数会以创建它时传入 bind()方法的第一个参数作为 this,传入 bind() 方法的第二个以及以后的参数加上绑定函数运行时本身的参数按照顺序作为原函数的参数来调用原函数。
以最开始的例子为例:
function showColor(){
console.log("my color is:" + this.color);
}
window.color = "red";showColor.bind(window); //这里并不会打印出想要的结果
这个例子就可以很好的证明了上面MDN的解释了,当浏览器执行"showColor.bind(window); "这一句代码的时候,bind()创建了一个绑定函数,也就是说这句代码只是创建了一个函数,却并没有调用执行该函数,就像我们自己定义了一个普通函数而没有调用它,所以这句代码需要改成如下:
showColor.bind(window)(); //my color is:red
这也是apply、call、bind的不同之处。bind方法是创建一个函数,然后可以在需要调用的时候再执行函数,并非是立即执行函数;而call,apply是在改变了上下文中的this指向后并立即执行函数。
总结:
-
call,apply,bind都是可以改变函数体内this的指向。
-
call,apply,bind使用时,传入的第一个参数都是用来传递this的指向的,也就是对上下文的指定。
-
call,apply,bind都是可以传入多个参数,不同的是,call和bind的后续参数都是按照顺序传参,而apply的传参类型是数组;bind的参数可以在函数执行的时候再次添加。