Question

因此，我创建了一个对象，该对象在初始化阶段进行AJAX调用以填充其属性。但是，我遇到了一个非常奇怪的行为：我可以在$ .ajax（）范围内打印并查看属性值，但是返回属性值的任何公共方法都返回值为“undefined”。

这是JS代码的样子：

function MyFunction() {
   this.myProperty;
   this.init();
}

Myfunction.prototype.getPropertyValue = function () {
    alert(this.myProperty); // returns 'undefined'
}

Myfunction.prototype.init = function () { 
   $.ajax({
      type: 'get',
      url: "getProperty.php",
      dataType: "json",
      success: function(response) {
         this.myProperty = response[0].Property;
         alert(this.myProperty) // returns 'Property Name'
      }
   });
}

我的想法是在$ .ajax（）范围内，'this'实际上指的是其他东西。所以，我的问题是如何确保设置'this.myProperty'并且一旦我们超出AJAX范围就不会失去它的价值？

非常感谢任何帮助。

Answer 1

由于您建立值的方式，您获得“未定义”的部分原因是：

var MyFunction = function () {
   this.myProperty;
   alert(this.myProperty); // undefined!
   this.init();
};

如果在未指定值的情况下声明属性（或变量），则默认为“undefined”。代替：

var MyFunction = function () {
   this.myProperty = false;
   alert(this.myProperty); // false
   this.init();
};

打开ajax电话。你是对的，回调的范围与对象不同。在{ajax success函数中，this指的是jQuery包装的XHR对象。当您致电this.myProperty = response[0].Property时，您实际上是在ajax对象上创建一个新属性并设置其值。要解决此问题，您可以使用jQuery ajax对象的context选项，也可以使用javascript bind方法绑定回调函数：

  success: function(response) {
     this.myProperty = response[0].Property;
  }.bind(this)

......或：

   $.ajax({
      type: 'get',
      url: "getProperty.php",
      dataType: "json",
      context: this,
      success: function(response) {
         this.myProperty = response[0].Property;
      }
   });

在此处试试：http://jsfiddle.net/SnLmu/

<强>文档

bind() - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
jQuery.ajax() - http://api.jquery.com/jQuery.ajax/
功能和功能范围 - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope

Answer 2

部分问题是ajax是异步的，因此当您尝试访问它们时，可能无法设置属性（竞争条件）。另一个是ajax调用中this的值不是Myfunction。你可以修理：

Myfunction.prototype.init = function () { 
   var that = this;
   $.ajax({
      type: 'get',
      url: "getProperty.php",
      dataType: "json",
      success: function(response) {
         that.myProperty = response[0].Property;
         alert(that.myProperty) // returns 'Property Name'
      }
   });
}

或者您可以在ajax调用中使用context设置。根据{{3}}：

此对象将成为所有与Ajax相关的回调的上下文。通过默认情况下，上下文是表示ajax设置的对象在调用中使用（$ .ajaxSettings与传递给的设置合并 $阿贾克斯）。例如，将DOM元素指定为上下文将为请求的完整回调创建上下文，如下所示：

Myfunction.prototype.init = function () { 
       var that = this;
       $.ajax({
          type: 'get',
          url: "getProperty.php",
          dataType: "json",
          context: Myfunction,
          success: function(response) {
             this.myProperty = response[0].Property;
             alert(this.myProperty) // returns 'Property Name'
          }
       });
    }

Answer 3

var MyFunction = {
    myProperty: null,
    init: function() {
        var self = this;
        self.ajax(function(response) {
            self.myProperty = response;
            self.secondfunction(self.myProperty); //call next step only when ajax is complete
        });
    },
    ajax: function(callback) {
        $.ajax({
            type: 'get',
            url: "getProperty.php",
            dataType: "json"
        }).done(function(response) {
            callback(response[0].Property);
        });
    },
    secondfunction: function(prop) {
        alert(prop);
    }
}

$(function() {    
    MyFunction.init();
});

JQuery AJAX和OOP JS范围问题

3 个答案: