JavaScriptでローカル変数と同じ名前のグローバル変数を呼び出す方法

JavaScriptの関数内でグローバル変数と同じ名前のローカル変数を宣言した時、その変数名を呼ぶとローカル変数のほうが呼ばれることになります。なので、ローカル変数と同じ名前のグローバル変数を関数内から呼べなくなると思うかもしれませんが、そもそもグローバル変数はwindowオブジェクトのプロパティとなっているので、実はwindowオブジェクトからメンバー演算子を利用することにより、ローカル変数と同じ名前のグローバル変数にアクセスすることができます。

var hoge = "fuga"; //グローバル変数
function TestFunc(){
    var hoge = "piyo"; //ローカル変数
    console.log(hoge);
    console.log(window.hoge);
    console.log(this.hoge);
}
TestFunc();
// console.log(hoge); //=>"piyo"
// console.log(window.hoge); //=>"fuga"
// console.log(this.hoge); //=>"fuga"

最後のthis.hogeは、ここではwindow.hogeと同じになります。

ちなみに、『TestFunc()』ではなく、『new TestFunc()』とすると下記のようになります。

var hoge = "fuga"; //グローバル変数
function TestFunc(){
    var hoge = "piyo"; //ローカル変数
    console.log(hoge);
    console.log(window.hoge);
    console.log(this.hoge);
}
new TestFunc();
// console.log(hoge); //=>"piyo"
// console.log(window.hoge); //=>"fuga"
// console.log(this.hoge); //=>undefined

この場合のthisは『TestFunc』を継承して作られたオブジェクトになります。this.hogeとするとローカル変数のhogeを呼んでいるような気もしなくはないかもしれませんが、this.hogeとローカル変数のhogeは別物です。この場合、this.hogeは作成すらされていないので、『undefined』となります。たまに勘違いしちゃうので気をつけましょう(そんな勘違い、自分ぐらいかもしれませんが・・・)。