javascript中apply,call和bind的区别

JavaScript08

javascript中apply,call和bind的区别,第1张

在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这三个方法,来改变函数体内部 this 的指向,因为函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。

一、apply、call

apply:应用某一对象的一个方法,用另一个对象替换当前对象。

call:调用一个对象的一个方法,以另一个对象替换当前对象。

共同之处:

都可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。

不同之处:

1、apply:最多只能有两个参数——新this对象和一个数组 argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里面。如果 argArray 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。如果没有提供 argArray 和 thisObj 任何一个参数,那么 Global 对象将被用作 thisObj,并且无法被传递任何参数。

2、call:则是直接的参数列表,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。

apply和call功能一样,只是传入的参数列表形式不同,其中 thisArg 是你想指定的上下文,他可以是任何一个 JavaScript 对象(JavaScript 中一切皆对象),call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

如果某个函数的参数数量是不固定的,当参数是明确知道数量时用 call ,而不确定的时候用 apply,然后把参数 push 进数组传递进去。当参数数量不确定时,函数内部也可以通过 arguments 这个数组来遍历所有的参数。

二、bind

与上面不同的是,bind会返回一个改变this指向的新函数 ,注意这里强调的是新函数,其与之前的使用的不是同一块内存地址,所以当需要重复使用这个函数的时候,就不得不把其保存到一个变量,方便下次调用。上面的两个函数都是返回的执行结果,即调用即执行,此外,另外需要注意的地方是,bind函数中的首个参数,会自动成为返回新函数中参数的默认值,那么正式调用的时候,只需要给出除首个参数外,剩余参数即可。

当希望改变上下文环境之后并非立即执行,而是回调执行的时候,使用 bind() 方法。而 apply/call 则会立即执行函数。

三、三者的联系:

apply 、 call 、bind 三者都是用来改变函数的this对象的指向的

apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文

apply 、 call 、bind 三者都可以利用后续参数传参

bind是返回对应函数,便于稍后调用apply、call则是立即调用。

在分析这四种代码前,首先得弄清楚,如果一个对象obj调用了f函数,这个obj会发生什么样的变化。

obj.f()

上面的代码中对象obj调用了f函数,在f函数里,第一句是this.a = 'A'。那么这个this是指什么?如果你不清楚,那我直接说好了。this就是只那个调用f函数的对象,显然在这里是obj。那么this.a = 'A'实际上就是obj.a = 'A',也就是说,obj多了一个属性a,其值为A。同样的道理,第二句代码给obj添加了一个属性b,其值是一个函数,alert出一个B。

明白了吗?obj.f()的直接影响就是obj.a = 'A',obj.b = function(){alert('B')}。

弄明白了obj.f()的影响,接下来要搞清楚的就是f.call(obj)是一种怎么样的调用。如果你了解call这个函数,你可以知道的更多些;如果你不了解,希望你自己去仔细研究下,我这里只能直接告诉你:

f.call(obj)相当于obj.f()

看到了吗,这就是为什么要先讲清楚obj.f()的影响。因为f.call(obj)其实就是obj.f()。

此时再来看这四种调用。

第一种:

首先来看看第一句,根据前面的分析,我们知道,此时e.a = 'A'。那么第二句干了什么呢?第二句alert(a),显然这a和e是没有关系的,由于变量a事先没有定义,在js中不能直接使用未定义的变量,alert(a)其实出错了,所以你没有看到任何反应。但如果你使用开发者工具,就能看到,这样的写法已经报错了。错误的代码,自然没有任何反应。

第二种:

第二种比较绕,还是来看看它的调用过程吧。f.call(e.t),这个e.t是什么?因为e没有t这个属性,所以这句相当于f.call(undefined)。当call函数的第一个参数是undefined或者null时,f.call(undefined)就相当于f(),也相当于window.f()。那么根据开头的分析,这时f函数的调用者就是window了,也就是说window.a =' A'了。第二句alert(a),显然在函数e的作用域里,变量a是不存在的,所以js会到window的作用域去查找属性a,而window的属性a是有的,它的值是A,所以这个时候alert(a)就是alert(window.a),alert的结果就是A。

第三种:

我觉得看了前两种调用的分析,你应该知道f.call(y.t)相当于什么,它相当于y.t.f(),但遗憾的是,y这个变量并没有定义,无论是在函数e的作用域内还是window的作用域内,y都是不存在的,而使用一个未定义的变量,是一种错误的语句,所以带三种调用和第一种一样,是错了,alert(a)根本就没有执行,因此没有任何反应;当然,就算执行了alert(a)也是错的,它和第一种调用的错误就一样了。

第四种:

第四种应该是比较容易理解的了。根据开头的分析,f.call(e),e.a = 'A',这个没有意见吧?所以第二句alert(e.a)就alert出了A。