関数名に「onload」を使うと・・・

JavaScript

常識かもしれないけど、初めて知ったのでメモ。
http://q.hatena.ne.jp/1179461074 で回答した際、グローバル宣言の関数ならwindow["関数名"]でアクセスできることを利用しました。

function test(str){
  alert(str);
}
window["test"]("!!!");

ここで疑問が。「test」という名前を、「onload」にしたらどうなるのだろう・・・。

function onload(str){
  alert(str);
}
window["onload"]("!!!");

通常、windowオブジェクトのonloadプロパティは、ページ読み込み直後に実行される関数を設定する場所です。

結果は・・・。

動作的に素直なのはFirefoxのほうでしょうか。単に、イベント発生時にwindow.onloadに設定されている関数を実行するということです。

これに対し、IE、Operaは、onloadという名前で関数が作成された場合、イベント発生時にwindow.onloadに設定されている関数を実行しない、という動作をします。

function onload(str){
  alert(str);
}
window["onload"]("!!!");
window.onload=function(){alert("onload!");};

上記コードは、IE、Operaで「onload!」が表示されません。(Firefoxでは「!!!」、「onload!」の両方表示されます。)

つまり、グローバル宣言する変数名、関数名に、windowオブジェクトのメンバ名を使うべきでないということです。考えてみれば当たり前ですが。しかし、あんまり聞かない話のような。予約語でもないのでエラーにならないですし・・・。

ともかく、気をつけましょう＾＾；

【参考】windowオブジェクトのメンバを表示する
※IE、Firefoxで確認。Operaは動作せず。(windowオブジェクトのメンバが列挙可能でない)
※以下では表示されないメンバもあります(IEのalert等)。参考程度に。
<html>
<head>
</head>
<body>
<div id="test"></div>
</body>
</html>
<script>
(function (){
  var str = "<table border>";
  for(var i in window){
    str += "<tr><th>" + i + "</th><td>" + window[i] + "</td></tr>";
  }
  str += "</table>";
  document.getElementById("test").innerHTML=str;
})();
</script>