前段时间温故了下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,表明三角形也是多边形
#p#
这篇开始写几个工具函数实现类的扩展。每个工具函数都是针对特定的写类方式(习惯)。这篇按照构造函数方式写类:属性(字段)和方法都挂在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);
可以看到这种写类方式,继承方式完全采用原型机制。
#p#
继承工具函数四
这种方式是目前比较流行的,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
【编辑推荐】