【JavaScript】this - 自オブジェクトを記憶する擬似変数

JavaScriptの擬似変数thisをご紹介します。

this

擬似変数thisはオブジェクトのメソッドで使用でき、オブジェクト自身を取得できる変数です。
メソッドを所有するオブジェクトを取得し、他のプロパティやメソッドにアクセスできます。

基本構文

擬似変数thisは変数です。
メソッドでthisを記述することで使用できます。

Sample

this

サンプル

Sample

let obj = {
    data1: "a",
    data2: "b",
    data3: "c",
    info: function() {
        console.log(this);
    }
};

obj.info();

Console

{data1: 'a', data2: 'b', data3: 'c', info: ƒ}

infoメソッドでthisを出力しました。
コンソール結果から変数objが取得できたことが分かります。

this（プロパティ）

擬似変数thisを使い、他のプロパティにアクセスできます。

取得

基本構文

Sample

this.プロパティ名

サンプル

Sample

let person = {
    name: "tanaka",
    age: 20,
    height: 170,
    introduction: function() {
        console.log("My name is " + this.name + ".");
        console.log(this.age + " years old and " + this.height + "cm tall.");
    },
};

person.introduction();

Console

My name is tanaka.
20 years old and 170cm tall.

コンソール結果からintroductionメソッドのthis.name、this.age、this.heightでオブジェクト自身の他のプロパティにアクセスできたことが分かります。

記憶

基本構文

Sample

this.プロパティ名 = プロパティ値

サンプル

Sample

let person = {
    name: "tanaka",
    age: 20,
    height: 170,
    introduction: function() {
        console.log("My name is " + this.name + ".");
        console.log(this.age + " years old and " + this.height + "cm tall.");
    },
    growup: function() {
        this.age +=1;
    },
};

person.introduction();
person.growup();
person.introduction();

Console

My name is tanaka.
20 years old and 170cm tall.
My name is tanaka.
21 years old and 170cm tall.

growupメソッドはオブジェクト自身のageプロパティの値を１増加します。
実行前と実行後のintroductionメソッドのthis.ageの値が変わっていることが分かります。

this（メソッド）

擬似変数thisを使い、他のメソッドにアクセスできます。

呼び出し

基本構文

Sample

this.メソッド名(引数値)

サンプル

Sample

let person = {
    name: "tanaka",
    age: 20,
    height: 170,
    introduction: function() {
        this.greeting();
        console.log("My name is " + this.name + ".");
        console.log(this.age + " years old and " + this.height + "cm tall.");
    },
    greeting: function() {
        console.log("Hey!");
    },
};

person.introduction();

Console

Hey!
My name is tanaka.
20 years old and 170cm tall.

コンソール結果からintroductionメソッドのthis.greeting()でオブジェクト自身のgreetingメソッドを呼び出したことが分かります。

記憶

基本構文

Sample

this.メソッド名 = function() {
    // 処理........
}

サンプル

Sample

let person = {
    name: "tanaka",
    age: 20,
    height: 170,
    introduction: function() {
        this.greeting();
        console.log("My name is " + this.name + ".");
        console.log(this.age + " years old and " + this.height + "cm tall.");
    },
    greeting: function() {
        console.log("Hey!");
    },
    updateGreeting: function( grt ) {
        this.greeting = grt;
    },
};

person.introduction();
person.updateGreeting(function(){ console.log("Good Morning.") });
person.introduction();

Console

Hey!
My name is tanaka.
20 years old and 170cm tall.
Good Morning.
My name is tanaka.
20 years old and 170cm tall.

updateGreetingメソッドはオブジェクト自身のgreetingメソッドを更新します。
実行前と実行後のintroductionメソッドのthis.greetingの出力が変わったことが分かります。

注意点

無名関数とアロー関数は擬似変数thisが記憶するオブジェクトが異なります。

Sample

let obj = {
    testA: function() {
        console.log(this);
    },

    testB: () => {
        console.log(this);
    }
}

obj.testA();
obj.testB();

Console

{testA: ƒ, testB: ƒ}
Window {window: Window, self: Window, document: document, name: '', location: Location, …}

同じオブジェクトに無名関数testAとアロー関数testBを定義しました。各処理は擬似変数 thisの出力ですが、コンソール結果から値が異なることが分かります。

無名関数はオブジェクト自身ですが、アロー関数はWindowオブジェクトになります。
WindowオブジェクトはブラウザでJavaScriptを実行する場合、全てのオブジェクトの親となるオブジェクトです。

このような違いがあることに注意してください。