Javascript实现继承的6种方式

一.类式继承

简介：将父类对象的实例赋值给子类的原型，则子类的原型可以访问父类原型上的属性和方法，以及父类构造函数中复制的属性和方法。

//1.类式继承//声明父类function SuperClass() {  this.superValue = true;}//为父类添加公有方法SuperClass.prototype.getSuperValue = function () {  return this.superValue;};//声明子类function SubClass() {  this.subValue = false;}//继承父类SubClass.prototype = new  SuperClass();//将父类对象赋值给子类原型，子类原型可访问父类原型上的属性和方法--类式继承原理//子类添加公有方法SubClass.prototype.getSubValue = function() {  return this.subValue;};//测试var instance = new SubClass();console.log(instance.getSuperValue());//tconsole.log(instance.getSubValue());//f//console.log(instance instanceof SuperClass);//tconsole.log(instance instanceof SubClass);//tconsole.log(SubClass instanceof SuperClass);//fconsole.log(SubClass.prototype instanceof SuperClass);//t

通过instanceof来检测某个对象是否是某个类的实例，或者某个对象是否继承了某个类，这样可以判断对象和类之间的继承关系。instanceof通过判断对象的prototype链来确定这个对象是否是某个类的实例。需要注意的是，inatanceof是判断前面的对象是否是后面类（对象）的实例，并不表示两者的继承。所以console.log(SubCass instanceof SuperClass)会打印出false，而console.log(SubClass.prototype instanceof SuperClass)才会打印出true。

类式继承有两个缺点：

1.子类通过其原型prototype对父类实例化，继承了父类。但当父类中的共有属性是引用类型时，会在子类中被所有的实例共用，如此在一个子类实例中更改从父类中继承过来的公有属性时，会影响到其他子类。

function SuperClass() {  this.book = ['javascript','html','css'];}function SubClass() {}SubClass.prototype = new SuperClass();var ins1 = new SubClass();var ins2 = new SubClass();console.log(ins1.book);console.log(ins2.book);ins1.book.push("Node");console.log("after");//引用类型在子类中被所有实例共用console.log(ins1.book);//[ 'javascript', 'html', 'css', 'Node' ]console.log(ins2.book);//[ 'javascript', 'html', 'css', 'Node' ]

2.由于子类是通过原型prototype实例化父类实现继承的，所以在创建父类的时候，无法向父类传递参数，因而在实例化父类的时候无法对父类构造函数内的属性初始化。

二.构造函数式继承

简介：通过在子类的构造函数中执行一次父类的构造函数实现。

//2.构造函数式继承//声明父类function SuperClass(id) {  this.book = ['javascript','html','css'];//引用类型共有属性  this.id = id;//值类型公有属性}//父类声明原型方法SuperClass.prototype.showBooks = function() {  console.log(this.books);}//声明子类function SubClass(id) {  //继承父类  SuperClass.call(this,id);}//测试var ins1 = new SubClass(1);var ins2 = new SubClass(2);ins1.book.push("Node");console.log(ins1.id);//1console.log(ins1.book);//['javascript', 'html', 'css', 'Node']console.log(ins2.id);//2console.log(ins2.book);//['javascript', 'html', 'css']ins1.showBooks();//TypeError: ins1.showBooks is not a function

SuperClass.call(this,id)是构造函数式继承的中心。call方法可以改变函数的作用环境，在子类中调用这个方法就是将子类中的变量在父类中执行，父类中给this绑定属性，因而子类继承了父类的共有属性。

缺点：

这种类型的继承没有涉及原型prototype，所以父类的原型方法不会被子类继承。如想被子类继承就必须放在构造函数中，这样创造的每个实例都会单独拥有一份而不能共用，违背了代码复用原则。

三.组合式继承

简介：综合以上两种模式的优点，在子类原型上实例化父类，在子类构造函数中执行一遍父类的构造函数。这样融合了类式继承和构造式继承的优点，过滤了缺点。

