JS Object-Oriented-Dynamic Prototype Model and Parasitic Construction Model

Keywords: Javascript

Dynamic prototype model

The combination of constructor model and prototype model makes OO language programmers confused when they see independent constructors and prototypes. Dynamic prototype model is devoted to solving this problem. It encapsulates all information in the constructor, initializes the prototype in the constructor (only if necessary), and uses the advantages of the constructor and prototype.

The example code is as follows:

<!DOCTYPE html>
<html>
<head>
    <title>Dynamic prototype model</title>
    <script type="text/javascript">
        //Dynamic prototype model: encapsulate all information in constructors. By initializing the prototype in the constructor (only if necessary), the advantages of using both the constructor and the prototype model are maintained.    
        function Student(name,age,sex){            
            this.name=name;
            this.age=age;
            this.sex=sex;
            this.friends=["Kitty","Court"];    
            if(typeof this.sayName!="function"){
                //Cannot rewrite prototypes using object literals
                Student.prototype.sayName=function(){
                alert(this.name);
                };
            }
        }

        var stu1=new Student("Lucy",10,"girl");
        stu1.sayName();
        var stu2=new Student("Bob",9,"boy");
        stu2.sayName();        
        stu1.friends.push("Van");
        alert(stu1.friends);//"Kitty,Court,Van"
        alert(stu2.friends);//"Kitty,Court"
        alert(stu1.friends===stu2.friends);//false
        alert(stu1.sayName===stu2.sayName);//true
    </script>
</head>
<body>
</body>
</html>

Parasitic constructor model

The basic idea: Create a function that simply encapsulates the code that creates the object and then returns the newly created object.

The following code illustrates the basic idea of the model:

<!DOCTYPE html>
<html>
<head>
    <title>Parasitic constructor model</title>
    <script type="text/javascript">            
        function Student(name,age,sex){    
            var  o=new Object();    
            o.name=name;
            o.age=age;
            o.sex=sex;
            o.friends=["Kitty","Court"];    
            o.sayName=function(){
                alert(this.name);
                };
            return o;
        }

        var stu1=new Student("Lucy",10,"girl");
        stu1.sayName();
        alert(stu1 instanceof Student);    //false
        alert(stu1 instanceof Object);//true
    </script>
</head>
<body>
</body>
</html>

Note: there is no relationship between the returned object and the constructor or the prototype property of the constructor; that is, the object returned by the constructor is not different from the object created outside the constructor. The instanceof operator cannot be relied on to determine the object type.

This pattern is often used to create constructors for objects in special situations.

Posted by yakk0 on Tue, 01 Oct 2019 18:46:42 -0700