2021年12月25日 JavaScript (JS Primer) 関数とthis

関数宣言や関数式におけるthis

関数宣言・・・fuction yano () {}

関数式・・・ const yano = function() {}

関数宣言や関数式ではベースオブジェクトがないためthisはundefinedとなります。
関数の中に関数を定義して呼び出す場合も同じです。

strict modeではない状況でthisがundefinedの場合は、thisがグローバルオブジェクトを参照するように変換される
（[object Window]が返されます。）

注意点

strict modeではない状況でthisがundefinedの場合は、thisがグローバルオブジェクトを参照するように変換される問題があります。

strict modeは、このような意図しにくい動作を防止するために導入されています。しかしながら、strict modeのメソッド以外の関数におけるthisはundefinedとなるため使い道がありません。
そのため、メソッド以外でthisを使う必要はありません。

メソッドにおけるthis

メソッドでは所属しているオブジェクトがベースオブジェクトとなりthisの参照先となります。
（JavaScriptではオブジェクトのプロパティとして指定される関数のことをメソッドと呼びます。）

以下の例ではメソッドの中で同じオブジェクトに所属している別のメソッドにthisでアクセスしています。

const person = {
    fullName: "Brendan Eich",
    sayName: function() {
        // `person.fullName`と書いているのと同じ
        return this.fullName;
    }
};
// `person.fullName`を出力する
console.log(person.sayName()); // => "Brendan Eich"

thisはペースオブジェクトであるpersonを参照するのでここでのthis.fullName;と person.fullNameは同義です。

したがってthisの部分はベースオブジェクトであるpersonからも参照可能です。

オブジェクトは何重にもネストできますが、thisはベースオブジェクトを参照するというルールは同じです。

以下はオブジェクトのプロパティがネストした場合、ドット記法などでみた場合、一番左のobj1ではなく、メソッドから見てひとつ左のobj3となることを示しています。ネストしたプロパティにアクセスするには、ドット記法もしくはブラケット記法でチェーンして書く必要があるので、ここでobj3にアクセスするにはobj1.obj2.obj3となるわけです。

const obj1 = {
    obj2: {
        obj3: {
            method() {
                return this;
            }
        }
    }
};
// `obj1.obj2.obj3.method`メソッドの`this`は`obj3`を参照
console.log(obj1.obj2.obj3.method() === obj1.obj2.obj3); // => true