Please explain me this function, I have trouble understanding this keyword

JavaScript
1 
net.CommandQueue = function(id,url, freq) {
	this.id = id;
	net.cmdQueues[id] = this;
	this.url = url;
	this.queued = new Array();
	[COLOR="Blue"][B]this.sent = new Array();[/B][/COLOR]
	if(freq) {
		this.repeat(freq);
	}
}

net.CommandQueue.prototype.addCommand = function(command) {
	if(this.isCommand(command)) {
		this.queue.append(command,true);
	}
}

net.CommandQueue.prototype.fireRequest = function() {
	if (this.queued.length == 0) {
		return;
	}
	
	var data = "data=";
	for(var i = 0; i < this.queued.length; i++) {
		var cmd = this.queued[i];
		if(this.isCommand(cmd)) {
			data += cmd.toRequestString();
			[COLOR="Blue"][B]this.sent[cmd.id] = cmd;[/B][/COLOR]
		}
	}
	this.queued = new Array();
	this.loader = new net.ContentLoader(this.url, net.CommandQueue.onload, net.CommandQueue.onerror, "POST",
	data);
}

net.CommandQueue.prototype.isCommand = function(obj) {
	return (
		obj.implementsProp("id") &&
		obj.implementsFunc("toRequestString") &&
		obj.implementsFunc("parseResponse")
	);
}

net.CommandQueue.onload = function(loader) {
	var xmlDoc = net.req.responseXML;
	var elDocRoot = xmlDoc.getElementsByTagName("commands")[0];
	if(elDocRoot) {
		for(i = 0; i < elDocRoot.childNodes.length; i++) {
			elChild = elDocRoot.childNodes[i];
			if(elChild.nodeName == "command") {
				var attrs = elChild.attributes;
				var id = attrs.getNamedItem("id").value;
				[COLOR="Blue"][B]var command = net.CommandQueue.sent[id];[/B][/COLOR]
				if(command) {
					command.parseResponse(elChild);
				}
			}
		}
	}
}

I highlighted the lines of codes that I dont understand above.
I dont understand the code var command = net.CommandQueue.sent[id];. How come this code need to be coded like that? Is it possible to change it like this: var command = this.sent[id];. Since this refers to net.CommandQueue then the code should work right?

Please explain it to me. Im still a student.

Thanks!

2

Because the variable “other” inside the function refers to the variable “elodie” outside the function, since the the “elodie” object is passed to the function as a parameter.

No

Yes it does. As I said, “other” refers to “elodie”, and “elodie” is an instance of the Person class, and the Person class has a “first” property, therefore the “elodie” Object also has the “first” property, and seeing as “other” refers to “elodie” that also has the “first” property.

3

I’m not sure, there is not enough code to go by to answer this question. You could test it of course, see if it works :slight_smile:

Yes that would be different
this.field = field => Set the property “field” in the object to the value of the parameter “field” given to the function
this.field = this.field => Set the property “field” in the object to the value of the property “field” in the object. So in end-effect this does nothing.

4

Both this.owner.id and the owner that’s passed in to the function refer to elements on the page. They both can refer to different ones though.

The one that goes this.owner.id is the existing one that is already assigned to the UpdatePropertyCommand object.

The one passed to the function as owner is a reference to a different page element.

Both this.owner and owner refer to very different things, that may or just as easily may not refer to the same element. this.owner is the pre-existing one, and the owner that’s passed to the function is a different one.

5

Hi thanks for the link,

I found this code in the link that you gave me:

function Person(first, last, age) {
	this.first = first;
	this.last = last;
	this.age = age;
}

Person.prototype = {
	getFullName: function() {
		alert(this.first + ' ' this.last);
	},
	greet: function(other) {
		alert("Hi " + [COLOR="Red"]other.first[/COLOR] + ", I'm " + this.first + ".");
	}
};

var elodie = new Person("Elodie", "Jaubert", 27);
var christophe = new Person("Christophe", "Porteneuve", 30);
christophe.greet(elodie);

Why does other.first works? Should it be just other? Because other does not have a first property right?

6

Let’s break this down even further, line by line.

planets.commands.UpdatePropertyCommand = function(owner, field,value) {

This line is adding a function to planets.commands
The function that is added is called UpdatePropertyCommand, and is called with three arguments. owner, field and value.

this.id = this.owner.id+"_"+field;

The this keyword here refers to the current object, which in this case could quite easily be planets.commands
Wherever you see the this keyword, you can mentally replace that with planets.command, or some other object that is specified to be the current object.

There are two separate things here that are being referred to as owner. One of these things is a property on the current object that is called owner. The other of these things is the variable called owner that was passed to the function.
All references to the variable called owner that is passed to the function, could easily be renamed to something else, such as newOwner, without affecting in any way the completely separate property called owner that is on the current object.
So, the above line takes owner element from the current object, which is very different from the owner that is passed to the function. The line takes the element’s property called id, adds a string to it, and assigns that combination to a property of the current object called id

this.obj = owner;

This line uses the element that the UpdatePropertyCommand function was called with. The element in the owner variable is a very different one from that which the current object refers to.
The above line tells a property called obj on the current object, to refer to the element that was passed to the function under the name of owner.

this.field = field;

This line sets a property called field on the current object, to be the same as the one that was passed to the function in the variable called field.

this.value = value;

This line sets a property called value on the current object, to be the same as the one that was passed to the function in the variable called value.

}

This line marks the end of the function.

7

It depends where the onload function is called. If it’s called from within net.CommandQueue, this would work.
If it’s called from outside the class it won’t.

This article gives a good explanation as to why this is. It’s one of the harder things to grasp about javascript IMHO.

8

Have you tried changing it to see if it works? I think you’re right, and using this should work as well.

9

Oh okay, I understand now.

Sir last question,

planets.commands.UpdatePropertyCommand = function(owner, field,value) {
	this.id = [COLOR="Red"]this.owner.id[/COLOR]+"_"+field;
	this.obj = owner;
	this.field = field;
	this.value = value;
}

planets.commands.UpdatePropertyCommand.toRequestString = function() {
	return {
		type: "updateProperty",
		id: this.id,
		planetId: this.owner.id,
		field: this.field,
		value: this.value
	}.simpleXmlify("command");
}

I found this code in the Ajax in Action book. It is for polling the server for updates.

I just want to clear something up to make sure I understand the this keyword already.

Why does the this.owner.id needs to have this in the code? Couldn’t it be just owner.id? Would it work the same or will it have different behaviour?

this.field = field;
this.value = value;

These two lines of codes doesn’t use this at all.
Why? Would it be different if I use this.field = this.field?