thisとは
呼び出し元のオブジェクトへの参照を保持するキーワードのこと
thisの参照先は、実行コンテキストによって変わります。
実行コンテキストには「グローバルコンテキスト」や「関数コンテキスト」があり、今回は関数コンテキストにおけるthisについて見ていきます。
関数コンテキストにおけるthisの場合は、呼ばれた関数ごとに参照先が変化します。
consoleで「hello Taro」と表示する場合
const person = {
name: 'Taro',
hello: function () {
console.log('Hello ' + this.name);
},
};
この場合、this.nameのthisは自身のオブジェクトのpersonを参照します。
helloメソッドを呼び出してみる
const person = {
name: 'Taro',
hello: function () {
console.log('Hello ' + this.name);
},
};
person.hello();
person.hello()とすることで、personオブジェクトのhelloメソッドを呼び出すことができます。
実行結果
Hello Taro
hello Taroと出力されました。
personというオブジェクトのメソッドとしてhelloが呼ばれた場合、helloメソッドの中で呼び出されるthisは呼び出し元のオブジェクトであるpersonを参照します。
thisをpersonに変えて呼び出してみる
const person = {
name: 'Taro',
hello: function () {
console.log('Hello ' + person.name); // thisをpersonに変更
},
};
person.hello();
実行結果
Hello Taro
同じように、hello Taroと出力されました。
これは、変数personがhelloメソッドのレキシカルスコープになるためです。
ただ、メソッドの中でそのオブジェクトを取得したい場合は基本的にthisを使います。
まとめ
personというオブジェクトのメソッドとしてhelloが呼ばれた時には、helloメソッドの中で呼び出されるthisは呼び出し元のオブジェクトであるpersonを参照します。
また、personというオブジェクトの中のhelloメソッドは、メモリ空間のどこかに登録されているfunctionのことを指しています。また、同じようにnameプロパティは、メモリ空間のどこかに登録されているTomという値への参照を保持しています。
この状態でpersonのhelloが呼ばれた場合、JavaScriptはpersonというオブジェクトを探しにいきます。そして、そのオブジェクトの中のhelloというメソッドを実行することで、Hello Tomとコンソールに表示されます。
参考資料