OO concept in javascript

OO concept about JavaScript

concept about the properties of objects

1.DataProperty & AccessProperty

DataProperty: Configurable, Enumerable,Writable,Value

AccessProperty:Configurable,Enumerable,Get,Set

Function: object.defineProperty(object,propertyName,propertyDescriptor)

2.Create object

2.1 FacotryMode

code sample:

function createPerson(name, age, job){
            var o = new Object();
            o.name = name;
            o.age = age;
            o.job = job;
            o.sayName = function(){
                alert(this.name);
            };    
            return o;
        }
        
        var person1 = createPerson("Nicholas", 29, "Software Engineer");
        var person2 = createPerson("Greg", 27, "Doctor");

This Mode abstract the process to create a object. With a function which contains all the logic to create a object.
Weakness: Can not determine the type of the created object.

2.2 ConsturctorMode

code sample:

function Person(name, age, job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.sayName = function(){
                alert(this.name);
            };    
        }
        
        var person1 = new Person("Nicholas", 29, "Software Engineer");
        var person2 = new Person("Greg", 27, "Doctor");
        
        person1.sayName();   //"Nicholas"
        person2.sayName();   //"Greg"
        
        alert(person1 instanceof Object);  //true
        alert(person1 instanceof Person);  //true
        alert(person2 instanceof Object);  //true
        alert(person2 instanceof Person);  //true
        
        alert(person1.constructor == Person);  //true
        alert(person2.constructor == Person);  //true
        
        alert(person1.sayName == person2.sayName);  //false

weakness: we can not reuse the function defined in the constructor.

2.3 PrototypeMode
we define the logic of an object in the prototype, not in the constructor.

code Sample:

function Person(){
        }
        
        Person.prototype = {
            constructor: Person,
            name : "Nicholas",
            age : 29,
            job : "Software Engineer",
            friends : ["Shelby", "Court"],
            sayName : function () {
                alert(this.name);
            }
        };
        
        var person1 = new Person();
        var person2 = new Person();
        
        person1.friends.push("Van");
        
        alert(person1.friends);    //"Shelby,Court,Van"
        alert(person2.friends);    //"Shelby,Court,Van"
        alert(person1.friends === person2.friends);  //true

weekness: the data in the prototype is shared by every instance of this type. So, issues will come out if the shared property is reference type.

2.4 combine of prototype and constuctor

combine these two mode, define customized property in the constuctor, and define the shared function ans properties in the prototype.

code sample:

function Person(name, age, job){
            this.name = name;
            this.age = age;
            this.job = job;
            this.friends = ["Shelby", "Court"];
        }
        
        Person.prototype = {
            constructor: Person,
            sayName : function () {
                alert(this.name);
            }
        };
        
        var person1 = new Person("Nicholas", 29, "Software Engineer");
        var person2 = new Person("Greg", 27, "Doctor");
        
        person1.friends.push("Van");
        
        alert(person1.friends);    //"Shelby,Court,Van"
        alert(person2.friends);    //"Shelby,Court"
        alert(person1.friends === person2.friends);  //false
        alert(person1.sayName === person2.sayName);  //true

This mode is used very often.

2.5 Dynamic prototype Mode

code sample:

function Person(name, age, job){
        
            //properties
            this.name = name;
            this.age = age;
            this.job = job;
            
            //methods
            if (typeof this.sayName != "function"){
            
                Person.prototype.sayName = function(){
                    alert(this.name);
                };
                
            }
        }

        var friend = new Person("Nicholas", 29, "Software Engineer");
        friend.sayName();

2.6 parasitic Mode

This mode is used to extand an existing type

code sample:

function SpecialArray(){       
 
            //create the array
            var values = new Array();
            
            //add the values
            values.push.apply(values, arguments);
            
            //assign the method
            values.toPipedString = function(){
                return this.join("|");
            };
            
            //return it
            return values;        
        }
        
        var colors = new SpecialArray("red", "blue", "green");
        alert(colors.toPipedString()); //"red|blue|green"

        alert(colors instanceof SpecialArray);

weekness: we can not depand on instanceof to determine the type of the object. Not suggessted to use.

2.7 durable constuctor mode

This mode only used in some high safty scenario.

3 Inheritance

3.1 prototype chain

