JavaScript学习笔记之一：类的定义

对于JavaScript，可以说是爱恨交加。很早就开始接触JS了，大概还是在上大学的时候，就曾经学过一段时间的JS，写过一些小函数做网页输入验证之类的工作。此后在工作中曾经几番使用过JS，但都是浅尝辄止，没有深入学习。有一段时间甚至还有十分痛恨JS，因为不熟悉它，经常遇到一些莫名奇妙让问题，调试起来又很困难，真是让人抓狂！做薄荷网 之后，需要使用JS的地方很多，尤其是要实现一下交互要求比较高的场合，例如动态页面效果、Ajax、Flash编程等，没有JS帮助是不可能的。而现在，前端技术已经成为我们的一个瓶颈，因此必须好好的把它掌握了。

 

这两天把那本经典的《JavaScript高级程序设计》仔细翻了一遍，感觉收获很多。也许是使用了同为动态脚本语言的Ruby的缘故，感觉一些以前挺难理解的东西现在变得很自然了。

 

JavaScript类的定义和其它面向对象语言C++，Java比起来显得很古怪，而且有多种方式。

第1种是工厂方式， 用函数生成对象，示例代码如下：

function createCar() {
   var car = new Object;
   car.color = 'red';
   car.showColor = function() {
       alert(this.color);
   }
}

var car1 = createCar();
var car2 = createCar();
car1.showColor();

 这种方式看起来不像类定义，生成对象的时候也不直观，最大的缺点是在每次生成对象的时候重复生产对象的方法，很低效。

 

第2种是构造函数方式 ，使用了new运算符，示例代码如下：

function Car(sColor) {
    this.color = sColor;
    this.showColor = function() {
       alert(this.color);
    }
}

var car1 = new Car('red');
var car2 = new Car('blue');
car1.showColor();

 这种方法使用了new运算符，生成对象比较直观。new Car('red')时，一开始程序自动生成一个Object的实例赋给this,最后函数返回this，已生成对象。这种方法有和工厂方式同样的问题，就是对象的方法是重复定义的，低效。

 

第3种是原型方式 ，使用对象的prototype属性，示例代码如下：

function Car() {
}

Car.prototype.color = 'red';
Car.prototype.showColor = function() {
    alert(this.color);
}

var car1 = new Car();
var car2 = new Car();
car1.showColor();
car2.showColor();
car1.color = 'blue';
car1.showColor();
car2.showColor();

这种方式对象的方法不会重复生成了，但是问题是对象的属性是共享的，比如上面的代码返回的结果将是

red

red

blue

blue

也就是car1和car2其实是共享了color属性，这是不对的。

 

第4种方式，混合构造函数和原型方式 ，构造函数和原型方式都各有其可取的地方，又有其限制，组合起来就可以解决问题了。示例代码如下：

function Car(sColor) {
   this.color = sColor;
}

Car.prototype.showColor = function() {
   alert(this.color);
}

var car1 = new Car('red');
var car2 = new Car('blue');

这种方式可以避免2和3的问题，是定义JavaScript类最常用的方法了。

 

如果需要继承，怎么定义类呢？ 关于继承也有多种方式，具体我就不展开了，下面示例代码是常用的方式：

function Car(sColor) {
   this.color = sColor;
}

Car.prototype.showColor = function() {
   alert(this.color);
}

function BmwCar(sColor,sName) {
     Car.call(this,sColor);
     this.name = sName;
}

BmwCar.prototype = new Car();
BmwCar.prototype.showName = function() {
   alert(this.name);
}