JavaScript继承方式介绍

本篇内容介绍了“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的确继承了父类的属性和方法。

“JavaScript继承方式介绍”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注亿速云网站，小编将为大家输出更多高质量的实用文章！