JavaScript/this

this キーワード

基本概念

thisは、JavaScriptにおいて現在の実行コンテキストを参照する特殊なキーワードです。その値は、関数の呼び出し方法によって動的に変化します。

コンテキストによる this の変化

グローバルコンテキスト

グローバルスコープでは、thisはグローバルオブジェクトを参照します：

// ブラウザ環境
console.log(this === window); // true

// Node.js環境
console.log(this === global); // true

関数コンテキスト

通常関数では、thisの値は関数の呼び出し方に依存します：

// メソッド呼び出し
const obj = {
    name: 'John',
    greet() {
        console.log(this.name); // 'John'
    }
};

// 単純な関数呼び出し
function standalone() {
    console.log(this); // グローバルオブジェクト（strictモードではundefined）
}

バインディングの種類

暗黙的バインディング

オブジェクトのメソッドとして呼び出された場合：

const person = {
    name: 'Alice',
    sayHello() {
        console.log(`Hello, ${this.name}`);
    }
};

person.sayHello(); // 'Hello, Alice'

明示的バインディング

call()、apply()、bind()メソッドを使用：

function greet() {
    console.log(`Hello, ${this.name}`);
}

const user = { name: 'Bob' };

// call/applyでthisを明示的に設定
greet.call(user);     // 'Hello, Bob'
greet.apply(user);    // 'Hello, Bob'

// bindで永続的にthisをバインド
const boundGreet = greet.bind(user);
boundGreet();        // 'Hello, Bob'

コンストラクタバインディング

newキーワードを使用すると、thisは新しく作成されたインスタンスを参照します：

function Person(name) {
    this.name = name;
}

const john = new Person('John');
console.log(john.name); // 'John'

アロー関数の特殊な動作

アロー関数は、thisを静的に（レキシカルに）バインドします：

const obj = {
    name: 'Context Test',
    regularFunc: function() {
        setTimeout(function() {
            console.log(this.name); // undefined
        }, 100);
    },
    arrowFunc: function() {
        setTimeout(() => {
            console.log(this.name); // 'Context Test'
        }, 100);
    }
};

注意点と落とし穴

thisの値は、関数の呼び出し方によって変わります
strictモードでは、単純な関数呼び出しのthisはundefinedになります
アロー関数は独自のthisバインディングを持ちません

クラスでの this

クラスメソッドでのthisの動作：

class Counter {
    constructor() {
        this.count = 0;
    }

    increment() {
        this.count++; // thisはインスタンスを参照
    }
}

ベストプラクティス

メソッドでthisを使用する際は、アロー関数またはbind()を検討
コンテキストが不明確な場合は、明示的バインディングを使用
strictモードを使用して、予期しないthisの挙動を防ぐ