Getting Good with JavaScript - Andrew Burgess [23]
Example 4.14
var person = {
name : "Joe",
age : 30,
occupation: "Web Developer",
toString : function () {
return this.name + " | " + this.occupation;
}
};
alert( person.toString() ); // "Joe | Web Developer"
Usually, you won't be calling the toString method yourself; the JavaScript engine will call it for you when you try to use the object (built-in type or not) where you would use a string.
valueOf
This method returns a primitive value that would represent your object. For example:
Example 4.15
var account = {
holder : "Andrew",
balance : 100,
valueOf : function () {
return this.balance;
}
};
alert( account + 10 ); // 110
As you can see, when we try to add 10 to account, we get 110, even though account is an object. Obviously, we can't assign to objects like this, but it works for this kind of thing. This method is like toString, in that you don't usually call it yourself.
You might be wondering when the JavaScript engine decides to use toString and when to use valueOf. That's a bit complicated for this beginner's book; this StackOverflow thread might be of help.
That's it; as you can see there really isn't much in the way of object methods.
Closure
Closure is one of the most important features of JavaScript. If you're familiar with other programming languages (specifically object-oriented ones), you might know about private variables. A private variable is a variable that is accessible to the methods of an object, but isn't accessible from outside the object. JavaScript doesn't have this, but we can use closure to "make" private variables. This is just one way of putting closure to work for you. But enough about why it's useful; let's see how to implement it!
Before we begin, remember two important points about JavaScript that contribute to closure:
Everything is an object, even functions. This means we can return a function from a function.
Anonymous, self-invoking functions are nameless functions that run immediately and usually only run once.
Now, let's use these two ideas to create a closure. First, let's look at some "normal" JavaScript code:
var secretNumber = 1024;
function revealSecret(password) {
if (password === "please") {
return secretNumber++;
}
return 0;
}
This should be old hat to you now. We have a variable called secret_number and a function that returns that number if the password is correct. The post-increment operator adds one to secret_number after we have used it (in this case, that means after we have returned it); this way, we get a unique number each time we call the function. If the password is wrong, we get 0.
However, there's an obvious problem there: there's nothing secret at all about secret_number; it's a global variable that everyone has access to. To fix that, why don't we just put it inside the function? Then, we won't be able to view or change it from outside the function.
Hold on, though; we can't do that either. If we do, each time we call the function, it will reset secret_number to 1024. What to do? Closure to the rescue! Examine the following:
Example 4.16
var revealSecret = (function () {
var secretNumber = 1024;
return function (password) {
if (password === "please") {
return secretNumber++;
}
return 0;
};
}());
alert( revealSecret("please") ); // 1024
alert( revealSecret("please") ); // 1025
Notice that revealSecret is being assigned to the return value of the anonymous self-invoking function. Since that function runs right away, revealSecret will be whatever is returned. In this case, that's a function. Now, here's the impressive part. Notice that the internal function (the one being returned) references the secretNumber variable from its "parent" function's scope. Even after the anonymous function has returned, the inner function will still have access to this variable. That's closure: an inner function having access to the scope of it's parent function, even after the parent function has returned. This way, secretNumber is