Analyze the four ways to create objects in Javascript

Preface

There are many ways to create objects using JavascriptNow Let’s list four of the methods, and list the advantages and disadvantages of each method, so that everyone can choose to use them. Let’s take a look.

Factory pattern

function createPerson(name, age){
 var obj = new Object();
 obj.name = name;
 obj.age = age;
 return obj; //一定要返回，否则打印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: Does not solve the problem of object recognition (how to determine the type of an object)

ConstructorMode

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 the advantages and disadvantages, let me tell you a little story about herself

Using constructors as functions

function Person(name,age){
 this.name=name;
 this.age=age;
 this.sayName=function(){
 return this.name;
 }
 }
 
 //当做构造函数使用
 var person1 = new Person('Young', 18);
 person1.sayName();
 console.log(person1.name + ':' + person1.age);
 
 //当做普通函数调用
 Person('Wind', 18);
 console.log(window.sayName());
 
 //在另一个作用域中调用
 var obj = new Object();
 Person.call(obj, 'bird', 100);
 console.log(obj.sayName());

Constructor Advantages and Disadvantages

Advantages: Can identify its instances as a specific type

Disadvantages:Every Each method must be recreated on each instance. Of course, you can also change it like this:

function Person(name, age){
 this.name = name;
 this.age = age;
 this.sayName = sayName;
 }
 function sayName(){
 return this.name;
 }

is changed to call global function, so there is no encapsulation at all. . . The next Prototype pattern can make up for this shortcoming

Prototype pattern

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和person2访问的是同一组属性的同一个sayName()函数

Although it can be accessed through the object instance and saved in the prototype The value, but the value in the prototype cannot be overridden 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

, two searches will be performed. The parser first determines the instance. Does person1 have attributes of

sayName

? If so, call its own attributes. If not, search for 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. This method is inherited from Object. It is true in the instance and in the prototype. is false.

Use the

Object.keys()

method to enumerate instance properties on an object

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"]

Prototype pattern advantages and disadvantages

Advantages: No need to reiterate every method on every instance

Disadvantages: Few people use the prototype mode alone. . The problem is listed 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 put them here in

Person.prototype

, so as p1 Modified, the entire instance including the prototype has been modified. Well, we can use constructor pattern and prototype pattern in combination.

Using a combination of constructor pattern and prototype pattern

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);//true

This pattern is currently the most widely used and recognized method for creating custom types. method. Is a default mode used to define reference types.

Summarize

The above is the detailed content of Analyze the four ways to create objects in Javascript. For more information, please follow other related articles on the PHP Chinese website!