分析一个JS面试题

function foo(){ foo.abc = function(){alert('Alibaba')} this.abc = function(){alert('Alimama')} abc = function(){alert('Alipay')}; var abc = function(){alert('Taobao')} } foo.prototype.abc = function(){alert('Alisoft');} foo.abc = function(){alert('Yahoo');} var obj = new foo(); obj.abc(); foo.abc(); abc();

 

有点小意思， 分析一下， 一句一句往下看

1. function foo() {
...
}
定义一个foo 的函数对象(函数也是对象), 所以相当于这样
var foo = function() {...

2. foo.prototype.abc = function ... Alisoft

prototype在js中是很有意思的东西， ...(这里省去几千非常非常重要的文字)

总之，上面之后，我们可以这样用:

var a = new foo();
a.abc(); // alert Alisoft

3. foo.abc = function(... Yahoo
foo是一个对象， 所以abc是它的一个属性（成员？ 或者其他，反正是东东）,
就像
foo.a = 123; 一样， 只是上面 abc的类型是函数(对象)

4. var obj = new foo();
// 重点来啦， 这个会构造一个对象， 然后执行foo函数(我们还米有看), 现在来看

-----> 在开始的函数体内：
(1) foo.abc = function ... Alibaba, 
在上面我们知道， foo.abc 是 function ...Yahoo,
现在被 覆盖 了

(2) this.abc = function ... Alimama
此时的 this就是 new 返回的那个 obj
如果米有这句话, obj.abc 就是 foo.prototype.abc
现在又被 覆盖 了， 所以 obj.abc 就是 Alimama

(3) abc = function ... Alipay
(4) var abc = function ..Taobao
如果米有第(4)句， 将会从外部查找abc, 这意味着形成一个closure，
如果foo是顶层的话，那么 相当于 window.abc = function Alipay

但是有了 var abc = function Taobao,
由于在js中， 变量是函数作用域的(这被称为静态作用域，而在Java C等语言中，有更细的作用域, PHP的作用域也是函数级的)

所以上述实际上是这样:
var abc = function ... Taobao
abc = function Alipay..

很清楚了吧？

5. obj.abc();   是 Alimama 见 (2)
6. foo.abc();  是Alibaba 见(1)
7. abc();  函数未定义，会有js异常(因为 foo内的abc 不是closure变量, 见(4))