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);//trueWhen 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());//YoungUse 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);//trueThis 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
