JavaScriptのthis

Question

ソースコード

function HogeHoge(val_a, val_b){
  if (typeof HogeHoge.instance === "object"){
   return HogeHoge.instance;
  }

  var get_val_by_ajax = function() {
    return $.ajax({
       ...
       ...
       ...
    });
  }

  this.update_val = function() {
    get_val_by_ajax().done(function(result) {
      this.val_a = result['val_a'];
      this.val_b = result['val_b'];
   
   // その他の処理
    });
  }

  this.val_a = val_a;
  this.val_b = val_b;
  HogeHoge.instance = this;
  return this;
}

$(function(){
  var hoge = new HogeHoge('A', 'B');
 hoge.update_val();
});

以上のようにval_aとval_bの値をajaxを用いて更新したいんですが、

this.update_val = function() {
  get_val_by_ajax().done(function(result) {
    this.val_a = result['val_a'];
    this.val_b = result['val_b'];

  // その他の処理
  });
}

this.val_aのthisがインスタンスのthisではなく、
メソッドのthisが呼ばれてしまいます。
ちなみに、get_val_by_ajax().done(function(result) を用いているのは
同期処理で値を更新したいからです。

そのため、現状ではシングルトンを用いて
インスタンスを生成してから、値を更新しています。

this.update_val = function() {
  get_val_by_ajax().done(function(result) {
    var hoge = HogeHoge();
    hoge.val_a = result['val_a'];
    hoge.val_b = result['val_b'];

  // その他の処理
  });
}

このような書き方ではなく、
インスタンスのthisを呼びたいんですが、どのように書き変えればよろしいでしょうか。
よろしくお願いいたします。

Answer 1

アロー関数をつかって

this.update_val = function() {
  get_val_by_ajax().done(result=>{
    this.val_a = result['val_a'];
    this.val_b = result['val_b'];

  // その他の処理
  });
}

とできますよ。

(アロー関数はthisをBindする)

Comments

[usmysa]

ありがとうございます！

Answer 2

thisを変数に入れて、そちらを使いましょう。

this.update_val = function() {
  var _this = this;
  get_val_by_ajax().done(function(result) {
    _this.val_a = result['val_a'];
    _this.val_b = result['val_b'];

  // その他の処理
  });
}