Javascript (JS) objects are fascinating and could confuse regular users. This post details the Javascript object model. There are several terms that we will examine:
— the hidden property/member __proto__ (some implementations of Javascript might not expose this property, or might expose it as read-only)
— the non-enumerable properties/members of some special objects: prototype and constructor
— the keywords: new and function
Every entity in Javascript is an object (apart from the primitives undefined, null, boolean, string, number). All objects have the hidden property called “__proto__” (at least for FF and Chrome implementations of JS). This is typically a read-only property, and points to the object based on which the given object was constructed. This notion will become clear once we see what the keyword new does; for now, it suffices to know that every object has this property.
A special class of objects in JS are functions. In addition to the __proto__ property, the function objects have a hidden “prototype” property. Note that in JS, any new object can only be created as an instance of a function (even when you do “var a = new Object;”, Object is a function btw), and this new object holds a reference to the function.prototype object, through its __proto__ property. Note that Function.prototype is the only function object that does not have a prototype property (because Function.prototype is defined as a Function object in ECMAScript, instead of being defined as a regular object).
Yet another special class of objects in JS are prototypes. In addition to the __proto__ property, the prototype objects have a “constructor” property. This constructor property points to the function for which the current object is a prototype.
So, there are 3 kinds of objects in JS: functions, prototypes, and regular objects. Note that there are four special entities in JS: Object.prototype, Object, Function.prototype, Function. Object.prototype is the prototype object: its __proto__ property is null, and its constructor points to Object. Object is a function object: its __proto__ property is Function.prototype, its prototype points to Object.prototype. Function.prototype should have been a prototype object, but is instead defined by ECMAScript to be a function object: its __proto__ property is Object.prototype, its constructor points to Function, but has no prototype property (this is the only function object that does not have a prototype property; this function always returns undefined). Function is a function object: its __proto__ property points to Function.prototype, and its prototype property points to Function.prototype. As a summary, Object.prototype and Function.prototype are the primitive prototype objects, and Object and Function are the primitive function objects. The figure below illustrates this pretty well.
We have now discussed the properties __proto__, prototype and constructor. We will now discuss the keywords “new” and “function”.
Whenever an object is created with “new” in JS (say “a = new A (arguments)”), the following sequence of actions happen:
— an empty object ({}) is created (let’s just refer to it by “a” like in the above statement)
— a.__proto__ = A.prototype
— A.call (a, arguments)
— return a
The “function” keyword can be used to create new function objects. You can think of “function f (arguments) {body}” as syntactic sugar for “f = new Function (arguments, body);” (with optimizations performed by the JS implementation in the former case). Whenever a function “f” is declared, the JS implementation creates the function object “f” and f.__proto__ points to Function.prototype (as discussed above in the explanation for the “new” keyword). In addition, the JS implementation creates a prototype object referenced by “f.prototype”. The JS implementation sets f.prototype.constructor to f, and f.prototype.__proto__ to Object.prototype.
References:
— http://www.mollypages.org/misc/js.mp
— https://developer.mozilla.org/en/JavaScript/Reference/Functions_and_function_scope
— http://stackoverflow.com/questions/2344493/what-is-the-default-prototype-for-custom-function-in-javascript
— http://javascriptweblog.wordpress.com/2010/06/07/understanding-javascript-prototypes/
— http://phrogz.net/js/classes/OOPinJS2.html
— http://pivotallabs.com/users/pjaros/blog/articles/1368-javascript-constructors-prototypes-and-the-new-keyword
— http://stackoverflow.com/questions/4859308/in-javascript-why-typeof-function-prototype-is-function-not-object-like-ot
Technology and Startups 