Catalog

Several common ways to create objects for js are:

1. Create objects through {}

2. Creating objects through new Object()

3. Creating Objects with Literal Quantity

4. Creating Objects Using Factory Mode

5. Creating objects through constructors

6. Creating Objects by Prototype Mode

7. Creating Objects by Prototype+Constructor

Several common ways to create objects for js are:

1. {}
2. new Ｏbject()
3. Use Literal Quantity
4. Factory Mode
5. constructor mode
6. prototype
7. Constructor + Prototype Mode

There are also less commonly used methods, such as dynamic prototypes, parasitic constructors, and secure constructors.

1. Create objects through {}

demo1:

    <script>
        'use strict'; //Use strict mode

        /**
        Creating an object with {} is equivalent to a new Object();
        **/
        var o = {};

        o.name = 'jack';
        o.age = 20;

        o.sayName = function(){
            alert(this.name);
        }

        alert(o.name+'-'+o.age);

        o.sayName();

    </script>

  This is convenient if the object does not need to be created repeatedly.

2. Creating objects through new Object()

 demo2:  

<script>
        'use strict';
        // Creating objects with new Object()
        var o = new Object();
        o.name = "zhangsna";
        o.sayName = function(){
            alert(this.name);
        }

        o.sayName();

        alert('o instanceof Object>>>>>>>>>>>'+(o instanceof Object));//true
        alert("typeof o >>>>> "+typeof o);//object
    </script>

 

3. Creating Objects with Literal Quantity

Object literal variables are a short form of object definition, for example:

<script>

     var person = {
     name: 'zhang', 
     age:20}

</script>

  This is the literal equivalent of var person = {}; person.name='zhang'; person.age=20;

Summary: There are two problems with the first three ways to create objects: 1. Code redundancy; 2. Methods in objects cannot be shared, and methods in each object are independent.

4. Creating Objects Using Factory Mode

This method solves the problem of code redundancy in the first three ways by using a function to create objects and reduce duplicate code, but the problem that methods cannot be shared still exists.

 demo4:

    <script>
        'use strict';

        // Creating objects using factory mode
        // Define a factory method
        function createObject(name){
            var o = new Object();
            o.name = name;
            o.sayName = function(){
                alert(this.name);
            };
            return o;
        }

        var o1 = createObject('zhang');
        var o2 = createObject('li');

        //Disadvantages: call different methods or not
        //Benefits: Solves the previous code duplication problem
        alert(o1.sayName===o2.sayName);//false

    </script>

5. Creating objects through constructors

The so-called constructor is also a common function, but it is conventionally accepted that the name of a constructor is capitalized and the first letter of a common function is lowercase. Create objects from the new constructor.

demo5:

 

    <script>
        'use strict';

        /**
         *  Constructor Mode Create Object
         **/
        function Person(name){
            this.name = name;
            this.sayName = function(){
                alert(this.name);
            };
        }

        var p1 = new Person('zhang');
        var p2 = new Person('li');

        p1.sayName();
        p2.sayName();

        alert(p1.constructor === p2.constructor);//true
        alert(p1.constructor === Person);//true

        alert(typeof(p1));//object

        alert(p1 instanceof Object); //true
        alert(p2 instanceof Object); //trueb

        alert(p1.sayName===p2.sayName);//false

    </script>

Memory model:

 

 

From the memory model, you can see that the sayName function exists independently of each object, so the p1.sayName===p2.sayName result is false or there is no solution to the problem that cannot be shared.

6. Creating Objects by Prototype Mode

Each method has a prototype, and each prototype has a constructor that points to the method.

For instance:

function Animal(){}
alert(Animal.prototype.constructor==Animal);//true

Prototype creation object:

demo6:

    <script>
        'use strict';

        /*
         *  Prototype pattern creation object
         */
        function Animal() { }

        Animal.prototype.name = 'animal';
        Animal.prototype.sayName = function () { alert(this.name); };

        var a1 = new Animal();
        var a2 = new Animal();

        a1.sayName();

        alert(a1.sayName === a2.sayName);//true
        alert(Animal.prototype.constructor);//function Animal(){}
        alert(Animal.prototype.constructor==Animal);//true
    </script>

  Create objects through prototypes, bind properties and methods to prototypes, and create objects in this way, which is shared, and each object calls the same method.

Memory model:

  If you add an attribute to a new object, it is placed in the object, and if there is an attribute with the same name as the prototype, the value of the prototype will not be changed. But when you access this property, you get the value of the object.

Order of access: object itself > prototype of constructor

If the property is not present in the object, access the prototype, and if not in the prototype, continue to access the parent until the Object, and if not, return undefined

demo7:  

    <script>
        'use strict';
        /*
         *  Prototype pattern creation object
         */
        function Animal() { }
        Animal.prototype.name = 'animal';
        Animal.prototype.sayName = function () { alert(this.name); };

        var a1 = new Animal();
        var a2 = new Animal();
        a1.sayName();
        alert(a1.sayName === a2.sayName);//true
        alert(Animal.prototype.constructor);//function Animal(){}
        //Modify a2.name, a1 name will not change
        a2.name = 'dog';
        a2.sayName();//dog
        a1.sayName();//animal
    </script>

Memory model:

 

Objects created this way have problems. If a prototype contains a property of a reference type, if an object modifies the value of that property, the value accessed by all the objects created by the prototype changes.

demo8:

    <script>
        'use strict';

        //Prototype Mode 2
        //Problem: If the prototype contains a reference type
        function Animal (){}
        Animal.prototype = {
            name: 'animal',
            friends: ['dog','cat'],
            sayName: function(){
                alert(this.name);
            }
        };
        var a1 = new Animal();
        var a2 = new Animal();
        a2.friends.push('snake');
        alert(a2.friends);//[dog,cat,snake]
        alert(a1.friends);//[dog,cat,snake]

    </script>

  Memory model:

 

7. Creating Objects by Prototype+Constructor

This method combines the above two methods to solve the problem of code redundancy, methods cannot be shared, and reference types changing values.

demo9:

    <script>
        'use strict';

        function Animal(name){
            this.name = name;
            this.friends = ['dog','cat'];
        }
        Animal.prototype.sayName = function(){
            alert(this.name);
        };
        var a1 = new Animal('d');
        var a2 = new Animal('c');
        a1.friends.push('snake');
        alert(a1.friends);//[dog,cat,snake]
        alert(a2.friends);//[dog,cat]

    </script>

Memory model: