Few Important things before reading prototype :
- The functions in JavaScript are objects and they contain methods and properties. Some of the common methods are apply() and call() and some of the common properties are length and constructor. Another property of the function objects is prototype.
- prototype is the property of functional objects.
- Only functions and no other object can be used as a constructor in javascript .
1.
Extending an object by adding a custom method can be quite convenient,
but it only applies to that particular object's instance. What if you
wanted to modify the entire existing class to add new functionality? For
this, we use the prototype property.
2. Adding properties or methods to the prototype property
of an object class makes those items immediately available to all
objects of that class, even if those objects were created before the prototype property was modified.
3.
Note that adding a public property to a class of objects creates a
single value which all instance objects share. However, modifying this
value through this.globalPropertyName
will result in a local public property of the object being created and
set. Modifications to the class-wide property must be made through the prototype property of the class.
4. Declaring javascript object methods in constructor or in prototype:
a) If your methods do not use local variables defined in your constructor , then use the prototype approach.
b) If you're creating lots of Dogs, use the prototype
approach. This way, all "instances" (i.e. objects created by the Dog
constructor) will share one set of functions, whereas the constructor
way, a new set of functions is created every time the Dog constructor is
called, using more memory.
5. Inheritance :
a) You cause a class to inherit using ChildClassName.prototype = new ParentClass();.
b) You need to remember to reset the constructor property for the class using ChildClassName.prototype.constructor=ChildClassName.
c) You can call ancestor class methods which your child class has overridden using the Function.call() method.
d) Javascript does not support protected methods.
(For detailed study follow : this link )
6. To add a property or method to an entire class of objects, the prototype property of the object class must be modified. The intrinsic object classes in JavaScript which have a prototype property are:
Object.prototype
— Modifies both objects declared through the explicit new Object(...)
constructor and the implicit object {...} syntax. Additionally, all
other intrinsic and user-defined objects inherit from Object, so
properties/methods added/modified in Object.prototype will affect all
other intrinsic and user-defined objects.
Array.prototype — modifies arrays created using either the explicit new Array(...) constructor or the implicit [...] array syntax.
String.prototype — modifies strings created using either the explicit new String(...) constructor or the implicit "..." string literal syntax.
Number.prototype — modifies numbers created using either the explicit new Number(...) constructor or with inline digits.
Date.prototype — modifies date objects created with either the new Date(...) constructor.
Function.prototype
— modifies functions created using either the explicit new
Function(...) constructor or defined inline with function(...){...}.
RegExp.prototype — modifies regular expression objects created using either the explicit new RegExp(...) constructor or the inline /.../ syntax.
Boolean.prototype —
applies to boolean objects created using the explicit new Boolean(...)
constructor or those created using inline true|false keywords or
assigned as the results of a logical operator.
(For detailed study follow : this link)
7. Danger of adding methods to Object.prototype:
·
Object.prototype.length
= function(){
var count = -1;
for(var i in this) count++;
return count; //appendTo method brock.
}
// Do not use this
Object.prototype.load = function () {};
$(window).load(function () {
alert('load event'); // never fired
});
Augmenting the
Object.prototype
object in that way is never recommended, because those properties will be
inherited by a great number of objects -even also by some host objects-, and as
you know, the primary concern is that they will be enumerated by the
for-in statement. Some
methods of jQuery liberary are incompatible with extending
Object.prototype.
In ECMAScript 5, now a safer way exists, because we can now
declare non-enumerable properties, for example:
Object.defineProperty(Object.prototype, 'foo', {
value: 'bar',
});
In the property descriptor -{ value: 'bar' }-
we can specify property attributes, in the case of Value Properties as in the above example, we can specify
the writable attribute, and the common configurable
attribute (determines if a property can be re-configured -attribute changes- or
deleted).
And we have also the enumerable attribute,
which determines if the property will be enumerated by the for-in statement.
If we don't specify the attributes, they are false
by default, the descriptor will look like:
{
value: 'bar',
writable: false,
configurable: false,
enumerable: false
}
So far we talked about various points, but from here we are concentrating only in enumeration.
8. About making properties non-enumerable:
Benefit of making properties non-enumerative- I think the main benefit is to be
able to control what shows up when
enumerating an object's properties, such as for in or Object.keys().So normally, when people want to
add a method to Object, such as a polyfill for some
method not supported in old browsers, they modify the .prototype. But that makes the property
enumerable and messes up what is returned in loops/keys collection (without
using .hasOwnProperty).
So instead of something like:
Object.prototype.myMethod = function () {
alert("Ahh");
};
you could use Object.defineProperty to explicitly say to have it not
be enumerable:
Object.defineProperty(Object.prototype, 'myMethod', {
value: function () {
alert("Ahh");
},
enumerable: false
});
That way, for example when you
use for (var key
in obj),
"myMethod" won't be an item enumerated, and you won't have to worry
about using .hasOwnProperty. The main problem with this is that some browsers don't support it
of course: link and that not all
libraries/code use it, so you can't always rely on external libraries/code to
do use correctly and all the time.
You can access a non-enumerable
property at any time you want, it just won't show up when enumerating the
object's properties - that's the main point.
And I do believe that all
"predefined" properties of objects are non-enumerable. By that, I
really only mean native properties, not necessarily inherited or created. So
with your example, pop and push will not be enumerated over, but Array.prototype.indexOf will be if it is created as a polyfill on an
old browser that doesn't support that method...which of course, can be avoided
by using Object.defineProperty like my example above. Another
example is the length property, which is not
enumerated over.
Here's an example in general: link
The use and definition of Object.keys is important: "Returns an
array of a given object's own enumerable properties, in the same order as that
provided by a for-in loop (the difference being that
a for-in loop enumerates properties in
the prototype chain as well)." - from MDN .
9. There are some details to be aware of:
- Not all properties show up in a for-in loop. For example, the
length (for arrays) and constructor properties will not show up. The
properties that do show up are called enumerable. You can check which ones are enumerable with the help of the propertyIsEnumerable() method that everyobject provides.
- Prototypes that come through the prototype chain will also show up,
provided they are enumerable. You can check if a property is an own
property versus prototype's using the hasOwnProperty() method.
- propertyIsEnumerable() will return false for all of the prototype's properties, even those that are enumerable and will show up in thefor-in loop.
Let's see these methods in action. Take this simplified version of
Gadget():
function Gadget(name, color) {
this.name = name;
this.color = color;
this.someMethod = function(){return 1;}
}
Gadget.prototype.price = 100;
Gadget.prototype.rating = 3;
Creating a new object:
var newtoy = new Gadget('webcam', 'black');
Now if you loop using a
for-in, you see of the object's all properties, including those that come from the prototype:
for (var prop in newtoy) {
console.log(prop + ' = ' + newtoy[prop]);
}
The result also contains the object's methods (as methods are just properties that happen to be functions):
name = webcam
color = black
someMethod = function () { return 1; }
price = 100
rating = 3
If you want to distinguish between the object's own properties versus the prototype's properties, use
hasOwnProperty(). Try first:
>>> newtoy.hasOwnProperty('name')
true
>>> newtoy.hasOwnProperty('price')
false .
