Getting Good with JavaScript - Andrew Burgess [21]
Now you see why we use this.name. Inside an object literal, this points to that object itself.
Example 4.8
var waitress = {
name : "Ashley",
greet: function (customer) {
customer = customer || " there!";
return "Hi " + customer + " My name is " + this.name + "; what can I get you?";
}
};
alert( waitress.greet("Joe") ); // Hi Joe My name is Ashley; what can I get you?
Object Oriented JavaScript
In the previous chapter, we talked for a very short while about objects. Now, our discussion of this has led us back down the trail of objects in JavaScript, and—since everything in JavaScript is an object—I think we should continue.
I should note that we're only going to touch the tip of the tip of the tip of how you can manipulate objects in JavaScript. I have screencast series on Object-Oriented Programming in JavaScript on the Tuts+ Marketplace, and if you'd like to delve into a more advanced view of OOP (in JavaScript, of course), you might want to check that out.
You know that constructor functions coupled with the keyword new are a decent way of making objects. To recap that, make sure you're grokking this:
function Computer (name, ram_amount, memory_amount) {
this.name = name;
this.RAM = ram_amount; // in GBs
this.space = memory_amount; // in MBs
}
This is a normal function that will create an object if we call new Computer("MacBook", 2, 250000 ). Note that this isn't the prototype (or blueprint) of all computer objects; it's the constructor of them.
What about adding a function to this computer object, such as the ability to store a file? You might be tempted to do something like this:
function Computer (name, ram_amount, memory_amount) {
this.name = name;
this.RAM = ram_amount;
this.space = memory_amount;
this.files = [];
this.store_file = function (filename, filesize) {
this.files.push(filename);
this.space -= filesize;
};
}
That seems innocuous enough; however, there is a problem here. You shouldn't create functions inside your constructor functions because every time you create a new copy of that object, you'll be creating a new copy of that function in memory. There's no need for this, because we can have just one copy of the function that works for all Computer objects. This works because we use this to refer to the object inside the function.
So what we need is a way to point every copy of the Computer to a store_file function. It's nice the way we've got it now, because the function is a method, so this refers to the given object. We can do this—and only need one function—with the prototype of Computer. Here's how that's done:
Computer.prototype.store_file = function (filename, filesize) {
this.files.push(filename);
this.space -= filesize;
};
Remember that functions are objects too, so they can have properties. In this case, we're accessing the prototype property, which is an object that all Computer objects inherit from. What that means is this: when you run my_computer.store_file("image.jpg", 26), the JavaScript engine sees that my_computer doesn't have a method called store_file, so it looks on my_computer's prototype object, which is Computer.prototype. It will find it there, and execute it as a method of my_computer. If it didn't find it there, it would continue up the prototype chain. In this case, the next step up is Object.prototype, which is the top of everything in JavaScript.
I want to make sure you're understanding what is really going on here. There are two main parts to creating an object with a constructor function and the keyword new:
The constructor function creates an object (denoted by this inside the function); within the function, we are assigning the values of properties of the object.
The prototype,