JS继承

前言

整理总结下JS继承的几种方法，并分析各方法的优缺点。

一、构造函数

  function Parent1() {    this.name = 'parent1';  }  Parent1.prototype.say = function () {  };  function Child1() {    Parent1.call(this);    this.type = 'child1';  }  console.log(new Child1());  //Child1 {name: "parent1", type: "child1"}  console.log(new Child1().say());  //Uncaught TypeError: xxx say is not a function

优点：继承了Parent1的name属性；
缺点：没有继承Parent1原型链上的方法。

二、原型链方法

  function Parent2() {    this.name = 'parent2';    this.play = [1, 2, 3];  }  Parent2.prototype.say = function () {    console.log('Parent2 say');  };  function Child2() {    this.type = 'child2';  }  Child2.prototype = new Parent2();  var s1 = new Child2();  s1.say();  //Parent2 say  console.log(s1.name, s1.type); //parent2 child2  var s2 = new Child2();  s1.play.push(4);  console.log(s1.play, s2.play);  //[1, 2, 3, 4]、[1, 2, 3, 4]

优点：不仅继承了Parent2的name、play属性而且继承了其原型链上的方法；
缺点：由于将Parent2的实例作为Child2的原型，导致所有Child2实例共享Parent2的属性方法，其中一个Child2实例改变了原型链上Parent2的实例属性，
其他实例会受到影响跟着改变。

三、组合方法

  function Parent3 () {    this.name = 'parent3';    this.play = [1, 2, 3];  }  function Child3 () {    Parent3.call(this);    this.type = 'child3';  }  Child3.prototype = new Parent3();  var s3 = new Child3();  var s4 = new Child3();  s3.play.push(4);  console.log(s3.play, s4.play); //[1, 2, 3, 4]、[1, 2, 3]

优点：避免了原型链方法中出现的实例间相互影响(调用Parent3.call(this)使得Child3实例上有play属性，不必找到原型链上)；
缺点：每次得到一个Child3实例，都会调用两次Parent3函数。

四、组合方法(优化一)

  function Parent4 () {    this.name = 'parent4';    this.play = [1, 2, 3];  }  function Child4 () {    Parent4.call(this);    this.type = 'child4';  }  Child4.prototype = Parent4.prototype;  var s5 = new Child4();  var s6 = new Child4();  console.log(s5); //Child4 {name: "parent4", play: [1, 2, 3] type: "child4"}  console.log(s6); //Child4 {name: "parent4", play: [1, 2, 3] type: "child4"}  console.log(s5 instanceof Child4, s5 instanceof Parent4); //true true  console.log(s5.constructor); //Parent4() {this.name = 'parent4';this.play = [1, 2, 3];}

优点：避免了Parent4重复调用问题；
缺点：Child4实例的构造函数不是Child4，而是Parent4(其实这不是优化带来的问题，优化前同样存在这个问题)

五、组合方法(优化二)

  function Parent5 () {    this.name = 'parent5';    this.play = [1, 2, 3];  }  function Child5 () {    Parent5.call(this);    this.type = 'child5';  }  Child5.prototype = Object.create(Parent5.prototype);  Child5.prototype.constructor = Child5;  var s7 = new Child5();  console.log(s7 instanceof Child5, s7 instanceof Parent5); //true true  console.log(s7.constructor); //Child5() {Parent5.call(this);this.type = 'child5';}

优点：Child5实例的构造函数是Child5(这里采用Object.create方法而不是直接Parent4.prototype赋值，直接赋值会影响到Parent4实例的构造函数)。