为什么JavaScript函数可见性取决于HTML中相同或不同脚本块中的声明

Question

如果我在HTML标记中实现以下JavaScript代码块:

    <script type="text/javascript">
        function MyFunc() {
            alert(1);
        }
        var f1 = MyFunc;
    </script>
    <script type="text/javascript">
        function MyFunc() {
            alert(2)
        }
    </script>
    <script type="text/javascript">
        f1();
    </script>

我收到一条警告信息'1'.但是,如果我使用以下代码:

<script type="text/javascript">
            function MyFunc() {
                alert(1);
            }
            var f1 = MyFunc;
            function MyFunc() {
                alert(2)
            }
        </script>
        <script type="text/javascript">

        </script>
        <script type="text/javascript">
            f1();
        </script>

我得到'2'.为什么？测试了IE10,最新的FF,Chrome.

Answer 1

每个脚本元素都按顺序进行解析和执行.在第一种情况下,在处理第二个声明之前进行f1的赋值.

在第二种情况下,在进行赋值之前解析两个声明(因为声明是在执行任何代码之前处理的),因此第二个声明将在赋值给f1之前替换第一个声明.

Answer 2

这是由吊装造成的.var和function声明被提升到它们所在的脚本块的顶部.

这意味着您的第一个脚本基本上变为:

var f1;
function MyFunc() {
    alert(1);
}
f1 = MyFunc;

// new script block

function MyFunc() {
    alert(2)
}

// new script block

f1(); // alert 1

同时,你的第二个脚本变为:

var f1;
function MyFunc() {
    alert(1);
}
function MyFunc() { // overwrite previous MyFunc
    alert(2)
}
f1 = MyFunc;

// new script block

f1(); // alert 2

我希望这是有道理的 - 通常只是避免覆盖函数XD