【JavaScrtip】bindでメソッド内でのthisを指定する
JavaScriptで処理をするにあたり、関数内でのthisを指定したいことがあります。
もちろん、varに値を保持させることも出来るのですが
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
function callFunc(){ var _this; // パラメータを保持 this.param = 'param'; // thisを保持する _this = this; // 1秒後に処理 setTimeout(function(){ console.log(_this.param); }, 1000); } |
毎回無名関数を記述できるわけではないんですよね。
コールバック関数が分けられているときなんかがそうですね。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
function callFunc(){ var _this; // パラメータを保持 this.param = 'param'; // thisを保持する _this = this; // 1秒後に処理 setTimeout(callbackFunc, 1000); } function callbackFunc(){ console.log(this.param); // 想定しているthisと違う } |
そんなとき、bindを使うことでメソッド内のthisを指定できるんだとか。
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind
上の例でいうと、こんな感じです。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
function callFunc(){ // パラメータを保持 this.param = 'param'; // 1秒後に処理 setTimeout(callbackFunc.bind(this), 1000); } function callbackFunc(){ console.log(this.param); // 指定したthis } |
bindなんて使うのかと思っていたものですが、JavaScriptでクラスなんかを作ったときに意外と使いました。
まだまだ勉強が足りませんね。
No comments.