在javascript中解释奇怪的行为

Ash*_*ame 3 javascript

我在推特上看到了这个,我也无法解释.onload以下两种方式定义函数有效:

1)JSFiddle

<html>
    <head>
        <script>
            onload = function(){
                alert('this works');
            };
        </script>
</head>
<body>
</body>
</html>?
Run Code Online (Sandbox Code Playgroud)

2)JSFiddle

<html>
    <head>
        <script>
            window.onload = function(){
                alert('this works');
            };
        </script>
</head>
<body>
</body>
</html>?
Run Code Online (Sandbox Code Playgroud)

但是,如果定义如下,即使分配给它也不起作用 window.onload

3)JSFiddle

<html>
    <head>
        <script>
            function onload(){
                alert('this doesnt work');
            };
            alert(window.onload); // this shows the definition of above function
        </script>
</head>
<body>
</body>
</html>?
Run Code Online (Sandbox Code Playgroud)

这里发生了什么?

bfa*_*tto 9

前两个示例为window.onload属性分配一个函数(window.在第一个示例中隐含).该onload属性实际上属于原型window(通称为Window).

第三个变体声明了一个具有相同名称的新本地函数,该函数将从原型中隐藏属性.这意味着,当您要求时window.onload,引擎首先找到本地版本,并放弃查找原型链.因此alert(window.onload);会提醒您的功能来源.但是,要使事件处理程序起作用,必须将其分配给原型对象的onload属性.

然而,有一些奇怪的事情发生:当你尝试分配一个继承自的属性时prototype,它应该不起作用,并且应该在对象上创建一个"自己的"属性,从原型中隐藏一个属性(例如http ://jsfiddle.net/ssBt9/).但window行为不同(http://jsfiddle.net/asHP7/),行为甚至可能因浏览器而异.