Firefox 对条件判断语句块内的函数声明的处理与其他浏览器有差异

标准参考

函数声明和函数表达式

定义一个函数有两种途径：函数声明和函数表达式。

函数声明：

function Identifier ( FormalParameterList

^opt

 ) { FunctionBody }

函数表达式：

function Identifier

^opt

 ( FormalParameterList

^opt

 ) { FunctionBody }

ECMAScript 根据上下文来区分函数声明和函数表达式，假设 "function test(){}" 是一个表达式的一部分，它就是一个函数表达式，否则它就是一个函数声明。

关于函数声明和函数表达式的更多信息，请参考 ECMAScript 规范 13 Function Definition 中的内容。

函数声明可以出现的位置

根据 ECMAScript 规范第 13 章 Function Definition 和第 14 章 Program 中的描述，函数声明只能出现在 Program（程序，即全局环境）或函数体内。

换句话说，函数声明不能出现在块（如 if、while 或 for 语句）中。

问题描述

Firefox 的 TraceMonkey 引擎对函数声明的处理与 ECMAScript 规范的要求不符，TraceMonkey 将块中的函数声明作为“函数语句”来处理。而其他浏览器的引擎仍将这类块中的函数声明当作该块之外的函数声明来解析。

造成的影响

对块语句中的函数声明的处理差异，将导致某些功能不能按照预期实现，甚至代码出错。

受影响的浏览器

Firefox

问题分析

TraceMonkey 将块中的函数声明作为“函数语句”来处理。而其他浏览器的引擎仍将这类块中的函数声明当作该块之外的函数声明来解析。

分析以下代码：

function foo(){
  if(window===parent){
    function bar(){alert(1);}
  }
  else{
    function bar(){alert(2);}
  }
  bar();
}
foo();

以上代码中，两个标识符相同的函数声明被放在了 if...else... 块中。这不符合规范的约定，但各引擎的处理办法并不相同。

TraceMonkey 将这种位于块内的函数声明解析为“函数语句”，因此仅能被执行到的那个“函数语句”会生效，而其他浏览器则将二者仍看作当前作用域的函数声明，即不论 if...else... 的哪个分支最终会被执行，后者始终会覆盖前者，作为函数体 foo 内的、标识符为 foo 的函数存在。

注：Firefox 中在 if...else... 中使用函数声明的解析方式，在 MDC 中也有描述，参见：Conditionally defining a function 。

假设以上代码的判断条件 window===parent 为 true，各浏览器下的输出结果，如下表所示：

Firefox	其他浏览器
1	2

ECMAScript 规范第 5 版 12 章中的 Note 部分提到，虽然有些实现可以将函数声明作为语句处理，但这是不提倡的。

注：本文部分内容参考了文章：命名函数表达式探秘中的内容。

解决方案

将条件语句中的函数声明替换为函数表达式，如：

function foo(){
  if(window===parent){
    var bar=function(){alert(1);}
  }
  else{
    var bar=function(){alert(2);}
  }
  bar();
}
foo();

参见

知识库

测试环境

操作系统版本:	Windows 7 Ultimate build 7600
浏览器版本:	IE6 IE7 IE8 Firefox 3.6 Chrome 4.0.302.3 dev Safari 4.0.4 Opera 10.51
测试页面:	...
本文更新时间:	2010-07-09

关键字

函数声明函数表达式语句块同名函数 Conditionally defining a function

转载

http://w3help.org/zh-cn/causes/SJ9002