一道腾讯js面试题

 

题目如下：

 

 

f = function() {return true;}; 
g = function() {return false;}; 
(function() { 
   if (g() && [] == ![]) { 
      f = function f() {return false;}; 
      function g() {return true;} 
   } 
})(); 
alert(f()); // true or false ? 

 

 

 

 

按网友的描述猜测，这应该是QQ招聘的题目，既考查了ECMAScript知识，又需要被面试者的应用实践，题目本身无标准答案，在不同浏览器下表现不同。

 

这是一道难度较大，并且出题角度比较刁钻的面试题。

 

正赶上最近在研究Javascript这部分的内容，便对该题目涉及的考察点进行了更深入的研究。以下给出简单分析。

考察点

 对作用域链（scope chain）、执行环境（execution context）、变量对象（variable object）的理解 

 命名函数表达式，参见这里 

 以上知识点在不同浏览器（主要为：IE和Firefox）的实现差异 

 相等操作符的隐式类型转换规则 

首先，代码简化为（1）：

 

 

f = function() {return true;}; 
g = function() {return false;}; 
(function() { 
   alert(g()); 
   function g() {return true;} 
})(); 

 

 

 

 

上面的例子中，当控制器进入匿名函数的执行环境后，初始化活动对象，函数声明g被放到了执行环境的变量对象集合中，property为g，值为g函数对象，当执行g()，返回true。

将上面的代码稍加改变（2）：

 

 

f = function() {return true;}; 
g = function() {return false;}; 
(function() { 
   alert(g()); 
   if (true) { 
      function g() {return true;} 
   } 
})(); 

 

 

 

 

上面代码，结果应该与（1）相同，但Firefox处理结果出现了不同返回false，暂且把这看作是Firefox的bug（虽然Firefox不认为这是个Bug）。

 

分析：在Firefox中，出现在条件语句中的代码块不做活动对象初始化的处理（Firefox把它当作块作用域？？），即把上例的if (true) 修改为 if (false) 结果是一样的。（这点很重要，造成了if语句中的g函数没有在函数一开始被初始化）

 

到此为止，已经可以确定g()执行后的值是true还是false了。

整合一下（3）：

 

 

f = function() {return true;}; 
g = function() {return false;}; 
(function() { 
   if (g()) { 
      alert("能看到这个警告框，说明你的浏览器不是Firefox"); 
      function g() {return true;} 
   } 
})(); 

 

 

 

继续分解代码（4）：

 

 

f = function() {return true;}; 
g = function() {return false;}; 
(function() { 
   f = function() {return false;}; 
})(); 
alert(f()); 

 

 

 

 

代码运行，无一例外的返回false，这正是我们想要的结果。

然后稍作改变（5）：

 

 

f = function() {return true;}; 
g = function() {return false;}; 
(function() { 
   f = function f() {return false;}; 
})(); 
alert(f()); 

 

 

 

 

经过稍加修改后，这次掉链子的轮到IE了，IE竟然返回了true！！！这是IE的Bug，参见：

 

http://www.cn-cuckoo.com/main/wp-content/uploads/2009/12/named-function-expressions-demystified.html#named-expr

 

http://www.w3help.org/zh-cn/causes/SJ9001

 

至于[]==![]的结果，请参考本人《Javascript类型转换规则》一文，回过头来你就会轻易得出结论。

最后大整合。

 

我们不仅知道结果，而且知道为啥是这结果了（6）：

 

 

f = function() {return true;}; 
g = function() {return false;}; 
(function() { 
   if (g() && [] == ![]) { 
      f = function f() {return false;}; 
      function g() {return true;} 
   } 
})(); 
alert(f()); 

 

 

 

 

没有问题的浏览器会返回：false

 

Firefox不会执行到if条件内部，返回：true

 

IE会执行到if条件内部（但把if内部的f作为局部变量处理了），最后返回：true

 

[转自:http://hi.baidu.com/xiaogui2go/blog/item/4b966b1741659d1ec93d6de0.html]

 

注：针对IE，文章最后提到“IE会执行到if条件内部（但把if内部的f作为局部变量处理了），最后返回：true”，括号中那句描述容易让人产生误解：只有if内部的f会最做为局部变量处理。实际上，只要是在函数内部定义的变量，即使没有加var修饰符，也会作为该函数的局部变量。这点与其他非IE浏览器表现不一样。