背景

今受けている大学の授業でJavaScriptを扱っている。

その授業で window.openという関数を用いて新しいウィンドウを開いたり閉じたりする関数を作るという課題が出ているのだが、この課題に取り組んでいる友人がプログラムが動かないと言っていたので、コードを見たところ下のようなコードを書いていた。

<script>
function open(a) {
    window.open(a);
}
<script>
<body>
    <input type="button" onclick="open('~~~~')">
</body>

このコードが動かない理由について下で書いていく。

何故動かないのか

JavaScriptは関数の外に作成した変数や関数、例えばscriptタグの中に直接書き込んだ変数や関数はグローバル変数やグローバル関数となる。

下のコードは変数messageと関数helloをグローバルな変数や関数として宣言した例だが、window.messageやwindow.hello()とやってもmessage変数の参照やhello関数の実行が出来る。

<script>
var message = "Hello, world!";

function hello() {
    alert("hello");
}

alert(window.message); // "Hello, world!"とアラートが出る
window.hello(); // hello関数が実行され、helloとアラートが出る
<script>

何故これで実行出来るのかというと、実はJavaScriptではグローバル変数やグローバル関数を作るということは、グローバルオブジェクトのプロパティとして定義するということを意味する。グローバルオブジェクトとはその実行環境の一番トップにあるオブジェクトのことだが、ここではwindowオブジェクトのことだと思えばいい。

なので関数の外でvar message;やfunction hello() {}はwindowオブジェクトのプロパティやメソッドを宣言していることと同じなのだ。その為、window.messageやwindow.hello()で変数の参照や関数の実行が出来る。

このことを考えると先程のコードが動かない理由が説明できて

<script>
// window.openの再定義
function open(a) {
    // 再定義された window.openを呼び出す
    window.open(a);
}
<script>
<body>
    // クリックしたが最後無限ループ地獄へ
    <input type="button" onclick="open('~~~~')">
    // エラーが出る
</body>

function open(a) ~の記述で、既に存在しているwindow.open関数を再定義する形になる。その再定義したopen関数でwindow.openを呼んでいるのでいつまでも再帰呼び出しがされ、無限ループが発生する。

ちなみにChromeではUncaught RangeError: Maximum call stack size exceeded(…)というエラーが発生する。これはスタックオーバーフローのエラーで、JavaScriptで再帰処理を行ったときにを行いすぎたときに見かけるエラーである。 FirefoxはInternalError: too much recursionとエラーが出た(まんまだな……)。