29363


具体的には以下です。

[code]

    var Sample = function(str){
        this.str = str;
    
        $('#btn').click(function(){
             alert(str);
        });
    }
    
[/code]

クリックイベントハンドラからsrtを出力します。


CC BY-SA 3.0
2016-10-05T01:55:27.653
29360
2016-10-05T09:17:33.113
19033
question
javascript jquery
Javascriptのコンストラクタ内のjQueryイベントハンドラからメンバを参照する方法はありますか？


イベントハンドラの中で`this.str`のように使いたいという事でしょうか？

この場合、古典的な方法として、`this`を変数に代入しておいてから使う方法があります。  
一般的には`self`という変数名を使います。

[code]

    var Sample = function(str){
        this.str = str;
    
        var self = this;
        $('#btn').click(function(){
             alert(self.str);
        });
    }
    Sample("aaa");
    
[/code]

もう一つの方法として、`bind()`を使用する方法があります。  
[Function.prototype.bind() - JavaScript |
MDN](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Function/bind)  
bind()の第一引数で指定したオブジェクトが、そのfunction内でのthisになります。

[code]

    var Sample = function(str){
        this.str = str;
    
        $('#btn').click(function(){
             alert(this.str);
        }.bind(this));
    }
    Sample("bbb");
    
[/code]


CC BY-SA 3.0
2016-10-05T02:38:50.370
29363
2016-10-05T02:49:17.893
2016-10-05T02:49:17.893
18862
18862
29360
answer


ES2015ではアロー関数([arrow
functions](https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/arrow_functions))を使うことでthisの束縛が出来るようになりました。

[code]

    var Sample = function(str){
     this.str = str; 
     $('#btn').click(()=>{
         alert(this.str); 
      }); 
    };
    
[/code]

なお、ES2015は古いブラウザ等では対応していなかったりするのでbabel等でトランスパイルするのが現実的ですが。

(なお、トランスパイルすると`var _this`のような変数が自動的に使用されます。`self`と同じ手法ですね。)


CC BY-SA 3.0
2016-10-05T09:17:33.113
29374
2016-10-05T09:17:33.113
2376
29360
answer