3

ツイッターで見たのですが、説明もできませんでした。次の2つの方法で関数を定義するとonload機能します。

1）JSFiddle

<html>
    <head>
        <script>
            onload = function(){
                alert('this works');
            };
        </script>
</head>
<body>
</body>
</html>​

2）JSFiddle

<html>
    <head>
        <script>
            window.onload = function(){
                alert('this works');
            };
        </script>
</head>
<body>
</body>
</html>​

ただし、次のように定義すると、に割り当てられていても機能しません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>​

何が起きてる？

4

3 に答える 3

9

window.onload最初の2つの例では、プロパティに関数を割り当てています（window.最初の例では暗黙的です）。このプロパティは、実際には（便利な方法で）のプロトタイプonloadに属しています。windowWindow

3番目のバリアントは、同じ名前の新しいローカル関数を宣言し、その関数はプロトタイプからプロパティをシャドウイングします。つまり、を要求するwindow.onloadと、エンジンは最初にローカルバージョンを見つけ、プロトタイプチェーンの検索をあきらめます。したがってalert(window.onload);、関数ソースにアラートを送信します。ただし、イベントハンドラーが機能するには、プロトタイプオブジェクトのonloadプロパティに割り当てる必要があります。

ただし、奇妙なことが起こっています。から継承されたプロパティに割り当てようとすると、prototype機能しないはずです。また、オブジェクトに「独自の」プロパティを作成して、プロトタイプのプロパティをシャドウイングする必要があります（例：http ：//jsfiddle.net/ssBt9/）。ただし、window動作は異なり（http://jsfiddle.net/asHP7/）、ブラウザによっても動作が異なる場合があります。

于 2012-12-10T18:31:58.930 に答える
3

これは、スクリプトが実行される前に、onloadすでに宣言されているためです。null

これはそのコードに似ています：

var v=null;
function v(){
    console.log('hi');
}​​​​
console.log(v); // alerts null

これとは異なります：

function v(){
    console.log('hi');
}​​​​
console.log(v); // alerts the function

このような関数を宣言すると、宣言と割り当てはスコープの「開始」に論理的に引き上げられるため、関数に値が指定された後は、割り当ては実際には発生しません。onloadnull

だからとは違う

window.onload=...

これは宣言ではなく、持ち上げることができない割り当てにすぎません。

于 2012-12-10T18:44:36.357 に答える
0

最初の2つのケースでは、onloadと呼ばれるウィンドウのメンバーを定義しています。3番目のケースでは、関数を定義しているだけで、現在のウィンドウのメンバーではありません。

于 2012-12-10T18:33:29.237 に答える