//3.组合式继承function SuperClass(name) {  this.name = name;  this.book = ['javascript','html','css'];}SuperClass.prototype.getName = function () {  console.log(this.name);};function SubClass(name,time) {  //构造函数式继承，继承父类name属性  SuperClass.call(this,name);  this.time = time;}//类式继承，子类原型继承SubClass.prototype = new SuperClass();//子类原型方法SubClass.prototype.getTime = function () {  console.log(this.time);};//测试var ins1 = new SubClass('Node',2016);ins1.book.push("Node");console.log(ins1.book);ins1.getName();ins1.getTime();var ins2 = new SubClass('React',2015);console.log(ins2.book);ins2.getName();ins2.getTime();

缺点：

父类的构造函数执行了两遍：一次在子类的构造函数中call方法执行一遍，一次在子类原型实例化父类的时候执行一遍。

四.原型式继承

简介：对类式继承的封装，过渡对象相当于子类。

//4.原型式继承function inheritObject(o) {  //声明过渡函数对象  function F() {}  //过渡对象的原型继承父类  F.prototype = o;  return new F();}//测试var book = {  name : "javascript",  book : ['js','css']};var newbook = inheritObject(book);newbook.name = "ajax";newbook.book.push("Node");var otherbook = inheritObject(book);otherbook.name = "xml";otherbook.book.push("React");console.log(newbook.name);//ajaxconsole.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]console.log(otherbook.name);//xmlconsole.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]console.log(book.name);//javascriptconsole.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

缺点：

和类式继承一样，父类对象的引用类型值被共用。

五.寄生式继承

简介：寄生式继承其实是对原型继承的第二次封装，并且在第二次封装的过程中对继承的对象进行了拓展。

//5.寄生式继承function inheritObject(o) {  //声明过渡函数对象  function F() {}  //过渡对象的原型继承父类  F.prototype = o;  return new F();}//声明基对象var book = {  name : "javascript",  book : ['js','css']};function createBook(obj) {  //通过原型继承方式创建新对象  var o = new inheritObject(obj);  //拓展新对象  o.getName = function() {    console.log(name);  }  //返回拓展后的新对象  return o;}var newbook = createBook(book);newbook.name = "ajax";newbook.book.push("Node");var otherbook = createBook(book);otherbook.name = "xml";otherbook.book.push("React");console.log(newbook.name);//ajaxconsole.log(newbook.book);//[ 'js', 'css', 'Node', 'React' ]console.log(otherbook.name);//xmlconsole.log(otherbook.book);//[ 'js', 'css', 'Node', 'React' ]console.log(book.name);//javascriptconsole.log(book.book);//[ 'js', 'css', 'Node', 'React' ]

六.寄生组合式继承

简介：寄生式继承和构造函数式继承结合使用。

//寄生组合式继承function inheritObject(o) {  //声明过渡函数对象  function F() {}  //过渡对象的原型继承父类  F.prototype = o;  return new F();}//寄生式继承 继承原型function inheritPrototype(subClass,superClass) {  //复制一份父类的原型副本保存在变量中  var p = inheritObject(superClass.prototype);  //修正因为重写子类原型导致子类的constructor属性被修改  p.constructor = subClass;  //设置子类的原型  subClass.prototype = p;}function SuperClass(name) {  this.name = name;  this.colors = ["red","blue","green"];}//定义父类原型方法SuperClass.prototype.getName = function() {  console.log(this.name);}function SubClass(name,time) {  SuperClass.call(this,name);  this.time = time;}//寄生式继承父类原型inheritPrototype(SubClass,SuperClass);//子类新增原型方法SubClass.prototype.getTime = function() {  console.log(this.time);}//测试var ins1 = new SubClass("js",2014);var ins2 = new SubClass("css",2015);ins1.colors.push("black");console.log(ins1.colors);console.log(ins2.colors);ins2.getName();ins2.getTime();

注：本文知识点参考《JavaScript设计模式》张荣铭 著  人民邮电出版社