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

JavaScript
スポンサーリンク

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

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

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

スポンサーリンク

thisキーワードの表すもの

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

トップレベル(関数の外)

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

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

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

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

関数

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

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

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

オブジェクト

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

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

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

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

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

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

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

メソッド

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

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

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

calculateAgeメソッドの中のthisキーワードで表すオブジェクトがhagarenからhagaren2に変わって、計算もhagaren2の数値で計算されています。関数内関数でのthisはwindowオブジェクトを示しています。

スポンサーリンク

まとめ

JavaScriptの「thisキーワード」について基本的な参照を扱いました。

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

ここでは、関数の外、関数の中、オブジェクト、メソッドという位置でのthisキーワードの参照先を簡単にみてきました。

JavaScript
スポンサーリンク
CodeGraffitiをフォローする

コードグラフィティ:とにかく進め!独学プログラミング – Python入門から始めてどこまで学べる?
タイトルとURLをコピーしました