はじめに
JavaScriptのthisの使い方で苦戦をしたので、整理と備忘録のために8種類のthisの動きを試してみました。
主にこちらの2つの記事を参考に勉強した内容の記事となります。
1. トップレベル（関数外）のthis
結論
thisの参照先 = グローバルオブジェクト= windowオブジェクトとなる。
トップレベル（関数外）のthis
"use strict";
console.log(this) // window
this.alert('Hello World'); // window
consoleの表示
htmlの表示
※ non-strictモードの場合も結果は同じでした。
2.関数内のthis
結論
strictモード：thisの参照先 = undefined
non-strictモード：thisの参照先 = window
strictモード
関数内のthis(strictモード)
"use strict";
function consoleDisplay() {
console.log(this);
}
consoleDisplay(); // undefined
consoleの表示
non-strictモード
関数内のthis(non-strictモード)
function consoleDisplay() {
console.log(this);
}
consoleDisplay(); // window
consoleの表示
3.アロー関数内のthis
結論
thisの参照先 = 呼び出し元のオブジェクト
2パターン試します。
トップレベルで宣言したアロー関数
let testArrowFunction = () => {
console.log(this);
}
testArrowFunction(); // window (呼び出し元のオブジェクト)
consoleの表示
オブジェクト内のアロー関数
let test = {
testMethod() {
let consoleDisplay = () => {
console.log(this);
}
consoleDisplay();
}
}
test.testMethod(); // testMethod (呼び出し元のオブジェクト)
consoleの表示
4.オブジェクトの関数内のthis
結論
thisの参照先 = グローバルオブジェクト= windowオブジェクト
オブジェクトの関数内のthis
let test = {
testMethod() {
let consoleDisplay = function() {
console.log(this);
}
consoleDisplay();
}
}
test.testMethod(); // window
consoleの表示
5.call(), apply()で呼び出した際のthis
結論
thisの参照先 = call(), apply()の引数で指定した先
call(), apply()で呼び出した際のthis
const testMethod = function (a, b) {
console.log(this);
console.log(a + b);
}
const testObject = {
testMethod: testMethod
}
testMethod(); // window // NaN
testMethod.call(null, 1, 2); // window // 3
testMethod.apply(null, [3, 4]); // window // 7
testMethod.call(testMethod, 5, 6); // testMethod // 11
testMethod.apply(testMethod, [7, 8]); // testMethod // 15
testMethod.call(testObject, 9, 10); // testMethod // 19
testMethod.apply(testObject, [11, 12]); // testMethod // 23
6.bind()で呼び出した際のthis
結論
thisの参照先 = bind()の引数で指定した先
bind()で呼び出した際のthis
function test(){
console.log("thisの値：" + this);
}
const obj = test.bind("今日のご飯")
obj(); // thisの値：今日のご飯
consoleの表示
7.イベントハンドラー / イベントリスナー内のthis
結論
無名関数で呼び出したthisの参照先 = イベントの発生元
アロー関数で呼び出したthisの参照先 = 呼び出し元のオブジェクト
3パターン試します。
html側でボタンを設定
<button id="btn">表示</button>
無名関数で呼び出したthis
document.getElementById('btn').addEventListener('click', function() {
console.log(this) // <button id="btn">表示</button>
})
consoleの表示
アロー関数で呼び出したthis
document.getElementById('btn').addEventListener('click', () => {
console.log(this) // window
})
consoleの表示
オブジェクト内のアロー関数で呼び出したthis
const testObj = {
testMethod: function () {
document.getElementById('btn').addEventListener('click', () => {
console.log(this) // testMethod
})
}
}
testObj.testMethod();
consoleの表示
8.コンストラクターで呼び出した際のthis
結論
thisの参照先 = 生成されたインスタンス
2パターン試します。
const Food = function(name, price){
this.name = name;
this.price = price;
}
const curry = new Food("Curry", 850);
console.log(curry.name); // Curry
console.log(curry.price); // 850
consoleの表示
クラス内のコンストラクターで呼び出した際のthis
class Food {
constructor(name, price){
this.name = name;
this.price = price;
}
}
const curry = new Food("Curry", 850);
console.log(curry.name); // Curry
console.log(curry.price); // 850
consoleの表示
まとめ
大よそのthisについての理解が深まりました。
より詳しく知りたい方は以下のサイトをご覧ください。