Js object-oriented Multiple object creation Methods Summary _ js object-oriented

Js object-oriented object creation methods. For more information about how to create an object, see create an object:

1. Object literal volume.

The Code is as follows:

Var clock = {
Hour: 12,
Minute: 10,
Second: 10,
ShowTime: function (){
Alert (this. hour + ":" + this. minute + ":" + this. second );
}
}
Clock. showTime (); // call

2. Create an Object instance

The Code is as follows:

Var clock = new Object ();
Clock. hour = 12;
Clock. minute = 10;
Clock. showHour = function () {alert (clock. hour );};

Clock. showHour (); // call

This shows that attributes can be dynamically added and modified.



Object Creation Mode:

1. Factory mode: it is a function, and then put the parameter, return the object, pipeline work

The Code is as follows:

Function createClock (hour, minute, second ){
Var clock = new Object ();
Clock. hour = hour;
Clock. minute = minute;
Clock. second = second;
Clock. showHour = function (){
Alert (this. hour + ":" + this. minute + ":" + this. second );
};
Return clock;
};
Var newClock = createClock (12, 12); // instantiate
NewClock. showHour (); // call

Advantage: The concept of advantage abstraction is finally achieved. But the object type cannot be recognized!

2. constructor Mode

The Code is as follows:

Function clock (hour, minute, second ){
This. hour = hour;
This. minute = minute;
This. second = second;
This. showTime = function (){
Alert (this. hour + ":" + this. minute + ":" + this. second );
}
}
Var newClock = new clock (12, 12 );
Alert (newClock. hour );

Note: This new keyword is required. If it is not added, clock will not be called as a constructor, but just a common function. At the same time, it will also intentionally add an attribute to the external scope of the window, because this inside the constructor has been mapped to the external scope. To ensure security, you can create

The Code is as follows:

Function clock (hour, minute, second ){
If (this instanceof clock ){
This. hour = hour;
This. minute = minute;
This. second = second;
This. showTime = function (){
Alert (this. hour + ":" + this. minute + ":" + this. second );
}
}
Else {
Throw new Error ("please add'new' to make a instance ");
}
}

Constructor disadvantages: Because this pointer changes to the new instance when the object instance. At this time, the method of the new instance also needs to be re-created. If n instances are re-created n times, the same method is required. So let's unveil the prototype.

3. prototype mode

The Code is as follows:

Function clock (hour, minute, second ){
}
Clock. prototype. hour = 12;
Clock. prototype. minute = 12;
Clock. prototype. second = 12;
Clock. prototype. showTime = function (){
Alert (this. hour + ":" + this. minute + ":" + this. second );
}
Var newClock = new clock ();
NewClock. showTime ();

It is important to deeply understand the prototype model,

First, each function has a prototype attribute, which points to the clock. prototype object. By default, this prototype object has a constructor pointing to clock, which is readable and writable. When we instantiate an object, in addition to the attributes and methods defined by the constructor, the instance newClock (note that it is only in the constructor ), another pointer pointing to the prototype of the constructor is called [[prototype] by ECMAScript. In this way, the methods of the prototype object are not in a specific instance during Object Instantiation, because the prototype is not attached to an instance. (There are a lot of nonsense. It doesn't mislead you. Don't dizzy)

Therefore, the object defined in this mode is called newClock when calling a method. showTime (); check whether there are any instances in the instance. If there is any adjustment, no tracing to the prototype, no adjustment, no error, the call fails.

Of course you can write it like this:

The Code is as follows:

Function clock (hour, minute, second ){
}
Clock. prototype = {
Constructor: clock, // You must manually set this attribute, otherwise you will be disconnected from the constructor. There is no meaning for the instance sharing prototype.
Hour: 12,
Minute: 12,
Second: 12,
ShowTime: function (){
Alert (this. hour + ":" + this. minute + ":" + this. second)
}
}
Var newClock = new clock ();
NewClock. showTime ();

Note: the connection between an instance and the constructor prototype is also linked by pointers. Therefore, you can dynamically add and modify the prototype.

This kind of prototype model also has obvious problems. All attributes and methods are shared and objects cannot be embodied. We often think that each object has its own attributes. Therefore, a new model is created based on the first two models.

4. constructor-prototype combination mode.

The Code is as follows:

Function clock (hour, minute, second ){
This. hour = hour;
This. minute = minute;
This. second = second;
}

Clock. prototype. showTime = function () {alert (this. hour + ":" + this. minute + ":" + this. second );}
Var newClock = new clock (12, 12 );
NewClock. showTime ();

Here we put the attribute in the constructor, which makes the object more specific.