Most probably I made some obvious context or scope mistake, but I cannot figure out what I am doing wrong. Here is a small example to illustrate the issue I am having.
When having the following main.js javascript:
$(function() {
/**
* Returns a promise that resolvses the provided parameter `something`
* after 4 seconds.
*/
function async(something) {
var deferred = $.Deferred();
setTimeout(function() {
deferred.resolve(something);
}, 4000);
return deferred;
}
/**
* Some object with a name and response property.
*/
var SomeObj = function(name) {
this.name = name;
this.response = null;
this.init();
}
SomeObj.prototype.init = function() {
self = this;
async(this.name).then(function(response) {
self.setResponse(response);
});
};
SomeObj.prototype.setResponse = function(response) {
this.response = response;
console.log(this);
console.log(response);
};
objA = new SomeObj('a');
objB = new SomeObj('b');
});
That is executed within the empty HTML page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>title</title>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="main.js"></script>
</head>
<body>
</body>
</html>
And with jquery installed in the same directory using:
bower install jquery
A the bottom of the javascript file, two objects are initialized with a name property. During initialization, these objects set their response property to the same value, that is returned as promise by the async function. This function simply resolves the input parameter after four seconds.
With this script I would have expected that (after waiting four seconds) the response property of ObjA is set to a and the response property of objB is set to b. However, the console shows me the following result:
> SomeObj {name: "b", response: "a"}
> a
> SomeObj {name: "b", response: "b"}
> b
Apparently the setResponse function of objB is called in both cases. But why?
