你的位置:首页 > Java教程

[Java教程]例证关于js中call和apply的误解


发现一些文章对call和apply的存在误解,因为误解的解释方式比较容易被理解吧,当然也有批判的,但都只是说说怎么才是对的,没有具体分析误解为什么是误解

今天让我们来仔细分析一下,为何不恰当

function add(a, b) {   alert(a + b);}function sub(a, b) {   alert(a - b);}add.call(sub, 3, 1);   //4


说词1:用 add 来替换 sub
说词2:call方法前面的东西(add)都交给后面(sub)了
说词3:sub 已经接过了add方法

恰当理解:
将add执行的上下文由window对象切换为对sub的引用,即this指向从window对象变为对sub的引用,仅此而已,这个例子其实没有什么实际上的意义

以上为从网络上摘选的观点
“说词”派说,看上去结果一样,凭什么这个理解就是恰当的?

OK,首先,我们来看下什么是上下文:

在JavaScript中,你的代码将总是有着某种形式的上下文(代码在其内部工作的对象)。上下文是通过变量this工作的,变量this总是引用代码当前所在的那个对象。全局对象实际上是window对象的属性,这意味着即使是在全局上下文里,this变量仍然引用一个对象。

搞清了上下文,那么我们来看这样一个函数

function test() {   var myValue = 1;   this.value = 2;}

这个函数中,value很明显是存在于上下文中的
而myValue 是无法用this访问到的,类似私有变量的概念
问题来了,对于“说词”派的那些理解方式,“私有变量”也被传递了,所以结果是4,没有2

看到这里会不会有很奇怪的感觉了?真的是这样么?
我们再来分析,改写一下add和sub两个函数:

function add(a, b) {   alert(inner(a, b));}function sub(a, b) {   function inner() {     this.value = arguments[0] - arguments[1];     return this.value   };}add.call(sub, 3, 1);

按照“说词”的解释,alert(inner(a, b)) 被传到 sub 中,那么结果为2
事实上,运行这段代码的时候,会发现抛错“inner is not defined”
“说词”派可能会站出来反驳了,add 都把 sub 整个覆盖了,肯定没有inner方法了

我们继续看,把add改一下

function add(a, b) {   alert(this);}function sub(a, b) {   function inner() {     this.value = arguments[0] - arguments[1];     return this.value   };}add.call(sub, 3, 1); 

然后看输出


哦,买糕的,这是神马情况?怎么把sub函数代码体整个输出了?

“说词1”完全不对,sub被替换成add后怎么this还会是sub?
“说词2”和“说词2”也不对,如果是把add交个sub或sub接过了add的方法,那么在sub中执行alert(this)的结果是,this指向window
So,“说词”派,团灭

我们再来看一看,什么情况下会把函数代码体本身给输出来?

function test(a, b) { this.value = 1;}console.log('test:', test );console.log('test():', test() );console.log('new test():', new test() ); 

输出结果:

输出函数的引用,才会把函数代码体本身给输出
我们再把“sub函数代码体整个输出”现象按“恰当解释”的说法走一边,其实是很容易解释的:
call和apply实现的是切换函数对象的上下文
把add的上下文this切换到sub的引用上,所以this把sub函数代码体整个给输出来了,事实上,这个做法完全没有什么意义,因为this.value根本就undefined

基于这一结论,我们把本文最开始的代码这样改造一下,此时sub才参与工作了

function add(a, b) {   alert(a + b);   this(a, b)   //此处相当于执行sub}function sub(a, b) {   alert(a - b);}add.call(sub, 3, 1);   //4   //2

现在是不是更清晰更本质的认识到call的作用了?

不过,日常开发中,我们需要的是切换到一个有意义的上下文中,也就是this.value在切换上文后,能很方便的取到不同的值,我们发现new一个实例出来的结果为一个{}对象,最符合我们的需要,就像这样

function add(a, b) {   this.inner(a, b);}function sub() {   this.inner = function(a, b) {     alert(a - b);   };}add.call(new sub(), 3, 1);  //2


OK,扯了这么多,最后,再发一例更直接的干货,来看一段代码

function add(a, b) {   this.inner(a, b);}function sub(a, b) {   this.inner = function() {     alert(arguments.callee.caller);   };}add.call(new sub(), 3, 1);

此时arguments.callee相当于this.inner,当this.inner()执行的时候,arguments.callee才有效

再次根据“说词”派的解释,this.inner(a, b)交给了sub来执行,执行者是sub,那么this.inner()的caller必定指向sub
事实上并非如此,输出结果:


输出的结果是add
也就是说,call仅仅是将add的上下文替换成了sub,执行者仍然是add,不是sub


转载请注明出处:http://www.cnblogs.com/tevinli/p/4558107.html