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);
}

 

 

你可能感兴趣的:(JavaScript,编程,Ajax,prototype,Ruby)