大多OO語言都支持兩種繼承方式： 接口繼承和實(shí)現(xiàn)繼承 ，而ECMAScript中無法實(shí)現(xiàn)接口繼承，ECMAScript只支持實(shí)現(xiàn)繼承，而且其實(shí)現(xiàn)繼承主要是依靠原型鏈來實(shí)現(xiàn)，下文給大家技術(shù)js實(shí)現(xiàn)繼承的六種方式

方法總結(jié):
原型鏈繼承 、 構(gòu)造函數(shù)繼承(call繼承)、冒充對(duì)象繼承、實(shí)例繼承、
組合繼承、 寄生組合繼承 、 proto繼承法

1.原型繼承:<SonClass.prototype = new FatherClass(param1, param2,..))>

var A = function (x, y) {
   var num = 10;  //函數(shù)作為普通函數(shù)執(zhí)行，變量
   this.x = x;  //實(shí)例對(duì)象增加的私有屬性
   this.y = y;
   this.getX = function() {    //實(shí)例私有的方法
      console.log(this.x); 
 };
};
A.prototype.getX = function () {   //原型上共有的方法
   console.log(this.x);  
};
 A.prototype.write = function() {
    console.log('write-js');
 };
A.tools = {       //函數(shù)最為對(duì)象使用的，對(duì)象.屬性 = 屬性名
   getName: function() {
   },
  x: 10
}

var B = function (x, y) {
   this.x = x;
   this.y = y;
};
 B.prototype = new A(10, 20);
 B.prototype.constructor = B;   //***因?yàn)槟惆烟焐膒rototype對(duì)象替換了，所以constructr你必須手動(dòng)指向他本身，否則就指向了A的constructor
 B.prototype.getY = function () {
     console.log(this.y);
};



var b1 = new B(1, 2);
var b2 = new B('JS','CSS');
console.log(b1);
console.log(b1 instanceof B); //true 是子類的實(shí)例
console.log(b1 instanceof A); //true  是父類的實(shí)例
console.log(b1.hasOwnProperty('getX'));  //false 不是私有的屬性(原型上)
console.log(b1.hasOwnProperty('getY'));  //false   不是私有的屬性(原型上)
console.log(B.prototype.constructor === B);   //true
console.log(b1.__proto__.__proto__.getX === A.prototype.getX); //true
// 先找到自己類的原型,在通過自己類原型的.__proto__指向父類的原型, 因?yàn)?B.prototype = new A() ，B的原型就是A的一個(gè)實(shí)例么
//b1: {x: 1, y: 2}
//   __proto__  B.prototype  {x: 10, y: 20, getY: function(){} }
//   __proto__  A.prototype {getX: function(){} }


b1.getX = function () {     //這也是在b1的內(nèi)存空間增加的私有方法。和b2無關(guān)
console.log('getX-prtive');
};

b1.__proto__.getX = function () {   //這個(gè)是在b1所屬類的原型上增加的方法，是共享的和，所以和b2有關(guān)系
console.log('getX-common')
};

b2.getX(); // getX-common
console.log(b1.getX === b2.getX);  //b1的私有方法getX和b2共有屬性方法比較 , <原型鏈機(jī)制查找>
console.log(b1.__proto__.getX === b2.getX); //b1和b2的getX都是共有的方法

b1.name = 'clh';  //給自己開辟的空間增加的私有屬性 (***)
console.log(b2.name);

b1.__proto__.printX = function () {
console.log(this.x);
};

b2.printX();   //JS    上面那條代碼在b1的類的原型上增加了一個(gè)printX方法，這里b2肯定會(huì)訪問到，b2執(zhí)行這個(gè)函數(shù)，this肯定是b2,所以 b2.x = JS

b1.__proto__.__proto__.init = function () {  //這是在給父類A的原型上增加一個(gè)init方法 
console.log('init-function');
};

console.log(b1.init === b2.init);  //true
console.log(b1.init === A.prototype.init);  //true


b1.__proto__.__proto__.change= function() {  //在父類A的原型上增加一個(gè)方法
    alert('chagne-getX');
};

b2.change(); //彈出 'change-getX' 調(diào)用父類A的原型的方法

b1.__proto__.__proto__.write = function() {   //*** 子類從寫父類原型上的方法
    console.log('write-css');
};

