浅析JavaScript继承方式

      前段时间温故了下JavaScript 的写类方式，从这篇开始我们看看JavaScript 的继承方式。

      面向对象的语言多数都支持继承，继承最重要的优点就是代码复用，从而构建大型软件系统。如果一个类能够重用另一个类的属性和或方法，就称之为继承。从这个角度来看看JS的继承方式。JS中继承方式与写类方式息息相关。不同的写类方式造成不同的继承方式。各种流行JavaScript库继承方式也各不相同。从最简单的复用开始。

      1、构造函数方式写类，通过方法调用复制父类属性/字段到子类 实现继承

      这里父类，子类都采用构造函数方式写，不用原型。子类调用父类函数来复制父类的属性。

 

/** * 父类Polygon:多边形 * @param {Object} sides */ function Polygon(sides) { this.sides = sides; this.setSides = function(s) {this.sides=s;} } /** * 子类Triangle:三角形 */ function Triangle() { this.tempfun = Polygon;//父类引用赋值给子类的一个属性tempfun this.tempfun(3);//调用 delete this.tempfun;//删除该属性 this.getArea = function(){}; } //new个对象 var tri = new Triangle(); console.log(tri.sides);//继承的属性 console.log(tri.setSides);//继承的方法 console.log(tri.getArea);//自有的方法 //缺点是对于Triangle的实例对象用instanceof为父类Polygon时是false console.log(tri instanceof Triangle);//true console.log(tri instanceof Polygon);//false

       因为 JavaScript中具名函数的多种调用方式 ，子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。

function Triangle() { Polygon.call(this,3); //call方式调用父类 this.getArea = function(){}; } function Triangle() { Polygon.apply(this,[3]); //apply方式调用父类 this.getArea = function(){}; } function Triangle() { var temp = new Polygon(3); //new方式调用父类 for(atr in temp) { //全部复制给子类 this[atr] = temp[atr]; } this.getArea = function(){}; }

      这种方式的缺点是子类的实例对象用instanceof检查父类时总是false。这与java中继承"is a "的关系是违背的。

      2、原型方式写类，原型方式继承

      core JS自身的对象系统就是采用原型方式(prototype based)继承的。或者说core JS没有采用常见的类继承(class based)系统，而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承，代码复用以构建自己的功能模块。

/** * 父类Polygon:多边形 * */ function Polygon() {} Polygon.prototype.sides = 0; Polygon.prototype.setSides = function(s) {this.sides=s;} /** * 子类Triangle:三角形 */ function Triangle() {} Triangle.prototype = new Polygon(); //这是原型继承关键的一句 Triangle.prototype.getArea = function(){} //new个对象 var tri = new Triangle(); console.log(tri.sides);//继承的属性 console.log(tri.setSides);//继承的方法 console.log(tri.getArea);//自有方法 //instanceof测试 console.log(tri instanceof Triangle);//true，表明该对象是三角形 console.log(tri instanceof Polygon);//true，表明三角形也是多边形

      虽然从输出可以看出子类继承了父类Polygon的属性sides和方法setSides，但sides是0，怎么会是三角形呢。还得调用下tri.setSides(3)使之成为三角形。这样似乎很不方便。不能传参数，即是原型方式的缺点。优点是正确的维护了"is a"的关系。

      3、组合构造函数/原型方式写类，采用前面种方式继承

      这种方式父类，子类的属性都挂在构造函数里，方法都挂在原型上。

/** * 父类Polygon:多边形 */ function Polygon(sides) { this.sides = sides; } Polygon.prototype.setSides = function(s) {this.sides=s;} /** * Triangle 三角形 * @param {Object} base 底 * @param {Object} height 高 */ function Triangle(base,height) { Polygon.call(this,3);//复制父类属性给自己 this.base = base; this.height = height; } Triangle.prototype = new Polygon();//复制父类方法给自己 Triangle.prototype.getArea = function(){ //最后定义自己的方法 return this.base*this.height/2; } //new个对象 var tri = new Triangle(12,4); console.log(tri.sides);//继承的属性 console.log(tri.setSides);//继承的方法 console.log(tri.base);//自有属性 console.log(tri.height);//自有属性 console.log(tri.getArea);//自有方法 //instanceof测试，表明正确的维护了"is a"的关系 console.log(tri instanceof Triangle);//true，表明该对象是三角形 console.log(tri instanceof Polygon);//true，表明三角形也是多边形

      这篇开始写几个工具函数实现类的扩展。每个工具函数都是针对特定的写类方式(习惯)。这篇按照构造函数方式写类：属性(字段)和方法都挂在this上。以下分别提供了个类，分别作为父类和子类。

// 父类Person function Person(nationality) { this.nationality = nationality; this.setNationality = function(n) {this.nationality=n;}; this.getNationality = function() { return this.nationality;}; } // 类Man function Man(name) { this.name = name; this.setName = function(n){this.name=n;}; this.getName = function(){return this.name;}; }

      继承工具函数一

/** * @param {Function} subCls 子类 * @param {Function} superCls 父类 * @param {Object} param 父类构造参数 */ function extend(subCls,superCls,param) { superCls.call(subCls.prototype,param); }

      使用如下

extend(Man,Person,'China'); var m = new Man('jack'); console.log(m.nationality);//China console.log(m.setNationality('Japan')); console.log(m.getNationality('Japan'));//Japan

     输出可以看到Man继承了Person的属性及所有方法。这种继承方式于java的很不一样哦，

class Animal { int legs; Animal(int l) { legs = l; } int getLegs() { return legs; } } public class Person extends Animal{ //属性（字段） String name; //构造方法（函数） Person(int legs, String name) { super(legs);//调用父类构造器 this.name = name; } //方法 String getName() { return this.name; } public static void main(String[] args){ Person p = new Person(2,"jack"); System.out.println(p.legs); } }

      Java中，子类Person在自身构造方法中调用父类构造方法super(legs)，创建对象的时候直接将父类构造参数legs:2传进去，不仅仅只传自己的name:jack。上面JavaScript继承是在extend时传父类构造参数(extend函数的第三个参数)，而不是在new Man时将父类构造参数传过去。好，模拟Java来实现下extend，这里巧妙的在子类上暂存了父类引用。

      继承工具函数二

/** * @param {Function} subCls * @param {Function} superCls */ function extend(subCls,superCls) { subCls.supr = superCls; }

       还是以Person为父类，来实现子类Woman

function Woman(nationality,name) { Woman.supr.call(this,nationality); //和java有点类似哦，在子类中调用父类构造器 this.name = name; this.setName = function(n){this.name=n;}; this.getName = function(){return this.name;}; } <br>extend(Woman,Person);<br>

       最后，创建对象的方式和java也类似，即new的时候同时将父类构造参数(nationality:Japan)传进去。

var w = new Woman('Japan','lily'); console.log(w.nationality);//Japan w.setNationality('U.S.A'); console.log(w.getNationality());//U.S.A

      继承工具函数三

/** * @param {Function} subCls * @param {Function} superCls */ function extend(subCls,superCls) { subCls.prototype = new superCls(); } //父类，按原型方式写，即属性和方法都挂在原型上。 /** * 父类Person */ function Person(){} Person.prototype.nationality = 'China'; Person.prototype.getNationality = function() { return this.nationality; } Person.prototype.setNationality = function(n) { this.nationality = n; } //子类继承与父类 function Man() {} extend(Man,Person); //继承父类的属性和方法后，再添加子类自有属性，方法 Man.prototype.name = 'jack'; Man.prototype.getName = function() { return this.name;} Man.prototype.setName = function(n) { this.name=n;} //测试如下， var m = new Man(); console.log(m); console.log(m instanceof Person); //可以看到这种写类方式，继承方式完全采用原型机制。

      继承工具函数四

      这种方式是目前比较流行的，51ditu网站的开发就是按照这种模式的。

/** * @param {Function} subCls 子类 * @param {Function} superCls 父类 */ function extend(subCls,superCls) { //暂存子类原型 var sbp = subCls.prototype; //重写子类原型--原型继承 subCls.prototype = new superCls(); //重写后一定要将constructor指回subCls subCls.prototype.constructor = subCls; //还原子类原型 for(var atr in sbp) { subCls.prototype[atr] = sbp[atr]; } //暂存父类 subCls.supr = superCls; } //按 构造函数+原型 方式写类，即属性挂在this上，方法挂在prototype上。 /** * 父类Person */ function Person(nationality){ this.nationality = nationality; } Person.prototype.getNationality = function() { return this.nationality; } Person.prototype.setNationality = function(n) { this.nationality = n; } /** * 子类Man */ function Man(nationality,name) { Man.supr.call(this,nationality); //很重要的一句，调用父类构造器 this.name = name; } Man.prototype.getName = function() {return this.name;} Man.prototype.setName = function(n) {this.name=n;} //注意子类Man中要显示的调用父类构造器已完成父类的属性/字段拷贝。 //extend调用，创建Man的实例 extend(Man,Person); var m = new Man('USA','jack'); console.log(m); m.setName('lily'); console.log(m.name);

      继承工具函数五

/** * @param {String} className * @param {String/Function} superClass * @param {Function} classImp */ function $class(className, superClass, classImp){ if(superClass === "") superClass = Object; var clazz = function(){ return function(){ if(typeof this.init == "function"){ this.init.apply(this, arguments); } }; }(); var p = clazz.prototype = new superClass(); var _super = superClass.prototype; window[className] = clazz; classImp.apply(p, [_super]); } //定义父类Person /** * 父类 Person */ $class('Person','',function(){ this.init = function(name){ this.name = name; }; this.getName = function(){ return this.name; }; this.setName = function(name){ this.name = name; } }); //子类Man /** * 子类 Man */ $class('Man', Person, function(supr){ this.init = function(name, age){ supr.init.apply(this,[name]); // 该句很重要 this.age = age; }; this.getAge = function(){ return this.age; }; this.setAge = function(age){ this.age = age; }; }); var m = new Man('Jack',25); console.log(m.name); // Jack console.log(m.age); // 25

从输出看可以看到子类Man的确继承了父类的属性和方法。

原文链接：http://www.cnblogs.com/snandy/archive/2011/03/09/1977804.html