download full size image (for printing)Also see: another great explanation of JS prototypes (external link)
Interesting Points
- All instances inherit from the prototype object of thefunction that created them.
- Mozilla/Konqueror have an implementation-specific __proto__ property that points to the prototypeobject of the creator function (the function used to create anyinstance of that type).
- Regardless of the presence/absence of a __proto__property, the general idea is that all objects use theprototype object pointed to by that objects creatorfunction. This property is part of the Javascript standard and iscalled prototype. The prototypeobject, by default, has a constructor propertypointing back to the function that it's the prototype for.
- The prototype is only used for properties inherited byobjects/instances created by that function. The function itself doesnot use the associated prototype (but sincethe function itself is an object, it inherits from theprototype of it's creator function, typically the javascriptsystem "Function" object).
function Foo() { } ; var f1 = new Foo();Foo.prototype.x = "hello";f1.x //=> helloFoo.x //=> undefined
Note, we use the Foo
.prototype to set propertiesfor all objects created by function Foo. We don't sayf1
.prototype to set properties for f1
.This is a very important point to remember. - Default prototype objects can be replaced with another usercreated object. While doing so, the constructor property must beset manually to replicate what the javascript runtime does behindthe scence with the default prototype object.
function foo() { } ; var f1 = new foo();f1.constructor === foo.prototype.constructor === foo //replace the default prototype objectfoo.prototype = new Object();//now we have:f1.constructor === foo.prototype.constructor === Object//so now we say:foo.prototype.constructor == foo//all is well againf1.constructor === foo.prototype.constructor === foo
- Each prototype object itself is created (by default) with theObject() constructor, hence the prototype has as it's prototypeObject.prototype. Therefore all instances regardless of the typeultimately inherit properties from Object.prototype.
- All objects automatically read properties in the prototypechain as-if those properties where defined in the object itself.
Setting the same property via theobject shadows/hides the same property in theprototype for that instance.
function foo() { } f1 = new foo();f2 = new foo();foo.prototype.x = "hello";f1.x => "hello"f2.x => "hello";f1.x = "goodbye"; //setting f1.x hides foo.prototype.xf1.x => "goodbye" //hides "hello" for f1 onlyf2.x => "hello" delete f1.xf1.x => "hello"; //foo.prototype.x is visible again to f1.
Setting the property directly in theprototype changes it for all instances.foo.prototype.x = "goodbye";//nowf1.x => "goodbye"f2.x => "goodbye";
More Interesting points
Viewing/following various arrows in the diagram above, you'll see some interesting relationships in the core javascript language. (Type these code examples in a javascript console if you want to play along).
- Function.__proto__ points to Function.prototype. This results in:
Function.constructor === Function
That is to say: Function is it's own constructor ! - Object instanceof Object == true.
This is because:
Object.__proto__.__proto__.constructor == Object
Note also that unlike Object instanceof Object
, Foo instanceof Foo == false.
This is because: Foo does not exist as a constructor for it's own prototype chain.
- Function.prototype.toString is a built-in method and isdistinct from another built-in method: Object.prototype.toString
f1.toString() finds:Object.prototype.toStringWe get something like: [object ...]
Whereas: Foo.toString() first finds & uses:Function.prototype.toString() We get something like: [Function foo...]
If we say:delete Function.prototype.toStringFoo.toString() We get something like: [object ...]
本站僅提供存儲服務,所有內容均由用戶發布,如發現有害或侵權內容,請
點擊舉報。