javascript中类的编写规范和继承方式

本人最近正在学习一些跨平台的移动框架，像sencha touch和jquery mobile，需要用到js这块的很多技术，其中对于类表示一直用起来很生疏，于是找了一些这方面的资料，总算是搞明白了，我担心以后可能会忘，就先写在这里，也和大家分享下

好吧，第一次写博客，感觉很僵硬个说

一、类的规范

js中的类声明方式很简单也很混乱，主要是这几种简单的方式 

1.构造函数方式

function car(val)  {
     var x = 5;  //私有变量
     this.color = val;  //通过对象.color访问
     this.run = function() {  //同上，通过对象访问
         alert("run");
     }
}

这种方式可以实现面向对象中类和对象的功能，但是会有性能上的问题，每次 new car(3) 都会创建一次这个对象对应的的属性和方法，每个对象的属性不同符合规范，但是每次都为对象创建独立的函数版本，这样毫无意义，浪费资源

 

2.原型方式

function car() {

}

car.prototype.color = 3;
car.prototype.run = function() {
    alert("run");
}

var car1 = new car();
var car2 = new car(); 

这种方式通过把属性和函数都放到原型中来构建类，虽然解决了函数的重复创建问题，但是弊端更加明显，由于属性在原型中，导致所有对象都共用同一个属性（即修改car1的color,car2的color也会改变），而且这种方式不能传递参数初始化属性

 

3.混合构造函数/原型方式

function car(val) {
    this.color = val;
}
car.prototype.run = function() {
   alert("run");
}

这种方式在原型中声明函数，在构造函数中创建属性，可以在创建对象的时候初始化属性，而且不会重复创建函数，是推荐的方法

 

4.但是有些人看到上面的方法很不爽，因为函数写在function外面感觉很散，于是有人把上面的东东换了种方式

function car(val) {
    this.color = val;
   
    if(typeof car._initialized == "undefined") {
          car.prototype.run = function () {
               alert("run");
          }

          car._initialized = true;
    }
}

这样函数就在创建对象的时候被写到原型里，但是偶还是看第3种比较顺眼

其他的肥猪流方式，都不太靠谱，偶就不记了

 

二、继承

好吧，继承也有很多乱七八糟的方式，有下面这几种

1.对象冒充

function classA(sColor) {
   this.color = sColor;
   this.sayColor = function () {
      alert(this.color);
   }
}

//从classA中继承
function classB(sColor,sName) {
     classA.call(this,sColor); //call方法将classA中的this替换成了classB中的this（这点不懂最好google一下），将classA的构造函数中的属性和函数加载到calasB中

    this.name = sName;
    this.sayName = function() {
             alert(this.name);
   }
}

这种方式可以实现靠谱的继承，但是问题也很明显，就是原型中的函数和属性它是继承不来的，而且要求成员函数必须在构造函数中,用this的方式定义

 

2.原型链

这又是走向了另一个极端，但是值得一看

function classA() {

}
classA.prototype.color = "red";
classA.prototype.sayColor = function() {
      alert(this.color);
};

function classB() {

}
classB.prototype = new classA(); //这句将A中的构造函数中的属性方法和原型中的属性方法都加载到classB中
classB.prototype.name = "";
classB.prototype.sayName = function() {
     alert(this.name);
}

这种方式能将classA中的所有属性和方法都放到classB的原型中，但是原型链有一个很大的问题就是这句classB.prototype = new classA();中的classA()是不允许传递参数的，这样就无法在创建对象的时候初始化属性，而且将属性放到原型中也不符合前面所说的规范

 

3.混合方式

这个是推荐方式

function classA(sColor) {
     this.color = sColor;
}
classA.prototype.sayColor = function() {
     alert(this.color);
}

function classB(sColor,sName) {
      classA.call(this.sColor);
      this.name = sName;
}
classB.prototype = new classA();
classB.prototype.sayName = function() {
      alert(this.name);
};

这里面classB.prototype = new classA();将classA中的所有属性和方法都加载到classB的原型中，而classA.call()则将classA的非原型属性和方法加载到classB中，根据原型与成员变量的优先级规则，classB原型中加载的多余的属性方法（即classA中的非原型属性和方法）会被覆盖掉

 

好吧，以上观点和大部分代码，都来自《JavaScript高级程序设计》作者：Nicholas C.Zakas 译者：曹力 张欣等