JavaScript面向对象 – 动态原型方法

六

2009

JavaScript面向对象 – 动态原型方法

发布者: seasun

最近在读javascript高级程序设计，其中的对象基础一章感觉讲的很好，下面把其中有用的东西分享一下。

看如下JavaScript构造类的一个示例:

JavaScript代码

function Car(sColor, iDoors, iMpg) {
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function() {
alert(this.color);
}
}
var oCar1 = new Car(‘red’, 4, 23);
var oCar2 = new Car(‘blue’, 3, 25);

function Car(sColor, iDoors, iMpg) {
                               this.color = sColor;
				this.doors = iDoors;
				this.mpg = iMpg;
				this.showColor = function() {
					alert(this.color);
				}
			}
var oCar1 = new Car('red', 4, 23);
var oCar2 = new Car('blue', 3, 25);

这种方法被称为构造函数方式 。简要的说明一下，这段代码声明了一个Car类，oCar1和oCar2为其两个对象。看起来这段代码很是不错，但是注意那个this.showColor = function(){alert(this.color)};

this指代Car的一个对象，也就是说，每一个对象都有一个showColor方法，这势必会造成一种资源浪费。

再来看一种JavaScript构造类的示例:

JavaScript代码

function Car(){
}
Car.prototype.color = “red”;
Car.prototype.doors = 4;
Car.prototype.mpg = 23;
Car.prototype.showColor = function(){
alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();

function Car(){
}
Car.prototype.color = "red";
Car.prototype.doors = 4;
Car.prototype.mpg = 23;
Car.prototype.showColor = function(){
      alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();

这种方法被称为原型方式 。该方法避免了showColor函数被每个对象都创建，而是所有Car类的对象共享这一个函数，然后在调用的时候，使用this关键字找到实例对象的 color，这种方式也有问题，即color,doors和mpg被所有对象共享，如果一个对象修改了color那么其他的对象的color也会相应的改变。

那么显然将二者结合起来就好了:

JavaScript代码

function Car(){
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
}
Car.prototype.showColor = function(){
alert(this.color);
}
var oCar1 = new Car();
var oCar2 = new Car();

function Car(){

      this.color = sColor;

      this.doors = iDoors;

      this.mpg = iMpg;

}

Car.prototype.showColor = function(){

      alert(this.color);

}

var oCar1 = new Car();

var oCar2 = new Car();

这种方式被称为混合的构造函数/原型方法 。

这个代码就没有什么问题了，那么动态原型方法 指的是什么呢？

我们先来看一段java代码:

Java代码

class Car {
public String color = “red”;
public int doors = 4;
public int mpg = 23;
public Car(String color, int doors, int mpg){
this.color = color;
this.doors = doors;
this.mpg = mpg;
}
public void showColor() {
System.out.println(this.color);
}
}

class Car {

      public String color = "red";

      public int doors = 4;

      public int mpg = 23;

      public Car(String color, int doors, int mpg){

              this.color = color;

              this.doors = doors;

              this.mpg = mpg;

      }

      public void showColor() {

               System.out.println(this.color);

      }

}

这是和我们前面JavaScript构造出来的相似的一个java class.由此可见由于java超强的面向对象的机制，已经把这种属性和方法的区别为我们做好了，我们只需要将所有的方法写在class中，然后java处理好剩下的事情。

JavaScript也有一种几乎完全和这段java类似的方法-动态原型方法

JavaScript代码

function Car(sColor,iDoors,iMpg){
this.color = sColor;
this.doors = iDoors;
this.mpg = iMpg;
if(typeof Car._initialized == “undefined”){
Car.prototype.showColor = function(){
alert(this.color);
}
Car._initialized = true.
}
}

function Car(sColor,iDoors,iMpg){

      this.color = sColor;

      this.doors = iDoors;

      this.mpg = iMpg;

      if(typeof Car._initialized == "undefined"){

              Car.prototype.showColor = function(){

                         alert(this.color);

              }

              Car._initialized = true.

      }

}

这回看起来舒服多了吧，不过动态原型方法 在继承的时候有一个问题：

JavaScript代码

function Polygon(iSides) {
this.sides = iSides;
if(typeof Polygon._initialized == “undefined”){
Polygon.prototype.getArea = function(){
return 0;
}
Polygon._initialized = true;
}
}
function Triangle(iBase,iHeight){
Polygon.call(this,3);
this.base = iBase;
this.height = iHeight;
if(typeof Triangle._initialized == “undefined”){
Triangle.prototype = new Polygon();
Triangle.prototype.getArea = function(){
return .5 * this.base * this.height;
}
Triangle._initialized = true;
}
}
var tri1 = new Triangle(3,4);
alert(tri1.getArea());

function Polygon(iSides) {

		this.sides = iSides;

		if(typeof Polygon._initialized == "undefined"){

			Polygon.prototype.getArea = function(){

				return 0;

			}

			Polygon._initialized = true;

		}

	}

	function Triangle(iBase,iHeight){

		Polygon.call(this,3);

		this.base = iBase;

		this.height = iHeight;

		if(typeof Triangle._initialized == "undefined"){

			Triangle.prototype = new Polygon();

			Triangle.prototype.getArea = function(){

				return .5 * this.base * this.height;

			}

			Triangle._initialized = true;

		}

	}

var tri1 = new Triangle(3,4);

alert(tri1.getArea());

这段代码根本就跑不起来，也就是说当

JavaScript代码

var tri1 = new Triangle(3,4);

var tri1 = new Triangle(3,4);

执行的时候，程序会进入Triangle的构造函数中，然后依次执行，此时Triangle的这个对象已经被实例化了，所以当再次调用

JavaScript代码

<strong>Triangle.prototype = new Polygon();</strong>

Triangle.prototype = new Polygon();

自然就会报错了。也就是说，动态原型方法 不适合与继承中子类的构造。

那么修改一下就可以了：

JavaScript代码

function Polygon(iSides) {
this.sides = iSides;
this.type = “Polygon”;
if(typeof Polygon._initialized == “undefined”){
Polygon.prototype.getArea = function(){
return 0;
}
Polygon._initialized = true;
}
}
function Triangle(iBase,iHeight){
Polygon.call(this,3);
this.base = iBase;
this.height = iHeight;
if(typeof Triangle._initialized == “undefined”){
Triangle.prototype.getArea = function(){
return .5 * this.base * this.height;
}
Triangle._initialized = true;
}
}
Triangle.prototype = new Polygon();
var tri1 = new Triangle(3,4);
alert(tri1.getArea());
alert(tri1.type);

function Polygon(iSides) {

		this.sides = iSides;

		this.type = "Polygon";

		if(typeof Polygon._initialized == "undefined"){

			Polygon.prototype.getArea = function(){

				return 0;

			}

			Polygon._initialized = true;

		}

	}

	function Triangle(iBase,iHeight){

		Polygon.call(this,3);

		this.base = iBase;

		this.height = iHeight;

		if(typeof Triangle._initialized == "undefined"){

			Triangle.prototype.getArea = function(){

				return .5 * this.base * this.height;

			}

			Triangle._initialized = true;

		}

	}

	Triangle.prototype = new Polygon();

	var tri1 = new Triangle(3,4);

	alert(tri1.getArea());

       alert(tri1.type);

总之，JavaScript面向对象是JavaScript重要的一关，也是JavaScript高级的重要部分，所以语法特性不是一个语言最重要的部分，而模式，设计，OO这些东西才是学好一门语言的关键。可以看看ext的东西，尤其是源代码(我目前是没看懂)，你就会发现，ext使用类似swing的模式，使用JavaScript这种语言搭建了一个如此庞大的对象的库是多么的强大了。