JavaScript 定义类
在javascript中定义类或对象有下面几种常用的方式:
定义了一个能创建并返回特定类型对象的工厂函数,看起来还是不错的,但有个小问题,每次调用时都要创建新函数showColor,我们可以把它移到函数外面,
function showColor(){
alert(this.color);
}
在工厂函数中直接指向它
tempCar.showColor = showColor;
这样避免了重复创建函数的问题,但看起来不像对象的方法了。
可以看到与第一中方式的差别,在构造函数内部无创建对象,而是使用this 关键字。使用new 调用构造函数时,先创建了一个对象,然后用this来访问。
这种用法于其他面向对象语言很相似了,但这种方式和上一种有同一个问题,就是重复创建函数。
这种方式就是同时使用构造函数方式和原型方式,综合他们的优点,构造函数方式前面介绍过了,现在看一下原型方式
首先定义了构造函数Car,但无任何代码,然后通过prototype 添加属性
优点:
a. 所有实例存放的都是指向showColor 的指针,解决了重复创建函数的问题
b. 可以用 instanceof 检查对象类型
alert(car1 instanceof Car); //true
缺点,添加下面的代码:
这样就没有问题了,并且还可以使用 instanceof
这种方式是我最喜欢的,所有的类定义都在一个函数中完成,看起来非常像其他语言的类定义,不会重复创建函数,还可以用 instanceof
工厂方式
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();
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();
定义了一个能创建并返回特定类型对象的工厂函数,看起来还是不错的,但有个小问题,每次调用时都要创建新函数showColor,我们可以把它移到函数外面,
function showColor(){
alert(this.color);
}
在工厂函数中直接指向它
tempCar.showColor = showColor;
这样避免了重复创建函数的问题,但看起来不像对象的方法了。
构造函数方式
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();
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();
可以看到与第一中方式的差别,在构造函数内部无创建对象,而是使用this 关键字。使用new 调用构造函数时,先创建了一个对象,然后用this来访问。
这种用法于其他面向对象语言很相似了,但这种方式和上一种有同一个问题,就是重复创建函数。
构混合的构造函数/原型方式
这种方式就是同时使用构造函数方式和原型方式,综合他们的优点,构造函数方式前面介绍过了,现在看一下原型方式
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();
}
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();
优点:
a. 所有实例存放的都是指向showColor 的指针,解决了重复创建函数的问题
b. 可以用 instanceof 检查对象类型
alert(car1 instanceof Car); //true
缺点,添加下面的代码:
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是指向Array对象的指针,Car的两个实例都指向同一个数组。
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.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);
动态原型法
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.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);
mrzzcn