【JavaScript】 window.location と location って何か違うの？

Tweet

Category JavaScript 2012/09/16

問題

window.location と location って何か違うの？

どっちでも使えるみたいなんだけど。

<input type="button" value="Go!" onclick="location.href='foo.html'">

<input type="button" value="Go!" onclick="window.location.href='foo.html'">

答え

JavaScriptにもグローバル変数みたいなのがある。

JavaScriptには、実行環境の唯一のグローバルオブジェクトというのがあって、ブラウザのJavaScriptでは window オブジェクト。

phpで言うグローバル変数みたいなのは、グローバルオブジェクトの直属のプロパティに相当して、以下のように書ける。
（phpで書くと $GLOBALS[‘hoge’] みたいなの）

window.hoge

window.hoge と書かなかったらどうなるかというと

var hoge = 1;
function foo() {
    var hoge = 2;
    alert(hoge);
}
foo(); // 実行

ってしたら、「2」とalertに出て、

var hoge = 1;
function foo() {
    var hoge = 2;
    alert(window.hoge);
}
foo(); // 実行

ってしたら、「1」とalertに出る。

ついでに

var hoge = 1;
function foo() {
    var hoge = 2;
    function bar() {
        alert(hoge);
    }
    bar();
}
foo(); // 実行

ってしたら、「2」ってalertに出る。

親のスコープ、親のスコープに変数を探しに行くのを
スコープチェインという。

phpにはない仕組み。

これとクロージャを知っておくと、JavaScript がわかっていろいろ楽しい。

で、

function foo() {
    location.href = 'https://www.softel.co.jp/';
}

とか

function foo() {
    window.location.href = 'https://www.softel.co.jp/';
}

はどっちでもよくて、

function foo() {
    var location;
    location.href = 'https://www.softel.co.jp/';
}

↑ これは思ったように動かなくて（画面遷移しない）

function foo() {
    var location;
    window.location.href = 'https://www.softel.co.jp/';
}

↑ これはたぶん思ったように動く（画面遷移する）