b2.write();  // 'write-css'   原型鏈查找機(jī)制，找到父類A的原型上的write方法



 特點(diǎn)：
 核心：  拿父類實(shí)例來充當(dāng)子類原型對(duì)象, (把父類的私有屬性克隆一份，放到子類的原型上，父類的共有屬性通過子類的原型上的__ptoto__查找到)
1. 非常純粹的繼承關(guān)系，實(shí)例是子類的實(shí)例，也是父類的實(shí)例
2. 父類新增原型方法/原型屬性，子類都能訪問到
3.簡(jiǎn)單，易于實(shí)現(xiàn)
缺點(diǎn)：

要想為子類新增屬性和方法，必須要在new A()這樣的語句之后執(zhí)行，不能放到構(gòu)造器中
無法實(shí)現(xiàn)多繼承
來自原型對(duì)象的引用屬性是所有實(shí)例共享的（詳細(xì)請(qǐng)看附錄代碼： 示例1）
創(chuàng)建子類實(shí)例時(shí)，無法向父類構(gòu)造函數(shù)傳參

2.構(gòu)造函數(shù)繼承(call繼承)(<A.call(this[,param1, param2,...])>

var A1 = function (name, age) {
   var num = 10;
   this.name = name;
   this.age = age;
};
A1.prototype.getName = function () {
   console.log('A-getName');
};

var A2 = function () {
   this.x = 10;
};
 A2.prototype.getX = function(() {
    console.log(this.x);
 };

var A3 = function () {
   this.y = 20;
};
 A3.prototype.getY = function(() {
    console.log(this.y);
 };

  var B1 = function (name, age) {
  A1.call(this, name, age);   //this是，B1類的一個(gè)實(shí)例對(duì)象， 把父類的私有屬性性拷貝一份，放到這個(gè)實(shí)例的私有屬性上
  A1.apply(this,arguments); //apply****繼承
  A2.call(this);  //繼承類A2的私有方法,放到B1實(shí)例對(duì)象的私有屬性中
  A3.call(this);   //繼承類A3的私有方法 ,放到B1實(shí)例對(duì)象的私有屬性中
};

B1.prototype.getName = function () {
  console.log(this.name);
};
B1.prototype.getAge = function () {
   console.log(this.age);
};

var b1 = new B1('clh', 25);
console.log(b1);

console.log(b1 instanceof B1); //true  是子類的實(shí)例
console.log(b1 instanceof A1); // false 不是父類的實(shí)例
console.log(b1.getName === b1.__proto__.getName); //true 
console.log(b1.getName === b1.__proto__.__proto__.getName);    // false 后面那個(gè)是B1類原型上的.__prtot__， 那么原型是對(duì)象，所以是Object的實(shí)例，所以指向Object原型的getName，沒有返回undefiend

 特點(diǎn)：

1. 解決了1中，子類實(shí)例共享父類引用屬性的問題
2. 創(chuàng)建子類實(shí)例時(shí)，可以向父類傳遞參數(shù)
3. 可以實(shí)現(xiàn)多繼承（call多個(gè)父類對(duì)象）
缺點(diǎn)：

1. 實(shí)例并不是父類的實(shí)例，只是子類的實(shí)例
2. 只能繼承父類的實(shí)例屬性和方法，不能繼承原型屬性/方法
3. 無法實(shí)現(xiàn)函數(shù)復(fù)用，每個(gè)子類都有父類實(shí)例函數(shù)的副本，影響性能*/

3.冒充對(duì)象繼承(拷貝繼承)

var A2 = function (color, fontSize) {
    this.a = 10;
    this.b = 20;
    this.name = 'clh';
    this.getName = function () {
         console.log(this.getName);
    };
};

A2.prototype.printA = function () {
  console.log(('A2-prototype.printA'));
};

var A3 = function (x, y) {
  this.x = x
  this.y = y;
};
A3.prototype.getX = function () {
   console.log(this.x);
};


var B2 = function (cont) {
var objA = new A2('#ff0', '30px');   //自己創(chuàng)建一個(gè)對(duì)象，把父類的私有和共有屬性/方法拿過來，進(jìn)行遍歷，放到子類的 私有屬性中
var objB = new A3(1, 2);
for (var key in objA) {      //A2類
    this[key] = objA[key];   // this.prototype[key] = obj[key]  這是放到子類的共有屬性中，把父類的私有和共有屬性
}

for (var key in objB) {   //A3類
    this[key] = objB[key];
}


this.write = cont; //在增加自己傳進(jìn)來的屬性
};

B2.prototype.write = function () {
  console.log('wait-JS');
};
B2.prototype.printA = function () {
   console.log('B2-prototype.printA');
};

var b2 = new B2('CSS+DIV');
console.log(b2);
console.log(b2 instanceof B2);   // true 是子類的實(shí)例
console.log(b2 instanceof  A2);   // false 不是父類的實(shí)例
console.log(b2.hasOwnProperty('name')); //true 是私有屬性
console.log(b2.hasOwnProperty('printA')); //true 是私有屬性

b2.printA(); //  'A2-prototype.printA'  私有屬性的printA()，也就是繼承A2原型上的printA方法
b2.__proto__.printA(); //  'B2-prototype.printA'　直接找到B2原型上的printA方法

特點(diǎn)：

 1. 支持多繼承
缺點(diǎn)：

1.  效率較低，內(nèi)存占用高（因?yàn)橐截惛割惖膶傩裕?2. 無法獲取父類不可枚舉的方法（不可枚舉方法，不能使用for in 訪問到）*/

4 實(shí)例繼承

var A3 = function (name, color) {
   this.name = name;
   this.color = color;
   this.x = 1;
   this.y = [1,2,3];
   this.getY = function () {
     console.log('A-pritive-getY');
   }
};
A3.prototype.getY = function () {
   console.log('A-common-getY');
};

var B3 = function (name, color) {
  var obj = new A3(name ,color);
  obj.x = 'JS繼承';
  return obj;
};

B3.prototype.getColor = function () {
  console.log('B-common-getColor');
};

var b3 = new B3('clh', 'red');
console.log(b3);
console.log(b3 instanceof B3);  //false  因?yàn)樗皇荁3的實(shí)例，所以訪問不到B3原型上的屬性和方法
console.log(b3 instanceof A3);  //true  是A3的實(shí)例
console.log(b3.getY === A3.prototype.getY); // false
console.log(b3.getY.__proto__.getY === A3.prototype.getY); //false
console.log(b3.getY === A3.prototype.getY); //false
console.log(b3.hasOwnProperty('getY')); //true



特點(diǎn)：

 不限制調(diào)用方式，不管是new 子類()還是子類(),返回的對(duì)象具有相同的效果
缺點(diǎn)：

實(shí)例是父類的實(shí)例，不是子類的實(shí)例
不支持多繼承*/

5組合繼承 < 原型鏈繼承 + 構(gòu)造函數(shù)繼承(call繼承)>

var Animate = function (name, color, age, food) {
   this.name = name;
   this.color = color;
   this. age = age;
   this.eat = function (food) {
       console.log(this.name + '喜歡吃' + food);
   };
  this.write = function() {    //私有方法 write
         console.log('wirte-js');
  };
};

Animate.prototype.write = function() {   //共有方法write
   console.log('write-css');
 }
Animate.prototype.sleep = function (sleep) {
    console.log(this.name + '喜歡在' + sleep + '睡覺');
};
Animate.prototype.running  = function (runMethod) {
   console.log(this.name + '跑的方法' + runMethod);
};


var Dog = function (name, color, age, food) {
   Animate.call(this, name, color, age, food);  //構(gòu)造函數(shù)繼承父類的私有屬性和方法
};

Dog.prototype = new Animate(); //繼承父類的私有屬性和私有方法放到這個(gè)類的原型上
Dog.prototype.constructor = Dog;  //強(qiáng)制constructor指向自己，否則原型鏈會(huì)混亂了
Dog.prototype.play = function (plays) {
    console.log(this.name + '喜歡玩' + plays);
};
Dog.prototype.write = function() {
     console.log('write-html');
};

var dog1 = new Dog('小狗', 'red', 23, '骨頭'); 
console.log(dog1);
console.log(dog1 instanceof Dog); //true  是子類的一個(gè)實(shí)例
console.log(dog1 instanceof  Animate);  //true 是父類的一個(gè)實(shí)例

console.log(dog1.sleep === Animate.prototype.sleep); //true 第一個(gè)找到自己原型上的sleep方法，也就是原型繼承過來的父類的原型sleep, 第二個(gè)是父類原型上的sleep方法
console.log(dog1.__proto__.__proto__.sleep === Animate.prototype.sleep); //true    自己子類原型.__prtoto__指向父類的prototype  所以為true
dog1.sleep('爬在地上');
dog1.running('四條腿');

dog1.sleep = function() {   //修改自己類原型上的sleep方法
        alert('ok'); 
};

dog1.sleep(); // 'ok'

dog1.__proto__.__proto__.sleep = function() {   //修改父類原型上的sleep方法
       alert('chagne-sleep-method');
};
var  animate1 = new Animate();
animate1.sleep();   // 'chagne-sleep-method'
dog1.__proto__.__proto__.sleep(); //'chagne-sleep-method'

dog1.write ();  //  ’write-js' 私有屬性的write方法
dog1.__proto__.write();   //’write-html'  共有屬性子類原型上的write方法, 這里因?yàn)槟闶紫冗M(jìn)行了原型繼承，子類原型上有一個(gè)write方法，你又給這原型對(duì)象增加了一個(gè)write方法，他肯定會(huì)把繼承過來的write方法給覆蓋了，所以輸出結(jié)果為'write-html'
dog1.__proto__.__proto__.write();   // ’write-css‘  父類原型上的write方法

特點(diǎn)：

 1. 彌補(bǔ)了方式2的缺陷，可以繼承實(shí)例屬性/方法，也可以繼承原型屬性/方法
 2. 既是子類的實(shí)例，也是父類的實(shí)例
 3. 不存在引用屬性共享問題
 4. 可傳參
 5. 函數(shù)可復(fù)用
 6. 可以實(shí)現(xiàn)多繼承(call）

缺點(diǎn)：

 1.  調(diào)用了兩次父類構(gòu)造函數(shù)，生成了兩份實(shí)例(子類實(shí)例將子類原型上的那份屏蔽了)

6.寄生組合繼承( < 原型鏈繼承 + 構(gòu)造函數(shù)繼承(call繼承)) (利用空對(duì)象作為中介)

var AClass = function (name, age) {
   this.name = name;
   this.age =age;
   this.getAge = function () {
       console.log(this.age);
   };
   this.getName = function () {

    };
};

AClass.prototype.getName =function () {
    console.log(this.name);
};


var BClass = function (name, age) {
    AClass.call(this, name, age);
   this.height = '180cm';
};
 
 // 其實(shí)這樣做的目的是原型只繼承父類原型上的東西
function extend(Child, Parent) {
    var F = function(){}; //空對(duì)象
    F.prototype = Parent.prototype;
    Child.prototype = new F();
    Child.prototype.constructor = Child;
    Child.uber = Parent.prototype;   //為子對(duì)象設(shè)一個(gè)uber屬性，這個(gè)屬性直接指向父對(duì)象的prototype屬性, 這等于在子對(duì)象上打開一條通道，可以直接調(diào)用父對(duì)象的方法。這一行放在這里，只是為了實(shí)現(xiàn)繼承的完備性，純屬備用性質(zhì)
}
extend(BClass, AClass);
BClass.prototype.getHeight = function () {

};

var bclass1 = new BClass('clh' ,25);
var bclass2 = new BClass('wd' ,23);
console.log(bclass1);
console.log(bclass1 instanceof BClass);  //true 是子類的實(shí)例
console.log(bclass1 instanceof AClass);  //true  是父類的實(shí)例


console.log(bclass1.getHeight === bclass2.getHeight);  // true都是子類原型上的getHeight
console.log(bclass1.getName === AClass.prototype.getName); // false 第一個(gè)是自己類上原型上的getName,  第二個(gè)是父類原型上的getName ，肯定不一樣
console.log(bclass1.__proto__.__proto__.getName === AClass.prototype.getName); //true  都是父類原型上的getName方法

 特點(diǎn)：
 1. 堪稱完美
 缺點(diǎn)：

 1.  實(shí)現(xiàn)較為復(fù)雜

7.proto繼承 <arguments.proto = Array.prototype>

  function sum() {
      console.log(arguments instanceof  Array);   //false, 不是數(shù)組，不可以使用數(shù)組提供的方法
      arguments.__proto__ = Array.prototype;      //在中間加了一層，強(qiáng)制將__proto__指向了數(shù)組的原型
      console.log(arguments instanceof Array);  // true  在數(shù)組了，可以用數(shù)組的方法
      console.log(arguments.slice()); // [1,2,3,1] 克隆一份數(shù)組
   }

 sum(1,2,3,1);