JavaScript中的面向对象----类


本文示例源代码或素材下载

  一、开篇

  (以下文字一部分来自于整理的书籍内容,一部分则是总结自经验)

  众所周之,JavaScript是面向对象的语言。JavaScript的对象有三种:本地对象、内置对象、自定义类的对象。

  其中本地对象和内置对象都是独立于宿主由ECMAScript实现的。这里所说的本地对象和内置对象实际上跟.Net中的类的概念相似。本地对象和内置对象的区别在于本地对象在使用时要实例化,而内置对象就像所谓的静态类,可以直接使用。

  JS中的本地对象有:Object Function Array String Boolean Number Date RegExp

  Error等;内置对象有:Global和Math

  下面着重介绍一下自定义类的五种方式:

  二、在JavaScript中自定义类

  1、工厂方法

functioncreateCar(){
  varoTempCar=newObject();
  oTempCar.color="red";
  oTempCar.doors=4;
  oTempCar.mpg=23;
  oTempCar.showColor=function(){
    alert(this.color);
  }
  returnoTempCar;
}
varoCar1=createCar();
oCar1.showColor();

  缺点:缺点很多,基本上不会用到

  2、构造函数方法

functionCar(sColor,iDoors,iMpg){
  this.color=sColor;
  this.doors=iDoors;
  this.mpg=iMpg;
  this.showColor=function(){
    alert(this.color);
  }
}
varoCar1=newCar("red",4,23);
oCar1.showColor();
alert(oCar1instanceofCar);

  原理:我们所谓的类还是js的一个Function而已,在Function前面用new运算符的时候,会自动创建一个object实例,并且类里面的this都指向这个object,在Function运行结束的时候,将this返回。所以其本质还是工厂方法

优点:看起来和更像一个类 声明实例用new运算符

  缺点:对象的函数会重复生成

  3、原型方式

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

  原理:js中的prototype

  优点:避免了函数的重复创建

  缺点:没有带参数的构造函数 属性如果是引用类型(比如Array),那么一个对象的属性改变,另外一个对象的同一个属性也会跟着改变

  4、构造函数/原型方式

functionCar(sColor,iDoors,iMpg){
  this.color=sColor;
  this.doors=iDoors;
  this.mpg=iMpg;
}
Car.prototype.showColor=function(){
  alert(this.color);
}
varoCar1=newCar("red",4,23);
oCar1.showColor();
alert(oCar1instanceofCar);

  优点:避免了函数的重复创建 并且避免了构造函数方法的引用类型属性的缺点

  缺点:方法在类的外边定义的

  5、动态原型方式

functionCar(sColor,iDoors,iMpg){
  this.color=sColor;
  this.doors=iDoors;
  this.mpg=iMpg;
  if(typeofCar._initialized=="undefined"){
    Car.prototype.showColor=function(){
      alert(this.color);
    }
    Car._initialized=true;
  }
}
varoCar1=newCar("red",4,23);
oCar1.showColor();
alert(oCar1instanceofCar);

原理:Car也可以有属性的 通过_initialized这个标志确保方法只被声明一次

  优点:避免了函数的重复创建 属性和方法都写在类的定义里

  缺点:

  三、我所使用的类

  1、关于私有变量:

  JavaScript中,基本上没法区分私有变量和公共变量,但是可以在命名上区分,一般习惯在私有变量的前后各加上两个下划线 this.__privatePropery__或者是在变量前加一个下划线this._privateProperty。

  2、从构造函数方法衍生

  对于第二种方法——构造函数方法对于私有变量的处理却有很大的优势!它可以将私有变量做到与外部隔离。这种隔离是将私有变量和方法在类里面用var来声明,而共有的变量和方法用赋值给this。

  例子如下:

functionCar(sColor,iDoors,iMpg){
  varself=this;
  this.color=sColor;
  this.doors=iDoors;
  varmpg=iMpg;//私有变量
  this.showCarInfo=function(){
    alert(this.color);
    alert(mpg);//不是this.mpg
  }
  varprivateShowCarInfo=function(){
    //这时只能访问私有变量
    //alert(this.color);//会出错
    alert(mpg);//可以访问
    //那怎么才能访问this.color呢?总不可能私有方法不能访问公共属性吧?
    //在类里面设置一个私有变量,让他指向这个实例//第二行中var self = this;
    alert(self.color);//调用成功//当然公共方法也能访问self
  }
  this.anotherShowCarInfo=function(){
    privateShowCarInfo();
  }
}
varoCar1=newCar("red",4,23);
oCar1.showCarInfo();
oCar1.anotherShowCarInfo();
alert(oCar1instanceofCar);


  总之:this.方法能访问this.属性和var 变量

  Var方法只能访问var变量,需要借助self变量来访问this.属性

  这样的话显得更面向对象了,但是构造函数方法的老毛病还是没有改掉,对象的函数还是会被重复创建,但是我相信在一般情况下这对性能构不成威胁的


« 
» 
快速导航

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