JavaScript - this

this

関数本体では this という値を設定できない参照のみ可能な特別な値を利用することができます。this は通常、オブジェクト指向プログラミングに関連して使われます。ただし、JavaScript においては多くの言語とは異なる用途にも this を用います。this は「オブジェクト」と「オブジェクトのプロパティである関数」を束縛します (「結びつける」・「bind する」とも言います)。メソッドが呼び出されるとき this は、そのメソッドがプロパティとなっているオブジェクトを指しています。下の例で o.speak() を呼び出すときに thiso に束縛されています。

const o = {
    name: 'Wallace',
    speak() { return `My name is ${this.name}!`; },
}

console.log(o);         // { name: 'Wallace', speak: [Function: speak] }
console.log(o.speak()); // My name is Wallace!
this の使用例

this が「関数の呼び出され方」に依存して束縛される点に注意してください。「関数の宣言された場所」には依存しません。thiso に束縛されたのは speako のプロパティだからではなく o.speak の形で直接呼び出されたからです。同じ関数を変数に代入した場合と比較してみます。

const o = {
    name: 'Wallace',
    speak() { return `My name is ${this.name}!`; },
}

const speak = o.speak;

console.log(speak === o.speak); // true
console.log(speak());           // "My name is undefined!"
console.log(o.speak());         // "My name is Wallace!"
this の使用例

定数 speak はオブジェクト o のメソッド speak を指してはいますが speak()だけでは、この関数が o のプロパティとして宣言されたものであることはわかりません。このため thisundefined に束縛されます。

this の使い方で難しいケースはネストされた関数から this にアクセスする場合です。

const o = {
    name: 'Julie',
    
    greetBackwards: function() {
    
        function getReverseName() {
            let nameBackwards = '';
            for(let i=this.name.length-1; i>=0; i--) {
                nameBackwards += this.name[i];
            }
            return nameBackwards;
        }
        
        return `${getReverseName()} si eman ym ,olleH`;
    
    },
};

console.log(o.greetBackwards());
this の使用例

関数 getReverseName は名前の文字を逆順に並べる関数ですが、期待通りには動きません。o.greetBackwards() を呼び出すときには JavaScript の処理系は thiso に束縛します。しかし getReverseNamegreetBackwards の内側から呼ぶときには this はグローバルオブジェクトに束縛されるか undefined になります。この問題が起こらないようにするには this を別の変数に代入して覚えておけば回避できます。

const o = {
    name: 'Julie',
    
    greetBackwards: function() {
    
        // this を別の変数に代入しておく
        const self = this;
        
        function getReverseName() {
            let nameBackwards = '';
            for(let i=self.name.length-1; i>=0; i--) {
                nameBackwards += self.name[i];
            }
            return nameBackwards;
        }
        
        return `${getReverseName()} si eman ym ,olleH`;
    },
};
console.log(o.greetBackwards());
this の使用例

関連記事

JavaScript のまとめページはプログラミング JavaScript 入門を参照してください。

Category:
プログラミング
公開日:
更新日:
Pageviews:
26
Shares:
2
Tag:
JavaScript