Question

<div id="myElement2"></div>

<script>
window.onload = function() {
    document.getElementById("myElement1").onclick = function() {
        for (i = 0; i < 2; i++) {
            document.getElementById("myElement2").onmouseover = func;
            function func() {alert("hello"); } } } }
</script>

在chrome和IE中，当单击myElement1时，func完全附加到myElement2。但是，在firefox中单击myElement1时，我收到一条错误消息，指出未定义func。

我应该注意，如果使用匿名函数而不是func，那么它适用于所有3个浏览器。

我的问题是firefox如何在这方面处理范围与IE和Chrome不同？

威尔

Answer 1

我认为问题是func正在块内定义。尝试通过JSLint运行代码，您会发现以下问题：

函数语句不能放在块中。使用函数表达式或将语句移动到外部函数的顶部。
'func'在定义之前使用过。

尝试分配函数表达式而不是定义函数并按名称分配，可能是这样的：

document.getElementById("myElement2").onmouseover = function() {
    alert("hello")
};

Answer 2

至于“firefox如何在这方面处理范围与IE和Chrome不同？” - 见http://kangax.github.com/nfe/#function-statements

Answer 3

我建议在赋值前移动声明，并使用变量来保存函数，而不是全局声明它：

<script>
window.onload = function() {
    document.getElementById("myElement1").onclick = function() {
        for (i = 0; i < 2; i++) {
            var func = function() { alert("hello"); }
            document.getElementById("myElement2").onmouseover = func;
        }
    } 
}
</script>

Answer 4

由于函数定义在函数内，因此存在范围问题。我通常将函数封装在一个对象中。你可能也不需要循环。

看看：

<div id="myElement1"></div>
<div id="myElement2"></div>
<script type="text/javascript">

    window.onload = function() {
        document.getElementById("myElement1").onclick = function() {
                document.getElementById("myElement2").onmouseover = myFunctions.func;
         }
     }
    /* Function definitions */ 
    var myFunctions = new Object();
    myFunctions.func = function () {
       alert("hello"); 
    }
</script>

firefox中javascript范围的问题

4 个答案: