Javascript object common properties.

Add common properties for object instances.

The prototype object.

• All constructor function type objects, such as the build-in objects Object, Function, Number, String, Date or other that you creates on your own with the Function object have a prototype property which is a reference to an object that contain common properties for all instantiated objects.
• All created object instances has a hidden reference to this prototype object, but you don't need to use that as you can access the common properties directly through the object instance variable.

Create common properties for all object instances.

• There are two main ways to add new common properties for all object instances:

  1. Add a property to the prototype property using the Object constructor.

     This is done using the prototype property on the constructor name:
     
     Example:

     <script type="text/javascript">
     var obj ={};
     // warning is a property that has a value of a function
       Object.prototype.warning=function() {
         return "This property can be used by all object instances.";
       }
       document.write("obj: "+obj.warning()+"<br>");
       var num = new Number(); // inherited build-in object
       document.write("num: "+num.warning()+"<br>");
     </script>

  2. Add a property to the prototype property using a created object instance.

     A created object has a property, constructor, that refer back to the constructor name of the object.

     To do it this way we use the property, prototype, on that constructor:

     Example:

     <script type="text/javascript">
       var obj ={};
     // obj.constructor is a reference to the Object constructor in this case
       obj.constructor.prototype.warning=function() {
         return "This property can be used by all object instances.";
       }
       document.write("obj: "+obj.warning()+"<br>");
       var str = new String(); // inherited build-in object
       document.write("str: "+str.warning()+"<br>");
     </script>

     
     Another example (which does not work in IE):

     <script type="text/javascript">
       var obj ={};
     // using the object instance hidden reference __proto__ (does not work in IE)
       obj.__proto__.warning=function() {
         return "This property can be used by all object instances.";
       }
       document.write("obj: "+obj.warning()+"<br>");
       var str = new String(); // inherited build-in object
       document.write("str: "+str.warning()+"<br>");
     </script>

  3. Add properties as instance variables in the constructor when we creates new constructor function types.

     This gives us the ability to create objects that initially have similar properties but with different values with such new constructor functions.

     This cannot be done directly on a build-in constructor function like String, Number, Array and so on.

     As previously described, you can still change, add or remove properties of the individual objects that are created.

     To create these properties we must use a this operator, which is defined to be a reference to the object that is created by the constuctor function.

     Example:

     <script type="text/javascript">
     function Rectangle(w, h) {
         this["width"] = w;
         this.height = h;
         this.area = function( ) { return this.width * this.height; }
     }
     var r1 = new Rectangle(7, 11);
     var r2 = new Rectangle(8, 34);
     document.write("Area of r1: "+r1.area()+"<br>");
     document.write("Area of r2: "+r2.area()+"<br>");
     // change a property
     r1.width=16;
     document.write("Ne area of r1: "+r1.area()+"<br>");
     </script>

     Since we here can create objects with properties that have unique values, then the methods assigned properties in such objects will be unique as well.

     This means that methods for certain objects can be removed or changed, which may not be what you want.

     If you want methods that are common to all objects you need to prototype them, as previously described.

     Example:

     <script type="text/javascript">
     function Rectangle(w, h) {
         this["width"] = w;
         this.height = h;
     }
     // this method (area) will be common for all created objects
     Rectangle.prototype.area = function( ) {
       return this.width * this.height;
     };
     var r1 = new Rectangle(8, 16);
     document.write("Area of r1: "+r1.area()+"<br>");
     </script>

     
     You will find more about creating functions under the JS function menu.