This article shares 9 ways to create objects in JavaScript for your reference. The specific content is as follows
【1】Use Object constructor
[Disadvantages] Using the same interface to create many objects will produce a lot of duplicate code
var person = new Object();
person.name = "Nicholas";
person.age = 29;
person.job = "Software Engineer";
person.sayName = function(){
alert(this.name);
}
【2】Use object literals
[Disadvantages] Using the same interface to create many objects will produce a lot of duplicate code
var person = {
name: "Nicholas",
age : 29,
job: "Software Engineer",
sayName: function(){
alert(this.name);
}
};
【3】Factory pattern: Abstracts the process of creating specific objects. Considering that classes cannot be created in ECMAScript, developers invented a function to encapsulate the details of creating objects with a specific interface
[Disadvantages] Solved the problem of creating multiple similar objects, but did not solve the problem of object recognition
function createPerson(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayname = function(){
alert(this.name);
}
return o;
}
var person1 = createPerson('Nicholas',29,'software Engineer');
var person2 = createPerson('greg',27,'doctor');
【4】Constructor mode: No object is created explicitly, attributes and methods are directly assigned to this object, and there is no return statement
[Disadvantages] Each method must be recreated on each instance
function Person(name,age,job){
this.name = name;
this.age = age;
this.jog = job;
this.sayName = function(){
alert(this.name);
};
//与声明函数在逻辑上是等价的
//this.sayName = new Function('alert(this.name)');
}
var person1 = new Person("Nicholas",29,"software Engineer");
var person2 = new Person("Greg",27,"doctor");
【4.1】Constructor expansion mode: transfer function definition outside the constructor
[Disadvantage 1] Functions defined in the global scope can actually only be called by a certain object, which makes the global scope a bit unworthy of its name
[Disadvantage 2] If an object needs to define many methods, it must define many global functions. This custom reference type has no encapsulation at all
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName(){
alert(this.name);
}
var person = new Person('小火柴','20','student')
person.sayName();
console.log(Person);
【5】Prototype pattern: Each function we create has a prototype attribute. This attribute is a pointer pointing to an object, and the purpose of this object is to contain information that can be shared by all instances of a specific type. Properties and methods. If you understand it literally, prototype is the prototype object of the object instance created by calling the constructor
function Person(){
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
}
}
var person1 = new Person();
person1.sayName();//"Nicholas"
var person2 = new Person();
person2.sayName();//"Nicholas"
alert(person1.sayName == person2.sayName);//true
【5.1】Simpler prototype mode: In order to reduce unnecessary input and to better visually encapsulate the functionality of the prototype, rewrite the entire prototype object with an object literal that contains all properties and methods.
[Disadvantage] Resetting the constructor property in this way will cause its [[Enumerable]] attribute to be set to true. The native constructor property is not enumerable by default
function Person(){};
Person.prototype = {
constructor : Person,
name: "Nicholas",
age: 29,
job: "software Engineer",
sayName : function(){
alert(this.name);
}
};
【5.2】Prototype pattern to solve enumerable problems
function Person(){};
Person.prototype = {
name: "Nicholas",
age: 29,
job: "software Engineer",
sayName : function(){
alert(this.name);
}
};
Object.defineProperty(Person.prototype,"constructor",{
enumerable : false,
value : Person
});
[Prototype Pattern Disadvantage 1] Overriding the prototype object cuts off the connection between the existing prototype and the existing object instance, and they still refer to the original prototype.
function Person(){}
var friend = new Person();
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "Software Engineer",
sayName: function(){
alert(this.name);
}
};
friend.sayName();//error
[Prototype Pattern Disadvantage 2] The sharing problem of reference type attributes is prominent
function Person(){}
Person.prototype = {
constructor: Person,
name: "Nicholas",
age: 29,
job: "Software Engineer",
friend : ["shelby","Court"],
sayName: function(){
alert(this.name);
}
};
var person1 = new Person();
var person2 = new Person();
person1.friends.push("Van");
alert(person1.friends);//["shelby","Court","Van"];
alert(person2.friends);//["shelby","Court","Van"];
alert(person1.friends === person2.friends);//true
【6】Composition pattern: Combining constructor pattern and prototype pattern is the most common way to create custom types. Constructor pattern is used to define instance properties, while prototype pattern is used to define methods and shared properties. This mixed mode also supports passing parameters to the constructor and is a default mode used to define reference types
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["shelby","Court"];
}
Person.prototype = {
constructor: Person,
sayName : function(){
alert(this.name);
}
}
var person1 = new Person("Nicholas",29,"Software Engineer");
var person2 = new Person("Greg",27,"Doctor");
person1.friends.push("Van");
alert(person1.friends);// ["shelby","Court","Van"];
alert(person1.friends);// ["shelby","Court"];
alert(person1.friends === person2.friends);//false
alert(person1.sayName === person2.sayName);//true
【7】Dynamic prototype mode: Encapsulate all information in the constructor, and initialize the prototype in the constructor (only when necessary), while maintaining the advantages of using both the constructor and the prototype. In other words, you can decide whether to initialize the prototype by checking whether an existing method is valid.
[Note] When using dynamic prototype mode, object literals cannot be used to override the prototype. If you override the prototype when an instance has already been created, you will break the connection between the existing instance and the new instance
function Person(name,age,job){
//属性
this.name = name;
this.age = age;
this.job = job;
//方法
if(typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
};
}
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();
[8] Parasitic constructor pattern: Create a function that only encapsulates the code that creates the object, and then returns the newly created object
function Person(name,age,job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var friend = new Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"
【Parasite Constructor Pattern Application】Create a special array with additional methods. Since the Array constructor cannot be modified directly, this pattern can be used
function SpecialArray(){
//创建数组
var values = new Array();
//添加值
values.push.apply(values,arguments);
//添加方法
values.toPipedString = function(){
return this.join('|');
};
//返回数组
return values;
}
var colors = new SpecialArray("red","blue","green");
alert(colors.toPipedString());//"red|blue|green"
[9] Safe constructor pattern: The so-called safe object refers to an object that has no public properties and its method does not reference this. Stable objects are best used in some security environments (which prohibit the use of this and new) or to prevent data from being modified by other applications.
function Person(name,age,job){
//创建要返回的对象
var o = new Object();
//可以在这里定义私有变量和函数
//添加方法
o.sayName = function(){
alert(name);
};
//返回对象
return o;
}
//在稳妥模式创建的对象中，除了使用sayName()方法之外，没有其他方法访问name的值
var friend = Person("Nicholas",29,"Software Engineer");
friend.sayName();//"Nicholas"The above are nine ways to create objects in JavaScript. I hope it will be helpful to everyone's learning.
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
