javascript - 关于 js onload事件一次只能保存对一个函数的引用

Question

在学习过程中，看到书上的例子中 onload 事件一次只能保存对一个函数的引用，它会自动用后面的函数覆盖前面的函数。
在编写列子的过程中，如果写法为：

    <script>
            function one(){
                alert("one");

            }
            function two(){
                alert("two");
            }
            window.onload = one;
            window.onload = two;
    </script>

显示的结果确实为只弹出了two，而one被覆盖
而如果改写为

            window.onload = one();
            window.onload = two();

则显示两个函数都可以弹出，依次为one,two
书中所说的引用是否就是one，与one（）这两种写法的区别，应该如何理解呢？

Answer 1

// tips：
// （1）赋值表达式的结合性：从右到左。
// （2）JavaScript的函数如果加上一堆小括号，亦即（），就表示立即执行该函数。

// 其实，下面是两个赋值表达式，每个表达式都是将一个函数执行的结果赋值给window.onload。
// 你看到了，函数one和函数two被执行了，是因为你在赋值时，执行了函数one和函数two，然后将将函数的返
// 回值赋值给window.onload。

// your code
window.onload = one();
window.onload = two();

Answer 2

window.onload = one();
window.onload = two();

因为这样写，加载到这一句就直接执行了，并不会等到onload完成。

Answer 3

onload 事件一次只能保存对一个函数的引用，而引用的目的是要调用，调用之后，这个函数就会被释放，成为垃圾被回收，而 window.onload = one();window.onload = two();这样是onload两次事件，引用跟调用写在一起，分别执行。

Answer 4

function one(){console.log(1)}
window.onload === null  //true

window.onload = one;

typeof window.onload === "function" //true

window.onload = one();  //1

window.onload === null //true;

Answer 5

window.onload 是通过赋值方式定义的事件，后一次赋值会覆盖前一次赋值。

window本质上还是一个 Object，和下边的代码没有区别：

var _windows = {a:1,b:2};
_windows.b = 3;
_windows; // Object {a: 1, b: 3}

如果需要定义多个 window.onload，而又想使用原生代码实现，有下面的代码就可以了。

function _onload(fun){
    var _fun = window.onload;
    if( typeof _fun == "function"){
        window.onload = function(){
            _fun();
            fun();
        };
    }else{
        window.onload = fun;
    }
}
function one(){
    alert("one");
}
function two(){
    alert("two");
}
_onload(one);
_onload(two);