Preface
There are many ways to create objects using Javascript. Now let’s list four of them and list the advantages and disadvantages of each method, so you can choose and use it. Let’s take a look.
Factory model
function createPerson(name, age){ var obj = new Object(); obj.name = name; obj.age = age; return obj; //Be sure to return, otherwise undefined:undefined } var person1 = new createPerson('Young',18); console.log(person1.name + ':' + person1.age);Advantages: Factory pattern can solve the problem of creating multiple similar objects
Disadvantages: The object recognition problem has not been solved (how to determine the type of an object)
Constructor mode
function Person(name,age){ this.name = name; this.age = age; } var person1 = new Person('Young',18); console.log(person1.name + ':' + person1.age);Before talking about her pros and cons, let’s talk about her own story first.
Use constructors as functions
function Person(name,age){ this.name=name; this.age=age; this.sayName=function(){ return this.name; } } //Use var person1 = new Person('Young', 18); person1.sayName(); console.log(person1.name + ':' + person1.age); //Calling Person('Wind', 18); console.log(window.sayName()); //Calling var obj = new Object(); Person.call(obj, 'bird', 100); console.log(obj.sayName());Advantages and disadvantages of constructors
Advantages: Its instance can be identified as a specific type
Disadvantages: Each method must be recreated on each instance. Of course you can change it like this:
function Person(name, age){ this.name = name; this.age = age; this.sayName = sayName; } function saysName(){ return this.name; }Instead, call global functions, so there is no encapsulation. . . The following prototype mode can make up for this shortcoming
Prototype mode
function Person(){ } Person.prototype.name = 'Young'; Person.prototype.age = 18; Person.prototype.sayName = function(){ return this.name; } var person1 = new Person(); console.log(person1.sayName()); var person2 = new Person(); console.log(person1.sayName()); alert(person1.sayName === person2.sayName); //person1 and person2 access the same sayName() function of the same group of attributesAlthough the value saved in the prototype can be accessed through the object instance, the value stored in the prototype cannot be rewrited through the instance object
function Person(){ } Person.prototype.name='Young'; Person.prototype.age=18; Person.prototype.sayName=function(){ return this.name; } var person1=new Person(); var person2=new Person(); person1.name='Wind'; console.log(person1.sayName());//Wind console.log(person2.sayName());//Young alert(person1.sayName==person2.sayName);//true When we call person1.sayName , we will perform two searches in succession. The parser first determines whether the instance person1 has the sayName attribute. If there is, we will call our own attributes. If there is no, we will search for the attributes in the prototype.
function Person(){ } Person.prototype.name='Young'; Person.prototype.age=18; Person.prototype.sayName=function(){ return this.name; } var person1=new Person(); var person2=new Person(); person1.name='Wind'; console.log(person1.sayName());//Wind console.log(person2.sayName());//Young delete person1.name; console.log(person1.sayName());//Young console.log(person2.sayName());//Young Use the hasOwnPropertyType method to detect whether a property exists in the prototype or in the instance. The method is inherited from the Object, true in the instance and false in the prototype.
Use Object.keys() method to enumerate instance properties on objects
function Person(){ } Person.prototype.name='Young'; Person.prototype.age=18; Person.prototype.sayName=function(){ return this.name; } var keys=Object.keys(Person.prototype); console.log(keys);//["name", "age", "sayName"]Pros and cons of prototype mode
Advantages: No need to reiterate every method on each instance
Disadvantages: Very few people use prototype mode alone. . List of questions in detail
function Person(){ } Person.prototype={ constructor:Person, name:'Young', age:18, friends:['Big','Pig'], sayName:function(){ return this.name; } }; var p1=new Person(); var p2=new Person(); p1.friends.push('Mon'); console.log(p1.friends);//["Big", "Pig", "Mon"] console.log(p2.friends);//["Big", "Pig", "Mon"] It is precisely because instances generally have their own attributes, and we place them in Person.prototype here, so with the modification of p1, the entire instance and prototype are modified. Then, we can use a combination of constructor mode and prototype mode.
Use constructor mode and prototype mode in combination
function Person(name,age){ this.name=name; this.age=age; this.friends=['Big','Pig']; } Person.prototype={ sayName:function(){ return this.name; } }; var p1=new Person('Young',18); var p2=new Person('Wind',78); p1.friends.push('Raganya'); console.log(p1.friends);//["Big", "Pig", "Raganya"] console.log(p2.friends);//["Big", "Pig"] console.log(p1.friends==p2.friends);//false console.log(p1.sayName==p2.sayName);//trueThis pattern is currently the most widely used and most recognized method of creating custom types. is a default mode used to define reference types.
Summarize
The above is all about analyzing the way objects are created in Javascript. The four methods and their advantages and disadvantages have been summarized by this article. I hope it can be helpful for everyone to learn to use Javascript.