There are several common ways to define classes or objects in JavaScript: factory approach
function createCar(color, doors, mpg){
var tempCar = new Object;
tempCar.color = color;
tempCar.doors = doors;
tempCar.mpg = mpg;
tempCar.showColor = function (){
alert( this .color);
};
return tempCar;
}
var car1 = createCar("red", 4, 23);
var car2 = createCar("blue", 3, 25);
car1.showColor();
car2.showColor();
Defined a factory function that can create and return objects of a specific type. It looks good, but there is a small problem. A new function showColor must be created every time it is called. We can move it outside the function. function showColor(){ alert(this.color); } Point to it directly in the factory function tempCar.showColor = showColor; This avoids the problem of repeatedly creating functions, but it doesn't look like an object method. Constructor mode
function Car(sColor, iDoors, iMpg){
this .color = sColor;
this .doors = iDoors;
this .mpg = iMpg;
this .showColor = function (){
alert( this .color);
};
}
var car1 = new Car("red", 4, 23);
var car2 = new Car("blue", 3, 25);
car1.showColor();
car2.showColor();
You can see the difference from the first method. There is no object created inside the constructor, but the this keyword is used. When calling the constructor using new, an object is first created and then accessed using this. This usage is very similar to other object-oriented languages, but this method has the same problem as the previous one, which is to repeatedly create functions. A hybrid constructor/prototype approach to constructing
This method is to use the constructor method and the prototype method at the same time. Combining their advantages, the constructor method has been introduced before. Now let’s take a look at the prototype method. function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.mpg = 23;
Car.prototype.showColor = function (){
alert( this .color);
};
var car1 = new Car();
var car2 = new Car();
First, the constructor Car is defined without any code, and then the properties are added through the prototype advantage: a. All instances store pointers to showColor, which solves the problem of repeatedly creating functions. b. You can use instanceof to check the object type alert(car1 instanceof Car); //true Disadvantages, add the following code:
Car.prototype.drivers = new Array("mike", "sue");
car1.drivers.push("matt");
alert(car1.drivers); //outputs "mike,sue,matt"
alert(car2.drivers); //outputs "mike,sue,matt"
drivers are pointers to Array objects, and both instances of Car point to the same array.
Let’s use the following mixing method: function Car(sColor, iDoors, iMpg){
this .color = sColor;
this .doors = iDoors;
this .mpg = iMpg;
this .drivers = new Array("mike", "sue");
}
Car.prototype.showColor = function (){
alert( this .color);
};
var car1 = new Car("red", 4, 23);
var car2 = new Car("blue", 3, 25);
car1.drivers.push("matt");
alert(car1.drivers);
alert(car2.drivers);
This way there is no problem, and you can also use instanceof dynamic prototyping
function Car(sColor, iDoors, iMpg){
this .color = sColor;
this .doors = iDoors;
this .mpg = iMpg;
this .drivers = new Array("mike", "sue");
if ( typeof Car.initialized == "undefined"){
Car.prototype.showColor = function (){
alert( this .color);
};
Car.initialized = true ;
}
}
var car1 = new Car("red", 4, 23);
var car2 = new Car("blue", 3, 25);
car1.drivers.push("matt");
alert(car1.drivers);
alert(car2.drivers);
This method is my favorite. All class definitions are completed in a function. It looks very much like class definitions in other languages. Functions will not be created repeatedly. You can also use instanceof
