コンサルティング事業 2019.07.30

JavaScriptの「this」とは?何が格納(参照)されるのかちゃんと理解する!

エンジニアの三宅です。
普段はバックエンドやインフラを中心にプログラムの作成やシステムの構築を行っています。
ただ、フロントエンドもできるともっと仕事が円滑に進んだり、提案にもつなげられたりするので
自主的にHTMLやCSS、JavaScriptを勉強しています。
勉強を進めていて、気になる内容があったので深堀していきたいと思います。

JavaScriptの「this」とは?

JavaScriptを書いていると時々下記のような記述に出会います。

function Person (name, age) {
this.name = name;
this.age = age;
}

ある程度プログラムの実装経験があるエンジニアなら、 なんとなく「人」というオブジェクトに「名前」と「年齢」を設定してるんだなーとわかるかと思うのですが、 ではこのthisって本当はどういった動きをするのでしょうか… っていうか、this…「この」(直訳)って何?! と思い、しっかり調べてみました。

thisはどこでどのように呼び出されるかによって意味が異なる

関数の this キーワード は、JavaScript ではほかの言語と少々異なる動作をします。また、strict モード と非 strict モードでも違いがあります。

引用:this – JavaScript | MDN

呼び出し方によって、様々な動きをするのが「this」です。
他の言語ではそういう動きをするものってなかなか無いですよね。
ちゃんと理解しておかないと痛い目を見そうです…

thisを調べると思った以上に、多くのパターンが有りました…
今回は6つのパターンを紹介します。
● グローバルコンテキスト
1.グローバル実行コンテキスト
● 関数コンテキスト
2.非strictモード
3.strictモード
4.オブジェクトのメソッド
5.コンストラクタ内
6.コールバック関数

それぞれ、例(参考プログラム)を載せて確認していきます。

グローバルコンテキスト

グローバルコンテキストとは、関数の外側を指します。
関数の外側でthisを呼び出したときという意味になります。

1.グローバル実行コンテキスト

関数の外側でthisを呼び出した場合、thisはグローバルオブジェクト「window」を示します。

console.log(this === window); // true

windowオブジェクトは、JavaScriptが動作しているWebブラウザのウィンドウのことを指しており、

ウィンドウに関する情報を取得したり、ウィンドウの設定を変更することができます。

つまり、下記のコードは同義ということになります。

window.open('https://www.agex.co.jp/');
this.open('https://www.agex.co.jp/');

関数コンテキスト

関数コンテキストとは、関数の内側のことを指します。
グローバルな場所ではなく、関数内でthisを呼び出したときという意味になります。
関数内では呼び出し方によって、thisに格納される値が異なります。

2.非strictモードでの呼び出し

非strictモードの場合は、関数内のthisはグローバルオブジェクトを参照します。

つまり、Webブラウザで実行されているなら、windowオブジェクトを見に行くことになります。

function whatIsThis() {
console.log(this === window); // true
}
whatIsThis();

3.strictモード

strictモード(厳格モード)の場合、実行コンテキスト内でthisが指定されていなければ、undefinedとなります。

function whatIsThis() {
'use strict'
console.log(this === window); // false => undefinedならtrue
}
whatIsThis();

4.オブジェクトのメソッド

オブジェクトのメソッド内でthisを呼び出すと、thisは自身のオブジェクトを参照します。

var person = {
name:"agex",
age:"20",
howOld: function(){
return this.age + "歳です。"; // 自身のオブジェクトのageプロパティを参照する
}
}
console.log(person.howOld()); // 20歳です。

5.コンストラクタ内

コンストラクタ内のthisは、new演算子で作成された新規オブジェクトを参照します。
また、コンストラクタ内には、this.○○でプロパティ名を定義することができます。

function Person(name, age){
this.name = name;
this.age = age;
}
var member1 = new Person('SHINSOTSU1', 21); // thisはmenber1オブジェクトを指します

6.コールバック関数

コールバック関数として指定された関数内でthisを呼び出した場合、thisはコールバック関数を参照します。

例えば、コールバック関数がグローバルな場所(関数の外側)で実行されているなら、

thisはwindowオブジェクトを返却します。

var person = {
name:"agex",
age:"20",
howOld: function(){
return this.age + "歳です。";
}
alert(person.howOld); // windowオブジェクトから関数、ageプロパティが呼び出されるが、window.ageは存在しないためエラー
}

まとめ

JavaScriptのthisについて調査し、呼び出される実行コンテキストによって様々なオブジェクトを指すことがわかりました。
thisについては、HTMLプロフェッショナル レベル2の試験範囲にもなっています。

以下の書籍を参考しました。

HTML教科書 HTML5プロフェッショナル認定試験 レベル2 スピードマスター問題集 Ver2.0対応
著者 - 株式会社富士通ラーニングメディア
抜山雄一
七條怜子
結城陽平
出版社- 翔泳社
発行年- 2018/12/12

この記事をシェアする
事業について詳しく知る

コンサルティング事業について詳しく知りたい方はこちら

RECOMMEND

おすすめ記事