This article summarizes the JavaScript object creation pattern. Share it for your reference, as follows:
Creating objects in JavaScript is easy, you can use object literals or constructors. There are several common ways to create objects:
1. Factory model
The factory pattern abstracts the process of concrete objects and uses functions to encapsulate the details of creating objects with special ing interfaces.
as follows:
function createAnimal(name, age) {
var o = new Object();
= name;
= age;
= function() {
alert();
}
return o;
}
var cat = createAnimal("cat", 12);
var dog = createAnimal("dog", 3);
Although the factory model solves the problem of creating multiple similar cashed-out problems, it does not solve the problem of object recognition.
II. Constructor mode
The constructor pattern can create objects of a specific type.
function Animal(name, age) {
= name;
= age;
= function() {
alert();
}
}
var cat = new Animal("cat", 12);
var dog = new Animal("dog", 3);
The object type can be identified using the object's constructor attribute or the instanceof operator.
== Animal // true cat instanceof Animal // true
3. Prototype mode
Each function has a prototype property. This property is a pointer to an object, and the purpose of this object is to contain properties and methods that can be shared by all instances of a particular type.
The advantage of using prototype objects is that all object instances can share the properties and methods it contains.
function Animal() {}
= "animal";
= 1;
= function() {
alert();
}
var test1 = new Animal();
(); // "animal"
var test2 = new Animal();
(); // "animal"
alert( === ); // true
or:
function Animal() {}
= {
constructor: Animal,
name: "animal",
age: 1,
sayName: function() {
alert();
}
};
All attributes in the prototype are shared by many instances. By adding an attribute with the same name to the instance, the corresponding attributes in the prototype can be hidden. However, for properties containing reference type values, the problem is more obvious, as follows:
function Animal() {}
= {
constructor: Animal,
name: "animal",
age: 1,
hobbies: ["dance", "sing", "play"],
sayName: function() {
alert();
}
};
var cat = new Animal();
var dog = new Animal();
("sleep");
alert(); // "dance", "sing", "play", "sleep"
alert(); // "dance", "sing", "play", "sleep"
alert( === ); // true
IV. Combining constructor mode and prototype mode
function Animal(name, age) {
= "animal";
= 1;
= ["dance", "sing", "play"];
}
= {
constructor: Animal,
sayName: function() {
alert();
}
};
var cat = new Animal("cat", 2);
var dog = new Animal("dog", 3);
("sleep");
alert(); // "dance", "sing", "play", "sleep"
alert(); // "dance", "sing", "play"
alert( === ); // false
alert( === ); // true
V. Dynamic Prototype Mode
function Animal(name, age) {
= name;
= age;
if(typeof != "function") {
= function() {
alert();
}
}
}
var cat = new Animal("cat", 12);
(); // "cat"
When using dynamic prototype mode, you cannot rewrite the prototype using object literals. If the prototype is rewrited if an instance has been created, the connection between the existing instance and the new prototype is cut off.
VI. Parasitic constructor pattern
The basic idea of the parasitic constructor pattern is to create a function whose function simply encapsulates the code that creates the object and then returns the newly created object.
On the surface, this function looks like a typical constructor. Except for using the new operator, this pattern looks exactly the same as the factory pattern. The constructor returns a new object instance by default without returning a value. By adding a return statement at the end of the constructor, the value returned when calling the constructor can be overridden.
function Animal(name, age) {
var o = new Object();
= name;
= age;
= function() {
alert();
}
return o;
}
var cat = new Animal("cat", 12);
(); // "cat"
Since the returned object has no relationship with the constructor or the prototype of the constructor, the instanceof operator cannot be relied on to determine the object type.
It is recommended that other modes cannot be used.
7. Stable constructor mode
The safe constructor pattern is similar to the parasitic constructor pattern, but there are two differences:
First, the instance method of the newly created object does not refer to this;
Second, the new operator is not applicable to calling the constructor.
function Animal(name, age) {
var o = new Object();
= name;
= age;
var msg = "Hello, I'm ";
= function() {
alert(msg + );
}
return o;
}
var cat = new Animal("cat", 12);
(); // "Hello, I'm cat"
The safe constructor pattern is suitable for certain safe execution environments.
For more information about JavaScript, please view the special topic of this site: "JavaScript object-oriented tutorial》、《Summary of json operation skills in JavaScript》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript animation special effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》
I hope this article will be helpful to everyone's JavaScript programming.