【问题标题】:Passing object reference inside of another object在另一个对象内部传递对象引用
【发布时间】:2013-06-14 15:47:19
【问题描述】:

我在 javascript 中声明一个对象方法。 在这个方法内部,我想做一个 ajax 调用,并在调用完成后修改这个对象的一些属性。

Bubble.prototype.draw = function(){

console.log(this.attribute) // -> works fine

var req = $.ajax({
url: "someFile.php",
type: "post",
data: someData  
});

// handle response
req.done(function (response, textStatus, jqXHR){

console.log(this.attribute) // -> not in the scope, obviously

});

}

如何将this.attribute 放在req.done 的范围内?如何访问req.done 内的整个Bubble 对象?目前,我所有的Bubbles 都在一个数组中,所以我可以传入这个数组的索引并以这种方式访问​​属性(array[i].attribute)。我想有更好的方法来做到这一点。

【问题讨论】:

  • 您是否尝试过 context:this,作为 ajax 选项?不确定它在这种情况下是否有效
  • this 需要保存在$.ajax() 函数之外的某个变量中。 var self = this; 然后你可以使用self 访问this

标签: javascript ajax oop prototype scoping


【解决方案1】:
Bubble.prototype.draw = function () {
    console.log(this.attribute) // -> works fine
    var req = $.ajax({
        url: "someFile.php",
        type: "post",
        data: someData
    }),
        self = this; //save this object
    // handle response
    req.done(function (response, textStatus, jqXHR) {
        console.log(self.attribute) //access parent this
    });
}

【讨论】:

    【解决方案2】:

    这是因为调用ajax回调时的执行上下文不同,这意味着回调方法中的this关键字指向另一个对象,而不是所需的气泡对象。

    有两种解决方案,如下所示

    使用 $.proxy 将自定义执行上下文传递给回调处理程序

    Bubble.prototype.draw = function(){
    
        console.log(this.attribute) // -> works fine
    
        var req = $.ajax({
            url: "someFile.php",
            type: "post",
            data: someData  
        });
    
        // handle response
        req.done($.proxy(function (response, textStatus, jqXHR){
    
            console.log(this.attribute) // -> not in the scope, obviously
    
        }, this));
    
    }
    

    或者使用闭包变量

    Bubble.prototype.draw = function(){
    
        console.log(this.attribute) // -> works fine
    
        var req = $.ajax({
            url: "someFile.php",
            type: "post",
            data: someData  
        });
    
        var _this = this;
        // handle response
        req.done(function (response, textStatus, jqXHR){
    
            console.log(_this .attribute) // -> not in the scope, obviously
    
        });
    
    }
    

    【讨论】:

      【解决方案3】:

      只需将this.attribute 变量复制到另一个像这样的范围变量。

      Bubble.prototype.draw = function(){
      
      console.log(this.attribute) // -> works fine
      _this = this.attribute;
      var req = $.ajax({
      url: "someFile.php",
      type: "post",
      data: someData  
      });
      
      // handle response
      req.done(function (response, textStatus, jqXHR){
      
      console.log(_this) // -> not in the scope, obviously
      
      });
      
      }
      

      【讨论】:

      • 你在全局范围内设置 _this,这里不是最好的方法
      【解决方案4】:

      看起来它是这样工作的,这似乎是使用上下文选项的原生方式:

      Bubble.prototype.draw = function () {
      
          console.log(this.attribute) // -> works fine
      
          var req = $.ajax({
              url: "someFile.php",
              type: "post",
              data: someData,
              context: this
          });
      
          // handle response
          req.done(function (response, textStatus, jqXHR) {
      
              console.log(this.attribute);
      
          });
      
      }
      

      【讨论】:

        猜你喜欢
        • 2012-09-15
        • 2015-09-15
        • 2021-05-23
        • 2015-06-14
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多