JQuery AJAX 和 OOP JS 范围困境

JQuery AJAX and OOP JS Scope Woes

本文关键字：范围 困境 JS OOP AJAX JQuery      更新时间：2023-09-26

因此，我创建了一个对象，该对象在初始化阶段进行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 范围后不会失去其值？

任何帮助都非常感谢。

由于

建立值的方式而变得"未定义"的部分原因：

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

当您声明属性（或变量）而不指定值时，它们默认为"未定义"。相反：

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

转到 ajax 调用。您是对的，回调的范围与对象不同。 this，在 ajax 成功函数中，指的是 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/

文档

  • MDN 上的bind() - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
  • jQuery.ajax() - http://api.jquery.com/jQuery.ajax/
  • MDN 上的函数和函数范围 - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope

部分问题是 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设置。每个网站：

此对象将成为所有与 Ajax 相关的回调的上下文。由 默认情况下，上下文是表示 AJAX 设置的对象 在调用中使用（$.ajax设置与传递给的设置合并 $.ajax）。例如，将 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'
          }
       });
    }

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();
});
相关文章：