【JavaScript入門】thisキーワードと参照先

JavaScript

2019.04.152020.03.26

ここまでJavaScriptの入門的な知識を学んできましたが、ところどころに「this」というキーワードですでに処理をすることがありました。

これまでは「そのオブジェクト自身を示す」というような説明でthisを簡単に使ってきています。

thisキーワードは、スクリプトのどこからでも参照できる変数で、呼び出す場所、呼び出す文脈によって中身が変わります。

thisキーワードの表すもの
まとめ

thisキーワードの表すもの

では、JavaScriptのthisキーワードが表すものについて具体的なコードを使って参照先をみていきましょう。

トップレベル（関数の外）

まずはthisキーワードのみをconsole.log()で出力してみましょう。

console.log(this);

thisを予め宣言もしてませんし、値を代入もしていません。

実行するとこうなります。

この場合は、Webブラウザのウィンドウまたはフレームを示すWindowオブジェクトを示しています。関数を定義していないので関数の外でもあり、グローバルオブジェクトです。

関数

では次のコードはどうでしょう。

calculateAge(2000);

function calculateAge(year) {
    console.log(2019 - year);
    console.log(this);
}

関数を頭で呼び出しているので巻き上げのコードで書いていますが、関数の定義の中には、計算式の出力とthisの出力を書いています。

計算結果を出力し、関数内でのthisがWindowオブジェクトを示しているのがわかります。

オブジェクト

ここまでは関数の中でthisキーワードを使いましたが、今度はオブジェクトの中でthisキーワードを使ってみます。

次のようなコードを試してみます。

var hagaren = {
    name: 'エドワード',
    birthYear: 1988,
    calculateAge: function() {
        console.log(this);
        console.log(2019 - this.birthYear);

        function innerFunction() {
            console.log(this);
        }
        innerFunction();
    }
};

hagaren.calculateAge();

ハガレンのネタを使っていますが、あまりうまいコードで無いのはご了承ください。

さて、変数hagarenに連想配列でオブジェクトを生成しています。順に、文字列型、数値型、関数式を定義しています。関数式の中でthisキーワードを使っています。また関数式の中でさらに関数を定義してthisキーワードを使っています。

最後にこのオブジェクトから関数式を呼び出しているというコードになっています。

実行するとJavaScriptコンソールには次のように表示されます。

最初のthisキーワードはこのオブジェクトそのものを示しているのがわかります。2つ目のthisキーワードはthis.birthYearの形で使っているので、このオブジェクト内のbirthYearの値を使って計算されているのがわかります。3つ目のthisキーワードは関数内の関数の中で使われているのでwindowオブジェクトを示しているのがわかります。

メソッド

このコードを次のようにオブジェクトを追加してみます。

var hagaren = {
    name: 'エドワード',
    birthYear: 1988,
    calculateAge: function() {
        console.log(this);
        console.log(2019 - this.birthYear);

        function innerFunction() {
            console.log(this);
        }
        innerFunction();
    }
};

// hagaren.calculateAge();

var hagaren2 = {
    name: 'アルフォンス',
    birthYear: 2001
};

hagaren2.calculateAge = hagaren.calculateAge;
hagaren2.calculateAge();

先ほどのコードの下に、hagaren2というオブジェクトを追加しています。

そして、hagaren.calculateAgeをhagaren2.calculateAgeに代入して、hagaren2.calculateAge()で呼び出しています。