code sample:

 function SuperType(){
            this.property = true;
        }
        
        SuperType.prototype.getSuperValue = function(){
            return this.property;
        };
        
        function SubType(){
            this.subproperty = false;
        }
        
        //inherit from SuperType
        SubType.prototype = new SuperType();
        
        SubType.prototype.getSubValue = function (){
            return this.subproperty;
        };
        
        var instance = new SubType();
        alert(instance.getSuperValue());   //true
       
        alert(instance instanceof Object);      //true
        alert(instance instanceof SuperType);   //true
        alert(instance instanceof SubType);     //true

        alert(Object.prototype.isPrototypeOf(instance));    //true
        alert(SuperType.prototype.isPrototypeOf(instance)); //true
        alert(SubType.prototype.isPrototypeOf(instance));   //true
        

3.2 constuctor stealing

code sample:

function SuperType(name){
            this.name = name;
        }

        function SubType(){  
            //inherit from SuperType passing in an argument
            SuperType.call(this, "Nicholas");
            
            //instance property
            this.age = 29;
        }

        var instance = new SubType();
        alert(instance.name);    //"Nicholas";
        alert(instance.age);     //29

3.3 combination of inheritance

code sample:

function SuperType(name){
            this.name = name;
            this.colors = ["red", "blue", "green"];
        }
        
        SuperType.prototype.sayName = function(){
            alert(this.name);
        };

        function SubType(name, age){  
            SuperType.call(this, name);
            
            this.age = age;
        }

        SubType.prototype = new SuperType();
        
        SubType.prototype.sayAge = function(){
            alert(this.age);
        };
        
        var instance1 = new SubType("Nicholas", 29);
        instance1.colors.push("black");
        alert(instance1.colors);  //"red,blue,green,black"
        instance1.sayName();      //"Nicholas";
        instance1.sayAge();       //29
        
       
        var instance2 = new SubType("Greg", 27);
        alert(instance2.colors);  //"red,blue,green"
        instance2.sayName();      //"Greg";
        instance2.sayAge();       //27

3.4 prototype inheritance

code sample:

 function object(o){
            function F(){}
            F.prototype = o;
            return new F();
        }
        
        var person = {
            name: "Nicholas",
            friends: ["Shelby", "Court", "Van"]
        };
        
        var anotherPerson = object(person);
        anotherPerson.name = "Greg";
        anotherPerson.friends.push("Rob");
        
        var yetAnotherPerson = object(person);
        yetAnotherPerson.name = "Linda";
        yetAnotherPerson.friends.push("Barbie");
        
        alert(person.friends);   //"Shelby,Court,Van,Rob,Barbie"

3.5 parasitic inheritance

code sample:

 function object(o){
            function F(){}
            F.prototype = o;
            return new F();
        }
 function createAnother(original)
 {
     var clone = object(original);
     clone.sayHi = function()
     {
         alert("hi");
     };
     return clone;
 }
 var person = {
     name: "nicholas",
     friends:["shelby","court","van"]
 };
 var anotherperson = createAnother(person);
 anotherperson.sayHi();

3.6 combination of parasitic inheritance

code sample:

 function object(o){
            function F(){}
            F.prototype = o;
            return new F();
        }
    
        function inheritPrototype(subType, superType){
            var prototype = object(superType.prototype);   //create object
            prototype.constructor = subType;               //augment object
            subType.prototype = prototype;                 //assign object
        }
                                
        function SuperType(name){
            this.name = name;
            this.colors = ["red", "blue", "green"];
        }
        
        SuperType.prototype.sayName = function(){
            alert(this.name);
        };

        function SubType(name, age){  
            SuperType.call(this, name);
            
            this.age = age;
        }

        inheritPrototype(SubType, SuperType);
        
        SubType.prototype.sayAge = function(){
            alert(this.age);
        };
        
        var instance1 = new SubType("Nicholas", 29);
        instance1.colors.push("black");
        alert(instance1.colors);  //"red,blue,green,black"
        instance1.sayName();      //"Nicholas";
        instance1.sayAge();       //29
        
       
        var instance2 = new SubType("Greg", 27);
        alert(instance2.colors);  //"red,blue,green"
        instance2.sayName();      //"Greg";
        instance2.sayAge();       //27