1. 程式人生 > >js學習總結----深入擴展原型鏈模式常用的六種繼承方式

js學習總結----深入擴展原型鏈模式常用的六種繼承方式

模式 temp 枚舉 又是 reat 缺點 解決 his obj

一、可枚舉和不可枚舉

for in 循環在遍歷的時候,默認的話可以把自己私有的和它所屬類原型上的擴展的屬性和方法都可以遍歷到,但是一般情況下,我們遍歷一個對象只需要遍歷私有的即可,我們可以使用以下的判斷進行處理。obj.propertyIsEnumerable(key) 或者obj.hasOwnProperty(key)

二、Object.create(proObj)

  方法創建一個新的對象,但是要把proObj作為這個對象的原型 在IE6-8不兼容(ECMAscript5)

  原理:

     function object(o){
            function Fn(){};
            Fn.prototype 
= o; return new Fn; }

三、繼承

  1、原型繼承    

     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

  原型繼承是我們JS中最常用的一種繼承方式

  子類B想要繼承父類A中的所有屬性和方法(公有+私有),只需要讓B.prototype = new A;即可

  原型繼承的特點:它是把父類中私有+公有的都繼承到了子類原型上(子類公有的),具體見下圖 技術分享

   核心:原型繼承並不是把父類中的屬性和方法克隆一份一模一樣的給B而是讓B和A之間增加了原型鏈的鏈接,以後B的實例n想要用A中的getX方法,需要一級一級的向上查找來使用。

  2、call繼承

    把父類私有的屬性和方法克隆一份一模一樣的 作為子類私有的屬性 

     function A(){
            this.x = 100;
        }
        A.prototype.getX 
= function(){ console.log(this.x); } function B(){ A.call(this)//A.call(n) 把A執行讓A中的this變成n }

  3、冒充對象繼承   

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            var temp = new A;
            for(var key in temp){
                this[key] = temp[key]
            }
       temp = null }
var n = new B;

  冒充對象繼承:把父類公有的+私有的克隆一份一模一樣的給子類私有的

  4、混合模式繼承:原型繼承+call繼承(第二常用)

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            A.call(this);
        }
        B.prototype = new A;
        B.prototype.constructor = B;

  缺點:A執行了兩遍,且A中x既是私有屬性,又是公有屬性

  5、寄生組合式繼承:解決上面私有的重復問題

     function A(){
            this.x = 100;
        }
        A.prototype.getX = function(){
            console.log(this.x);
        }
        function B(){
            A.call(this);
        }
        B.prototype = Object.create(A.prototype);//IE6-8不兼容 ,可以自己寫一個Object.create方法
        B.prototype.constructor = B;

  6、中間類繼承法->不兼容(移動端開發考慮)

    A.__proto__ = B.prototype

js學習總結----深入擴展原型鏈模式常用的六種繼承方式