Friday, November 16, 2007

Javascript in depth


function User (name, age) {
   this.name=name;
   this.age=age;
}

/* User is a reference to the constructor */
User.prototype.getName = function() { ...}
// add new function to object prototype
User.prototype = new Person();
// inherit all of Person object's method, in JS, we inherit from physical object;
//it is like that you get all properties/methods when creating a new Person object
User.cloneUser = function(user) { ...} // static method

var user = new User("Bob", 33);


- what is constructor?
It is same as other function, but is invoked using keyword 'new'. Two things happen when invoke using 'new'
a) the context is switched to the created object, i.e., 'this' refers to object user. Otherwise, if invoke without new, this variable refers to root object window.
b) The constructor's prototype property (the public accessible one) is assigned to the new instance's private prototype.
In a nutshell, all JS objects have a private prototype property. I say "private" because this property is not directly visible or accessible from the object itself (but Visible for constructor!!). When the runtime performs a lookup on a property, it first looks at the instance to see if that property is defined there. If it is not defined there, the runtime looks for the property on the object's private prototype. Prototypes can have their own private prototype, so the search can keep working its way up the prototype chain.

- HTML DOM load
The order of loading is:
1. HTML is parsed
2. External scripts/style sheets (include the one in header) are loaded
3. Scripts are executed as they are parsed in the document (** significant problem: the scripts in these two places won't have accessed to DOM.)
4. HTML DOM is fully constructed. (inline scripts are executed as they are encountered. DOM is partially constructed atm)
5. Images and external content are loaded
6. The page is finished loading.

- Boolean operators
In JS, a||b <=> a?a:b a&&b <=> a?b:a they are not necessary return true or false as in Java/C. Lots of thing are "true" in JS, in fact, only things that are "false" are the false Boolean, the numbers 0 and NaN, the empty string, null and undefined.

e.g., var e = e.chileNodes || e; e = e || window.e; opt.time = opt.time || 400;

No comments: