javascript面向对象——定义类或对象的几种方式


从语言的视角看,面向对象的编程和面向对象的javascript绝对不是什么现代的东西;从刚开始javascript就 被全面的设计为面向对象的语言

  下面呢,就 介绍一下,定义类或对象的几种方式:

  1 工厂模式

  代码如下

function createcar(iColor,iDoors,iMpg) {
varoTemCar = new Object;
oTemperCar.color = iColor;
oTemperCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor =function(){
alert(this.color) ;
};
returnoTempCar;
}

  调用此函数时,将创建新对象,并赋予它所有必要的属性。例如

  var oCar = creatCar("red",4,23);

  在此方法中,每次调用函数createCar()都会创建新函数showColor ,事实上,每个对象都共享一个函数,可以用如下的例子来解决此问题:

function showColor() {
alert(this.color) ;
};
functioncreatecar(iColor,iDoors,iMpg) {
varoTemCar = new Object;
oTemperCar.color = iColor;
oTemperCar.doors = iDoors;
oTempCar.mpg = iMpg;
oTempCar.showColor = showColor;
returnoTempCar;
}

  用这种方法,在createCar内部,赋予对象一个指向已经存在的showColor()函数的指针,这样就解决了问题。

  2构造函数方式

function Car (iColor,iDoors,iMpg) {
this.color = iColor;
this.doors = iDoors;
this.mpg = iMpg;
this.showColor = function(){
alert(this.color) ;
}
}

  创建方法

  var car = new Car("red",4,23);

  在构造函数内无创建对象,而是使用this关键字。使用new运算符调用构造函数时,在执行第一行代码时先创建一个对象,只有用this关键字才能访问,然后赋予this属性,默认情况下是构造函数的返回值。和工厂模式一样,构造函数会重复生成函数,为每个函数都创建独立的函数版本。

  3 原型模式

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

  创建方法

  var oCar = new Car();

  在次方法中,首先定义构造函数,其中无任何代码。接下来,通过给car的prototype属性添加属性去定义car的属性。从语义上讲,所有属性都属于一个对象,解决了前面两种方法存在的问题,但是这种方法的一个缺点是不能通过给构造函数传递参数初始化属性。

  那么我们就结合前两个方法来看一下下一个方法:

  4 混合构造函数/原型方法

  顾名思义,即用构造函数定义对象的所有非函数属性哦那个,用原型方式定义对象的函数属性。

function Car (iColor,iDoors,iMpg) {
this.color = iColor;
this.doors = iDoors;
this.mpg = iMpg;
}
Car.prototype.showColor = funcion(){
alert(this.color);
}

  创建方法

  var oCar= new Car("red",4,23);

  次方式是最主要的方式,它忽悠其他方式的特性,却没有它们的副作用。

  5动态原型方法

  使用混合的构造函数/原型方式感觉不是那么的和谐,定义类时,大多数面向对象语言都对属性和方法进行了视觉上的封装。动态原型方法的基本思想和混合的构造函数/原型方式基本相同,唯一的区别是赋予对象方法的位置。

function Car (iColor,iDoors,iMpg) {
this.color = iColor;
this.doors = iDoors;
this.mpg = iMpg;
}
if(typeofCar._initializd == "undefined"){
Car.prototype.showColor = funcion(){
alert(this.color);
}
Car._intialized = true;
}
}

  创建方法和上例相同


« 
» 
快速导航

Copyright © 2016 phpStudy | 豫ICP备2021030365号-3