SOFTELメモ Developer's blog

会社概要 ブログ 調査依頼 採用情報 ...
技術者募集中

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

問題

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/';
}

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

関連するメモ

コメント