JQuery AJAX和OOP JS范围的问题
因此，我创建了一个对象，该对象在初始化阶段进行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作用域，就不会丢失它的值？
任何帮助都是非常感谢的。
回答 3
Stack Overflow用户
发布于 2012-08-16 03:05:32
你变得“未定义”的部分原因是因为你建立值的方式：
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成功函数中的this引用了jQuery包装的XHR对象。当您调用this.myProperty = response[0].Property时，实际上是在ajax对象上创建一个新属性，并将其值设置为。要纠正此问题，您可以使用javascript 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/
Documentation
MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Function/bind
jQuery.ajax()- http://api.jquery.com/jQuery.ajax/
- Functions上的
bind()和MDN - https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Functions_and_function_scope
上的函数范围
Stack Overflow用户
发布于 2012-08-16 02:58:38
部分问题是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设置。根据site
此对象将成为所有与Ajax相关的回调的上下文。默认情况下，上下文是一个表示调用中使用的ajax设置的对象($.ajaxSettings与传递给$.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'
}
});
}Stack Overflow用户
发布于 2012-08-16 03:04:41
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();
});https://stackoverflow.com/questions/11975332
复制相似问题
腾讯云开发者
