Five ways to define classes or objects in JavaScript summary _javascript tips

The first way: Factory method

A factory function (factory function) that can create and return objects of a particular type.

 function Createcar (scolor) { 
 var otempcar = new Object; 
 Otempcar.color = Scolor; 
 Otempcar.showcolor = function () { 
 alert (this.color); 
 }; 
 return otempcar; 
 } 
 var oCar1 = Createcar (); 
 var oCar2 = Createcar (); 

When this function is called, it creates a new object and assigns it all the necessary properties. Use this method to create two versions of the car object (OCAR1 and OCar2), and their properties are identical.

Problems with this method:

1 semantics does not appear to be as formal as using the new operator with constructors.

2 You must create a method of the object in this way. each time you call Createcar (), you create Showcolor (), meaning that each object has its own version of Showcolor (), in fact, each object shares the same function.

Some developers define the method of an object outside the factory function, and then point to the method by attributes. Thus avoiding this problem:

function Createcar (scolor) { 
var otempcar = new Object; 
Otempcar.color = Scolor; 
Otempcar.showcolor = Showcolor; 
return otempcar; 
} 
function Showcolor () { 
alert (this.color); 
}

In this rewritten code, the function Showcolor () is defined before the function Createcar (). Within Createcar (), give the object a pointer to an existing Showcolor () function. Functionally, this solves the problem of repeatedly creating objects, but the function does not look like an object's method.

All of these problems have led to the emergence of developer-defined constructors.

The second way: How to construct a function

function car (scolor) { 
this.color = Scolor; 
This.showcolor = function () { 
alert (this.color);} 
; 
} var oCar1 = new Car ("Red"); 
var oCar2 = new Car ("Blue"); 

You may have noticed that the first difference is that there are no objects created inside the constructor, but use the This keyword. When you call a constructor using the new operator, you create an object before the first line of code is executed, and only this is used to access the object. You can then give the this property directly, by default, the return value of the constructor (you do not have to explicitly use the returns operator).

This approach has the same problem as the factory approach in terms of administrative functions.

The Third Way: Prototype mode

function car () { 
} 
Car.prototype.color = "Blue"; 
var oCar1 = new car (); 
var oCar2 = new car (); 

When you call new car (), all the properties of the stereotype are immediately assigned to the object to be created, meaning that all car instances hold pointers to the Showcolor () function. It all seems to belong to an object semantically, so it solves two problems that exist in the previous two ways. In addition, using this method, you can use the instanceof operator to examine the type of object that the given variable points to. Therefore, the following code will output true:

Alert (Ocar instanceof car); Outputs "true"

This is a good way to look, and unfortunately, it's not as satisfactory.

1 First this constructor has no parameters. When using the prototype method, the constructor cannot be passed the value of the parameter initialization property because the Car1 and Car2 properties are equal to "red".

2 The real problem arises when the attribute points to an object, not a function. Function sharing does not cause any problems, but objects are rarely shared by multiple instances.

Fourth Way: Mixed constructors/prototypes (recommended)

Using constructors and prototypes together, you can create objects as you would in other programming languages. The concept is very simple, that is, to define all the non function properties of an object with a constructor, and to define the object's function properties (methods) in a prototype manner.

function car (scolor) { 
this.color =scolor; 
This.drivers =new Array ("Mike", "Sue"); 
} 
Car.prototype.showColor = function () { 
alert (this.color); 
} 
var oCar1 =new car ("red"); 
var oCar2 =new car ("Blue"); 
OCar1.drivers.push ("Matt"); 
alert (ocar1.drivers); Outputs "Mike,sue,matt" 
alert (ocar1.drivers);//outputs "Mike,sue" 

The fifth way: Dynamic prototyping mode (recommended)

For developers who are accustomed to using other languages, it feels less harmonious to use a mixed constructor/prototyping approach. Critics of mixed constructors/prototypes argue that finding a property within a constructor is an unreasonable way to find a method outside. So they designed a dynamic prototyping approach to provide a more user-friendly coding style.

The basic idea of a dynamic prototyping method is the same as a mixed constructor/prototype approach, that is, to define the non function attribute within the constructor, and the function property to use the stereotype attribute definition. The only difference is where the object method is assigned. The following is a car class that is overridden with a dynamic prototyping method:

function car (scolor) { 
this.color =scolor; 
This.drivers =new Array ("Mike", "Sue"); 
if (typeof car._initialized = = "undefined") { 
Car.prototype.showColor = function () { 
alert (this.color); 
} 
} 
Car._initialized = true; 
} 

More than five ways to define a class or object in this JavaScript is a small series to share all the content, hope to give you a reference, but also hope that we support the cloud-dwelling community.