1.引子
5月底的一天,还是平静的一天.还是熟悉的味道.
中级群的小朋友在群里丢上来一个问题. 看着也不是很难.
<pre>
<code >
<script>
var a={
fun:function(){
return this.value;
},
value:1
};
(function(){
return type of arguments[0]();
//result is undefined
})(a.fun)
</script>
</code>
</pre>
问为什么匿名函数的返回值是undefined?
作为一个饱受this上下文切换折磨的资深老司机.我一眼就觉得自己知道了答案:因为在匿名函数内,执行方法,this的上下文指向的是全局对象window,而全局并没有value这个属性.所以必然是undefined.
本着像小朋友负责的精神,我把这个代码自己写敲了一遍?
2.知识储备,this的几个基础介绍.
2.1 全局范围内的this将会指向全局对象
在浏览器中即使window。
2.2 方法内的this.会指向调用这个方法的对象本身.
比如 a.fun(); 执行时, fun内的this指向的就是a.
2.3 匿名函数具有全局性,
也就是说 匿名函数内部的this,始终指向的window. es3在设计时就设计成如此.
2.4 call和apply方法会改变this的上下文切换
基础知识储备我就不细说了. 不清楚的请百度.
3.讲解这个问题.
讲解问题前.我们把代码改变一下.把这个问题变成三个问题.
定义了一个全局变量 value. 在对象a中定义一个内部变量value.
这三个result分别是什么?
根据第二章节回忆的原则.可以这么解答
第三个不用说了 a.fun()对象直接调用. 所以fun里的this指向的是对象a. this.value. 就是a.value.
返回的是1.-
第二个. 因为匿名函数的全局性. 他的this始终是全局. 所以这里的this切换成了 window.
也就是全局变量.所以返回值是2
-
第一个result. 最坑的问题.也就是一切讨论的起源.
根据断点的调试结果. fun里的this.并不是指向的window.也不是指向的对象a. 而是指向了一个方法的数组.所以一下就理解了.this居然指向了方法的argument对象?!
看到这里我直接懵逼了.想要切换this上下文的作用域.我只知道call方法和apply 或者就是匿名函数切换到全局.这个是怎么切换过来的?
让我们忽略语法糖"[0]".只要记住argument是一个对象并不是数组. (arguments本身实现是一个伪数组,不具备js数组的方法)
所以arguments实际是这么一个形式
<pre><code>
//argument
{
0: function(){ return this.value }
}
</pre></code>
0是他的属性. 0的值是一个方法.
虽然他原本是a.fun. 但是对于argument来说.他已经成为arguments的一个属性了.
所以
arguments[0]() 相当于 执行了 arguments.0();
根据原则. 谁调用方法.那方法里this就指向谁!.所以这里this已经指向了arguments对象..
而arguments里面没有 value这个属性.
第一个result的结果,就是undefined!!
