Four Methods for defining objects in JavaScript

I recently read JavaScript advanced programming, and I plan to take some reading notes in the form of a blog. Today we will introduce four methods for defining objects in JavaScript. In addition to these four methods, there are also factory methods for defining objects. However, we will not introduce them here considering their simplicity and non-normality. Compared with an object-oriented language such as Java, JavaScript is more like a functional language. It does not have the concept of classes, rather it is defined by objects, the specific created object is called the object instance.
1) define objects using constructors. This method defines attributes and methods in the constructor. Here is a simple example:

Function Animal (name ){
This. name = name;
This. introduceSelf = function (){
Window. alert ("I am a" + this. name + "! ");
};
}

The object is instantiated as follows: Var dog = new Animal ("dog ");
Dog. introduceSelf ();

Of course, you can also define object Methods outside the constructor, as shown below: Function introduceSelf (){
Window. alert ("I am a" + this. name + "! ");
}
Function Animal (name ){
This. name = name;
This. introduceSelf = introduceSelf ();
}

This method defines all attributes and methods in the constructor, so that the constructor is equivalent to the concept of classes in Java. When the specific definition of a method is placed independently outside the constructor, the object definition and method definition are not closely related. If there are many such methods and object definitions in a file, it will look messy.

2) prototype. This method uses the prototype attribute of an object to view it as the prototype on which the object is created. (For more information about prototype, you can refer to Baidu. There are still a lot of materials in this regard ). In this way, the constructor is made into an empty constructor, and all attributes and methods are directly assigned to the prototype attribute. In the previous example, rewrite the following:

Function Animal (){

}
Animal. prototype. name = "animal ";
Animal. prototype. introduceSelf = function (){
Window. alert ("I am a" + this. name + "! ");
};
// The instance of the object is as follows:
Var dog = new Animal ();
Dog. name = "dog ";
Dog. introductSelf ();

The disadvantage of this method is that you cannot assign values to attributes in the constructor. Another point is that for attributes of reference types (such as Array instances), multiple instantiated objects share one reference. Because of so many problems, this method of object definition is not desirable.

3) constructor and prototype hybrid mode. This method is the most popular object definition method. It combines constructor and prototype. In this way, the constructor is used to define all non-function attributes of an object, and the function attributes (methods) of the object are defined in prototype ). Rewrite the previous example: Function Animal (name ){
This. name = name;
}
Animal. prototype. introduceSelf = function (){
Window. alert ("I am a" + this. name + "! ");
};

4) dynamic prototype. Compared with the constructor and prototype hybrid modes, the dynamic prototype is only different in the position defined by function attributes. Rewrite the previous example:

Function Animal (name ){
This. name = name;
If (typeof Animal. _ initialized = 'undefined '){
Animal. prototype. introduceSelf = function (){
Window. alert ("I am a" + this. name + "! ");
};
Animal. _ initialized = true;
}
}

Among them, _ initialized is the global private attribute of Animal (JavaScript does not have the concept of private attribute, and all attributes are common, but to indicate the private property of some attributes, people are used to adding "_" before the attribute name.), When Animal is instantiated for the first time, the if condition is true, which defines the function attribute in Animal. Because "Animal. _ initialized = true;" exists, the function is called once, regardless of the number of objects to be instantiated.