[toc] #div1.__proto__ -> HTMLDivElement.prototype->HTMLElement.prototype->Element.prototype->Node.prototype->EventTarget.prototype->Object.prototype ## 原型鏈繼承（最常用） 原型繼承是我們JS中最常用的一種繼承方式 子類B想要繼承父類A中的所有屬性和方法（私有+公有），只需要讓`B.prototype = new A`即可 原型繼承的特點： - 它是把父類中私有的+公有的都繼承到子類原型上（子類公有的） - 支持重寫（子類通過`__proto__`修改祖先類的屬性和方法） - 需要手動修正`constructor` 核心：原型繼承并不是把父類中的屬性和方法克隆一份一模一樣的給B，而是讓B和A之間增加了原型鏈的連接，以后B的實例n想要A中的getX方法，需要一級級的向上查找來使用。 ``` function Object(){ } Object.prototype = { constructor:Object ,hasOwnProperty:function(){} ,... } function EventTarget(){ } EventTarget.prototype = new Object(); EventTarget.prototype.addEventListener = function(){}; function Node(){} Node.prototype = new EventTarget; Node.prototype.createElement = function(){} var node = new Node; //最后修正constructor ```  ``` function A(){ this.x = 100; } A.prototype.getX = function(){ console.log(this.x); }; function B(){ this.y = 200; } B.prototype = new A; B.prototype.constructor = B; ```  ## call繼承 `call`繼承最終的結果：會把父類私有的屬性和方法 克隆一份一模一樣的 作為子類私有的屬性，和父類**沒有直接關系**。 ``` function A(){ this.x = 100; } A.prototype.getX = function(){ console.log(this.x); }; function B(){ //this->n A.call(this); //A.call(n) 把A執行讓A中的this變為了n } ``` ``` var n = new B; console.log(n.x); ``` ## 冒充對象繼承 把父類私有的+公有的克隆一份一模一樣的給子類私有的 ``` function A(){ this.x = 100; } A.prototype.getX = function(){ console.log(this.x); }; function B(){ //this-> var temp = new A; for(var key in temp){ //不能用hasOwnProperty進行判斷，否則會繼承不到公有的 this[key] = temp[key] } temp=null; } var n = new B; ``` ## 混合模式繼承 原型繼承+call繼承 ``` function A(){ this.x = 100; } A.prototype.getX = function(){ console.log(this.x); }; function B(){ A.call(this); //->n.x=100 } B.prototype = new A; //->B.prototype:x=100 getX... B.prototype.constructor = B; ``` 優勢在于B的實例b自己身上擁有A的私有屬性而不是通過`__proto__`查找。 ## 寄生組合式繼承 ``` function A(){ this.x = 100; } A.prototype.getX = function(){ console.log(this.x); }; function B(){ A.call(this); //->n.x=100 } B.prototype = Object.create(A.prototype); B.prototype.constructor = B; ``` ``` function objectCreate(o){ function fn(){}; fn.prototype = o; return new fn; } ``` ## 中間類繼承法 ``` arguments.__proto__ = Array.prototype ```