JavaScriptの関数内のさらに関数内のthisについて

Question

以下のように匿名関数の中にさらに匿名関数が入れ子になって入っている場合、どのようにthisをSelectViewのインスタンスに束縛することができるのでしょうか？

一つの匿名関数の中であれば、bind(this)を最後につけてあげるとうまくいくのですが、匿名関数が入れ子になるとどうもうまくいかなくなります。

thisを一旦、selfなどの変数に退避させる方法は知っているのですが、それ以外でどのように対応することができるのかを知りたいです！！

function SelectView($items){

    var $items = $items;
    this.delegate = {};
    //var self = this;

    $items.forEach(function($item) {

        $item.addEventListener("change", function(event){

            this.delegate.onSelectChange(event.target);
            //self.delegate.onSelectChange(event.target);

        }).bind(this);

    });

}

Answer 1

一つの匿名関数の中であれば、bind(this)を最後につけてあげるとうまくいくのですが、匿名関数が入れ子になるとどうもうまくいかなくなります。

以下でうまくいきませんか？要するにbind(this)も複数使わないといけないということですが・・・

※修正
bind関数の位置が違っていました。それを指摘できればよかったですね。。

function SelectView($items){

    var $items = $items;
    this.delegate = {};
    //var self = this;

    $items.forEach(function($item) {

        $item.addEventListener("change", function(event){

            this.delegate.onSelectChange(event.target);
            //self.delegate.onSelectChange(event.target);

        }.bind(this));

    }.bind(this));

}

あとは、アロー関数というものもあります。
参考

Comments

[退会済みユーザー]

bind(this)を両方につけるのは試し済みでしたが、上手く行きませんでした。IDE上でも警告が出てしまいます。

[akabee]

あれ？と思い自分のコードを見直してみましたが両方にbindし上手くいっていますね。なぜでしょう。
あまり警告が出る理由が分かりませんが、IDEが異なるとダメなのかもしれません。どうしてもだめなのであればあとは下に記載したアロー関数を用いることを検討するぐらいでしょうか。

[退会済みユーザー]

あれ？動きましたか？自分の環境だとエラーが出てしまってたんですが、キャッシュクリアしてまた試してみます！アロー関数も試してみます！ありがとうございました。

[edom18]

自分も上記の方法でうまくいくとおもいました。ちなみにIDEではどんなエラーが出ていますか？

[akabee]

bind関数自体は、言葉で説明するのは難しいのですが、引数に入れられた内容で関数内のthisを束縛した同じ関数を返却するという関数でして、動作の実態を考えますと入れ子にしたところで特にエラーになるようなイメージがないのです。
もしやっぱり動かなかった場合、エラーの内容が知りたいとは思います。

[lazex]

bindの書く位置が違うような・・・
関数のメソッドなのにaddEventListenerやforEachの返り値にbindしてる

[akabee]

lazexさん、確かに。なるほど。それで動かないのでしょうか。回答修正しておきました。