Getting started with JavaScript Object creation mode

It is easy to create an object in JavaScript. You can use the object literal or constructor. Common Object creation modes include:

I. Factory model

The factory mode abstracts the process of a specific object and uses functions to encapsulate the details of creating an object through a special interface.

As follows:

Function createAnimal (name, age ){
Var o = new Object ();
O. name = name;
O. age = age;
O. sayName = function (){
Alert (this. name );
    }
Return o;
}

Var cat = createAnimal ("cat", 12 );
Var dog = createAnimal ("dog", 3 );
Although the factory model solves the problem of creating multiple similar cash-outs, it does not solve the problem of object recognition.

II. Constructor mode

In the constructor mode, you can create objects of specific types.

Function Animal (name, age ){
This. name = name;
This. age = age;
This. sayName = function (){
Alert (this. name );
    }
}
Var cat = new Animal ("cat", 12 );
Var dog = new Animal ("dog", 3 );
You can use the constructor attribute of an object or the instanceof operator to identify the object type.

Cat. constructor = Animal // true

Cat instanceof Animal // true
III. Prototype mode

Each function has a prototype attribute. This attribute is a pointer to an object, and its purpose is to include attributes and methods that can be shared by all instances of a specific type.

The advantage of using a prototype object is that all object instances can share its attributes and methods.

Function Animal (){}
Animal. prototype. name = "animal ";
Animal. prototype. age = 1;
Animal. prototype. sayName = function (){
Alert (this. name );
}

Var test1 = new Animal ();
Test1.sayName (); // "animal"

Var test2 = new Animal ();
Test2.sayName (); // "animal"

Alert (test1.sayName === test2.sayName); // true
Or:

Function Animal (){}
Animal. prototype = {
Constructor: Animal,
Name: "animal ",
Age: 1,
SayName: function (){
Alert (this. name );
    }
};
All attributes in the prototype are shared by many instances. By adding an attribute with the same name on the instance, you can hide the corresponding attributes in the prototype. However, for attributes that contain reference type values, the problem is obvious, as shown below:

Function Animal (){}
Animal. prototype = {
Constructor: Animal,
Name: "animal ",
Age: 1,
Hobbies: ["dance", "sing", "play"],
SayName: function (){
Alert (this. name );
    }
};

Var cat = new Animal ();
Var dog = new Animal ();

Cat. hobbies. push ("sleep ");

Alert (cat. hobbies); // "dance", "sing", "play", "sleep"
Alert (dog. hobbies); // "dance", "sing", "play", "sleep"

Alert (cat. hobbies === dog. hobbies); // true
4. Combined use of the constructor mode and prototype mode

Function Animal (name, age ){
This. name = "animal ";
This. age = 1;
This. hobbies = ["dance", "sing", "play"];
}
Animal. prototype = {
Constructor: Animal,
SayName: function (){
Alert (this. name );
    }
};

Var cat = new Animal ("cat", 2 );
Var dog = new Animal ("dog", 3 );

Cat. hobbies. push ("sleep ");

Alert (cat. hobbies); // "dance", "sing", "play", "sleep"
Alert (dog. hobbies); // "dance", "sing", "play"

Alert (cat. hobbies === dog. hobbies); // false
Alert (cat. sayName === dog. sayName); // true
5. Dynamic prototype

Function Animal (name, age ){
This. name = name;
This. age = age;
If (typeof this. sayName! = "Function "){
Animal. prototype. sayName = function (){
Alert (this. name );
        }
    }
}
Var cat = new Animal ("cat", 12 );
Cat. sayName (); // "cat"
When using the dynamic prototype mode, you cannot use the object literal to override the prototype. If the prototype is rewritten when an instance has been created, the connection between the existing instance and the new original type is cut off.

6. Parasitic constructor mode

The basic idea of the parasitic constructor mode is to create a function, which only encapsulates the code for creating an object and then returns the newly created object.

On the surface, this function looks like a typical constructor. In addition to the new operator, this mode is exactly the same as the factory mode. If no value is returned, the constructor returns a new object instance by default. By adding a return statement at the end of the constructor, you can override the value returned when calling the constructor.

Function Animal (name, age ){
Var o = new Object ();
O. name = name;
O. age = age;
O. sayName = function (){
Alert (this. name );
    }
Return o;
}
Var cat = new Animal ("cat", 12 );
Cat. sayName (); // "cat"
Because the returned object has no relationship with the constructor or constructor prototype, you cannot rely on the instanceof operator to determine the object type.

We recommend that you do not use this mode when other modes are available.

7. Safe construction of the function model

The safe constructor mode is similar to the parasitic constructor mode, but there are two differences:

First, the instance method of the newly created object does not reference this;
Second, the new operator is not applicable to calling constructors.
Function Animal (name, age ){
Var o = new Object ();
O. name = name;
O. age = age;
Var msg = "Hello, I'm ";
O. sayName = function (){
Alert (msg + this. name );
    }
Return o;
}
Var cat = new Animal ("cat", 12 );
Cat. sayName (); // "Hello, I'm cat"
The safe constructor mode is suitable for some secure execution environments.