Передача ссылки объекта внутри другого объекта

Question

Я объявляю метод объекта в 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? Как я могу получить доступ ко всему объекту Bubble внутри req.done? В настоящее время все мои Bubble s находятся в массиве, поэтому я могу просто передать индекс этого массива и получить доступ к свойствам таким образом (array[i].attribute). Я думаю, что есть намного лучший способ сделать это.

Answer 1

Похоже, он работает так, что кажется родным способ сделать это, используя опцию контекста:

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); 

    }); 

} 

Answer 2

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 
    }); 
} 

Answer 3

Это происходит потому, что, когда 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 

    }); 

} 

Answer 4

просто скопируйте 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 

}); 

}