Javascript is an OOP language. The examples here are quick demo on how create and use Javascript objects.

Static Instance Object

If you are intended to create just one instance of an Object, just create a static instance object.

var div = {
        width: "10px",
        height: "20px",

        css: function() {
            alert("{width: "+this.width + "; height: "+ this.height+"}");
        }
        
    };
    
    alert(typeof(div));   //  return object

It's equivalent to non-literal way.

var div = new Object();

div.width = "10px";
div.height = "20px";

div.css = function() {
    alert("{width: "+this.width + "; height: "+ this.height+"}");
};
    
div.css();   //  return {width: "10px"; height: "20px"}    

Becuase Javascript supports JSON, both the syntaxes return the same result.

alert(div["width"]); //   return 10px
alert(div.width);  //   return 10px

Constructor Object

A constructor is a Function object. One instance of object is created using the constructor in new expression. All constructors are objects, but not all objects are constructors. this keyword is used to refer to object itself within the constructor.

function div() {
    this.width = "10px";
    this.height = "20px";
    this.css = function () {  // or css: function () {
        alert("{width: "+this.width + "; height: "+ this.height+"}"); 
    }; 
}

var div1 = new div();
div1.css();  // {width: "10px"; height: "20px"}

Prototype Object

When a constructor creates an object, that object implicitly references the constructor’s associated prototype for the purpose of resolving property references. The constructor's associated prototype can be referenced by expression constructor.prototype.

div.prototype = {
    backgrounColor: "green",
    init: function(clr) {
        this.color = clr;
        alert("{color: "+this.color 
        + "; background-color: "+ this.backgrounColor
        + "; width: "+this.width + "; height: "+ this.height
        + "}");
    }
};

var div1 = new div();

div1.init("red"); // return {color: red; background-color: green; width: 10px; height: 20px}

Properties added to an object's prototype are shared, through inheritance, by all objects sharing the prototype. We can extend customized methods to native objects of Javascript - String, Array, Function, Date, etc. by adding properties to their prototype. The following prototype object add a trim method to all string instances.

String.prototype.trim = function() {
    return this.replace(/^\s*|\s*$/, "");
}

Deep Object, Property's Property

You can access the property's property of an object.

div.prototype = {
    color: {          
        show:function() {
            alert(this.value);        
        },
        value: "#fff"     
    }     
};

var div1 = new div(); 
    
div1.color.show();           //    return  #fff
alert(div1.color.value);   //    return  #fff

Inheritance

Allow one object inherits the properties and methods of the other object.

var div = function (){
        this.width = "10px";
        this.height = "20px";

        this.css = function() {
            alert("{width: "+this.width + "; height: "+ this.height+"}");
        }
 };

function ajax() {
    this.call = function() {
        alert("ajax call");
    } 
 };

div.prototype = new ajax(); //extend the prototype chain of the object div to ajax

var m = new div();
m.call(); // return ajax call

If you think the post is useful, please Social Bookmark.