JavaScript Object creation

I. Overview

Although object literals can be used to create objects, when creating multiple similar objects, it is not elegant enough to conform to the dry principle.

Second, create the object

There are several modes:

1. Factory mode

2. Constructor mode

3. Prototype mode

4. Combine constructors and prototype patterns.

5. Dynamic Prototyping Mode

6. Secure constructor Mode

　　1. Factory mode

function Createperson (name,age,job)        {            var o={                name:name,                age:age,                job:job,                sayself:function () {                    Console.log (this. name+the. age+this.job);                }            };             return  o;        }         var person=createperson ("I am a factory model", "ape");        Person.sayself ();

Pros: You can create multiple similar objects.

Disadvantage: objects cannot be recognized.

2. Constructor mode

　　

 function   person (name,age,job) {             this . Name=name;             this . Age=age;             this . Job=job;  function   () {Console.log ( this . Name+this
    .age+this  .job); }}  var  person=new  person ("        Constructor mode "," Ape "); Person.sayself ();  

Characteristics:

1. 1. The object is not explicitly created, and the properties and methods are given directly to this;
   2. no return;
   3. The letter is capitalized, the general structure function name is capitalized;

To create an instance of the person, you must use the new operator, and the instance of person has the constructor attribute, which points to person ();

　　　　

        Console.log (Person.constructor===person)//true        instanceof//True recommended 

A custom constructor can be identified as a specific type.

　　　　Any function, as long as it is called by new, can be used as a constructor, and the constructor is no different from a normal function.

Pros: Recognizable types.

Cons: Each method should be rebuilt on each instance, and Factory mode also has such problems.

Console.log (person.sayself===person2.sayself); // false

3. Prototype mode

　　　　

(function(){        functionPerson () {} Person.prototype.name= ' prototype mode '; Person.prototype.age= ' 28 '; Person.prototype.job= ' Ape '; Person.prototype.saySelf=function(count) {if(count) console.log (Count+":"+ This. name+ This. age+ This. Job); ElseConsole.log ( This. name+ This. age+ This. Job); }        varperson=NewPerson (); varPerson2=NewPerson ();        Person.sayself ();        Person2.sayself (); Console.log (1,person.sayself===person2.sayself);//trueConsole.log (2,person.prototype.isprototypeof (person));//trueConsole.log (3,object.prototype.isprototypeof (person));//trueConsole.log (4,object.getprototypeof (person) ===person.prototype);//trueConsole.log (8, Person.name); Person.name= "Look at the same"; Person.sayself (9);//9: Look at the immutable 28ApePerson2.sayself (10);//10: Prototype mode 28Ape
        DeletePerson.name; Person.sayself (11);//11: Prototype mode 28ApePerson.__proto__.name= "must have changed now."; Person2.sayself ();//it must be changed now. 28Ape only works in Firefox, Safari, Chrome})();

When a property is added, this property masks the property with the same name as the prototype object. However, you can remove the instance properties from the delete and let the instance regain access to the property. Talk is pale, look at the code above.

The hasOwnProperty () can be used to determine whether a property is an attribute of the instance itself (as distinct from the inheritance from the prototype).

        Console.log (Person.hasownproperty ("name")); // true        Delete Person.name;        Console.log (Person.hasownproperty ("name")); // false

So, how to detect if a property is an attribute of an instance, with the in operator, whether the property is in the instance or in the prototype, returns True

         in person); // true        Delete Person.name;        Console.log ( in person); // true

You can use the Object.keys () method to return a string array of all enumerable properties .

If desired, all properties can be object.getownpropertynames ();

The common denominator of the two methods is to list their own attributes and not to find the prototype chain;

Different points: the Object.keys () method returns an enumerable property, andObject.getownpropertynames () returns the keys for all properties.

        person2.sex= "Male";        Console.log (Object.keys (person.prototype). Join (";")); // name;age;job;sayself        Console.log (Object.getownpropertynames (person.prototype). Join (";")); // constructor;name;age;job;sayself        Console.log (Object.keys (Person2). Join (";")); // Sex        Console.log (Object.getownpropertynames (Person2). Join (";")); // Sex

The dynamic nature of the prototype, this is very well understood, the prototype is simply quoted, dynamically added, of course usable.

However, after instantiating an object, and then rewriting a prototype, the instance still points to the original prototype.

 //The dynamic nature of prototypes(function(){        functionPerson () {} Person.prototype.name= ' prototype mode '; Person.prototype.age= ' 28 '; Person.prototype.job= ' Ape '; Person.prototype.saySelf=function(count) {if(count) console.log (Count+":"+ This. name+ This. age+ This. Job); ElseConsole.log ( This. name+ This. age+ This. Job); }        varperson=NewPerson (); Console.log (Object.getownpropertynames (person.__proto__). Join (";")); Person.prototype={constructor:person, sex:Man        }        varPerson2=NewPerson (); Console.log (Object.getownpropertynames (person.__proto__). Join (";")); Console.log (Object.getownpropertynames (person2.__proto__). Join (";")); })();

View Code

　　

Pros: Shared method, can be used isprototypeof detection is a prototype, in ES5, can be used getprototypeof to get the prototype.

Disadvantage: You cannot have your own attributes. This fatal disadvantage leads to basic no one using prototype mode.

4. Combine constructors and prototype patterns.

functionPerson (name,age,job) { This. name=name;  This. age=Age ;  This. job=job;} person.prototype={Constructor:person, sayself:function() {Console.log ( This. name+ This. age+ This. Job);        }        }; Person.static=function() {Console.log ("This is a static method"); }        varperson=NewPerson (); Person.static ();//This is a static methodPerson.static ();//uncaught typeerror:undefined is not a function

This pattern solves all of these drawbacks and has all of these advantages, and is the most widely used method of creating your own definition type in JavaScript. is a default pattern that defines a reference type to define.

　　5. Dynamic Prototyping Mode

    //Dynamic Prototyping Mode(function(){        functionPerson (name,age,job) { This. name=name;  This. age=Age ;  This. job=job; if(typeof  This. sayself!== "Function") {Person.prototype.saySelf=function() {Console.log ( This. Name + This. Age + This. Job); }}}varperson=NewPerson ("Factory mode", "FRONTENDPE"); varPerson2=NewPerson ("Factory mode AC", "Frontendape");        Person.sayself ();    Person2.sayself (); })();

Pros: Encapsulate the prototype in the constructor.

Cons: Each instantiation is judged once (this is nothing).

6.　　 Secure constructor mode　　

    //Secure Constructor Mode(function(){        functionPerson (name) {varo={}; //You can add private methods and variablesO.sayname=function() {console.log (name); }            returno; }        varPerson=person ("Factory mode")); varPerson2=person ("Factory mode AC");        Person.sayname ();        Person2.sayname (); varsay=Person2.sayname;    Say (); })();

Secure object: An object that has no public properties.

The Name property has only Sayname () closure access

Iii. Summary

Combined with the above, we recommend the use of 4. Combination constructors and prototype patterns and 5. Dynamic prototype mode.

They all have the following advantages:

1. All objects can be identified.

2. All can have their own attribute values (constructor) and shared properties (prototype)

JavaScript Object creation