javascriptのthisの扱いについて

備忘録的なメモです。
間違いがある可能性がありますので、ご注意ください。
その際は指摘いただけるとありがたいです。

Javascriptにおけるthisの扱いは注意が必要になる。
thisの対象になるのはそのthisが実行されるコードに依存するという原則がある。thisはそれを呼び出したオブジェクトに依存する。

つまり、thisを持ったオブジェクトをどこで宣言しようと、最終的にはそれが実行されたコードにthisの参照先が設定されるということである。このことを理解しないととんでもないバグを生む可能性がある。

また、自分がよく混同するのが「this」と「関数のスコープ」である。thisはそれが定義された場所によらず、それが実行された文脈によって設定されるが、関数のスコープ(クロージャ的な使われ方)ではそれが定義された場所でスコープが決定する。

   function test() {
        this.title = 'test';
        this.inner = function() {
            alert(this.title);
        }
    };

    var _test = new test();
    setTimeout(_test.inner, 3000)

このようなコードではsetTimeoutに渡したinnerメソッドのthisはsetTimeoutのthisに依存するため、 undefindが表示されてしまう。ここでの動きに注意。

ここの処理ではコールバックにメソッドを渡しているが、setTimeoutのコールバックの渡し方を変える

setTimeout(_test.inner(), 3000)

ここでの、_test.inner()では関数呼び出しを行っているのでコールバックに渡している段階で、
処理が実行されているということ。この場合のthisは_testオブジェクトを参照している。
これは処理で言えば、

_test.inner();

これと同じ。
なので、setTimeoutが評価された段階で、alertが表示される。

func.bind() を使うことで、thisの対象を固定することができる

setTimeout(_test.inner.bind(_test), 3000)

_test.innerメソッドに対してthisを自分自身にbindする。
つまり

<<<<<<< HEAD

thisを固定させたいオブジェクト.bind(固定するオブジェクト)
=======
```js
Thisを固定させたいオブジェクト.bind(固定するオブジェクト)
>>>>>>> EDIT_REQUEST

という構文になる

thisの固定はbind以外にもcallとapplyがある。
両者の使い分けはcallとapplyが指定したオブジェクトでthisを固定して、関数を実行する。
Bindは指定したオブジェクトでthisを固定して新しい関数を生成する
という違いにある。繰り返し使う必要があるなら、bindを使った方がいい。