JavaScript中定义类或对象

来源:互联网 发布:淘宝万艾可 编辑:程序博客网 时间:2024/06/10 06:09

(1)工厂方式
(2)构造函数方式
(3)原型方式
(4)混合的构造函数/原型方式
(5)动态原型方法

(1)工厂方式
原始的方式

var oCar = new Object;oCar.color = "blue";oCar.doors = 4;oCar.mpg = 25;oCar.showColor = function() {  alert(this.color);};

在上面的代码中,创建对象 car。然后给它设置属性。最后一个属性实际上是指向函数的指针,意味着该属性是个方法。执行这段代码后,就可以使用对象 car。

问题:可能需要创建多个 car 的实例。

解决方案:工厂方式

function createCar() {  var factoryCar = new Object;  factoryCar.color = "blue";  factoryCar.doors = 4;  factoryCar.mpg = 25;  factoryCar.showColor = function() {    alert(this.color);  };  return factoryCar;}var Car1 = createCar();var Car2 = createCar();

为函数传递参数
我们还可以修改 createCar() 函数,给它传递各个属性的默认值,而不是简单地赋予属性默认值:

function createCar(Color,Doors,Mpg) {  var factoryCar = new Object;  factory.color = Color;  factoryCar.doors = Doors;  factoryCar.mpg = Mpg;  factoryCar.showColor = function() {    alert(this.color);  };  return factoryCar;}var Car1 = createCar("red",4,23);var Car2 = createCar("blue",3,25);Car1.showColor();       //输出 "red"Car2.showColor();       //输出 "blue"

问题:每次调用函数 createCar(),都要创建新函数 showColor(),意味着每个对象都有自己的 showColor() 版本。而事实上,每个对象都共享同一个函数。

解决方法:

function showColor() {  alert(this.color);}function createCar(Color,Doors,Mpg) {  var factoryCar = new Object;  factory.color = Color;  factoryCar.doors = Doors;  factoryCar.mpg = Mpg;  factoryCar.showColor = showColor;  return factoryCar;}var Car1 = createCar("red",4,23);var Car2 = createCar("blue",3,25);

(2)构造函数方式

function Car(Color,Doors,Mpg) {  this.color = Color;  this.doors = Doors;  this.mpg = Mpg;  this.showColor = function() {    alert(this.color);  };}var Car1 = new Car("red",4,23);var Car2 = new Car("blue",3,25);

构造函数方式与工厂方式的区别:在构造函数内没有创建对象,而是使用 this 关键字。使用 new 运算符构造函数时,在执行第一行代码前先创建一个对象,只有用 this 才能访问该对象。然后可以直接赋予 this 属性,默认情况下是构造函数的返回值(不必明确使用 return 运算符)。

问题:就像工厂函数,构造函数会重复生成函数,为每个对象都创建独立的函数版本。不过,与工厂函数相似,也可以用外部函数重写构造函数,但是这么做语义上无任何意义。这正是下面要讲的原型方式的优势所在。

(3)原型方式
该方式利用了对象的 prototype 属性,可以把它看成创建新对象所依赖的原型。
这里,首先用空构造函数来设置类名。然后所有的属性和方法都被直接赋予 prototype 属性。

function Car() {}Car.prototype.color = "blue";Car.prototype.doors = 4;Car.prototype.mpg = 25;Car.prototype.showColor = function() {  alert(this.color);};var Car1 = new Car();var Car2 = new Car();

在这段代码中,首先定义构造函数(Car),其中无任何代码。接下来的几行代码,通过给 Car 的 prototype 属性添加属性去定义 Car 对象的属性。调用 new Car() 时,原型的所有属性都被立即赋予要创建的对象,意味着所有 Car 实例存放的都是指向 showColor() 函数的指针。从语义上讲,所有属性看起来都属于一个对象,因此解决了前面两种方式存在的问题。
问题:
(1)这个构造函数没有参数。使用原型方式,不能通过给构造函数传递参数来初始化属性的值,因为 Car1 和 Car2 的 color 属性都等于 “blue”,doors 属性都等于 4,mpg 属性都等于 25。这意味着必须在对象创建后才能改变属性的默认值。
(2)属性指向的是对象,而不是函数时,函数共享不会造成问题,但对象却很少被多个实例共享。请思考下面的例子:

function Car() {}Car.prototype.color = "blue";Car.prototype.doors = 4;Car.prototype.mpg = 25;Car.prototype.drivers = new Array("Mike","John");Car.prototype.showColor = function() {  alert(this.color);};var Car1 = new Car();var Car2 = new Car();Car1.drivers.push("Bill");alert(Car1.drivers);    //输出 "Mike,John,Bill"alert(Car2.drivers);    //输出 "Mike,John,Bill"

上面的代码中,属性 drivers 是指向 Array 对象的指针,该数组中包含两个名字 “Mike” 和 “John”。由于 drivers 是引用值,Car 的两个实例都指向同一个数组。这意味着给 Car1.drivers 添加值 “Bill”,在 Car2.drivers 中也能看到。输出这两个指针中的任何一个,结果都是显示字符串 “Mike,John,Bill”。
解决方案:联合使用构造函数和原型方式。
(4)混合的构造函数/原型方式
用构造函数定义对象的所有非函数属性,用原型方式定义对象的函数属性(方法)。结果是,所有函数都只创建一次,而每个对象都具有自己的对象属性实例。

function Car(Color,Doors,Mpg) {  this.color = Color;  this.doors = Doors;  this.mpg = Mpg;  this.drivers = new Array("Mike","John");}Car.prototype.showColor = function() {  alert(this.color);};var Car1 = new Car("red",4,23);var Car2 = new Car("blue",3,25);Car1.drivers.push("Bill");alert(Car1.drivers);    //输出 "Mike,John,Bill"alert(Car2.drivers);    //输出 "Mike,John"

所有的非函数属性都在构造函数中创建,意味着能够用构造函数的参数赋予属性默认值了。因为只创建 showColor() 函数的一个实例,所以没有内存浪费。此外,给 Car1 的 drivers 数组添加 “Bill” 值,不会影响到 Car2 的数组,所以输出这些数组的值时,Car1.drivers 显示的是 “Mike,John,Bill”,而 oCar2.drivers 显示的是 “Mike,John”。
(5)动态原型方法
动态原型方法的基本想法与混合的构造函数/原型方式相同,即在构造函数内定义非函数属性,而函数属性则利用原型属性定义。唯一的区别是赋予对象方法的位置。

function Car(sColor,iDoors,iMpg) {  this.color = sColor;  this.doors = iDoors;  this.mpg = iMpg;  this.drivers = new Array("Mike","John");  if (typeof Car._initialized == "undefined") {    Car.prototype.showColor = function() {      alert(this.color);    };    Car._initialized = true;  }}

直到检查 typeof Car._initialized 是否等于 “undefined” 之前,这个构造函数都未发生变化。这行代码是动态原型方法中最重要的部分。如果这个值未定义,构造函数将用原型方式继续定义对象的方法,然后把 Car._initialized 设置为 true。如果这个值定义了(它的值为 true 时,typeof 的值为 Boolean),那么就不再创建该方法。简而言之,该方法使用标志(_initialized)来判断是否已给原型赋予了任何方法,只创建并赋值一次。

原创粉丝点击