JS繼承

原型繼承(JS中最常用的一種繼承方式)

  • 子類B想要繼承父類A中所有的屬性和方法(私有+公有),只需要B.prototype = new A();即可
  • 原型繼承的特點:它是把父類中私有的+公有的都繼承了子類原型上(子類的公有的)
  • 核心:原型繼承并不是把父類中的屬性和方法克隆一份一模一樣的給B,而是讓B和A之間增加了原型鏈的連接,以后B的實例想要A中的getX方法,需要一級級的向上查找來使用
    function A() {
            this.a = 'aaa';
            this.b = function () {
                console.log('bbb')
            }
        }
        A.prototype.c = 'ccc';
        A.prototype.d = function () {
            console.log('ddd')
        }
        function B() { }
        B.prototype = new A();
        console.log(new B());

call繼承

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

       function A(){
           this.a = 'aaa';
           this.b = function(){
               console.log('bbb');
           }
       }
       A.prototype.c = 'ccc';
       A.prototype.d = function(){
           console.log('ddd');
       }
       
       function B(){
           A.call(this);
       }
       console.log(new B())
    

冒充對象繼承

  • 把父類私有的+公有的克隆一份一模一樣的給子類私有的
        function A(){
            this.a = 'aaa';
            this.b = function(){
                console.log('bbb');
            }
        }
        A.prototype.c = 'ccc';
        A.prototype.d = function(){
            console.log('ddd');
        }
        function B(){
            let temp = new A();
            for(let attr in temp){
                this[attr] = temp[attr];
            }
            temp = null;
        }      
        console.log(new B());

混合模式繼承

  • 原型繼承+call繼承
        function A(){
            this.a = 'aaa';
            this.b = function(){
                console.log('bbb');
            }
        }
        A.prototype.c = 'ccc';
        A.prototype.d = function(){
            console.log('ddd');
        }
        function B(){
            A.call(this);
        }
        
        B.prototype = new A();
        B.prototype.constructor = B;
        console.log(new B());

寄生組合式繼承

      function A(){
            this.a = 'aaa';
            this.b = function(){
                console.log('bbb');
            }
        }
        A.prototype.c = 'ccc';
        A.prototype.d = function(){
            console.log('ddd');
        }
        function B(){
            A.call(this);
        }
        B.prototype = Object.create(A.prototype);
        B.prototype.constructor = B;
        console.log(new B());
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • 繼承6種套餐 參照紅皮書,JS繼承一共6種 1.原型鏈繼承 核心思想:子類的原型指向父類的一個實例 Son.pro...
    燈不梨喵閱讀 3,251評論 1 2
  • 繼承的概念:子類可以使用父類共享的屬性和方法,避免重復代碼提高代碼復用性。 原型鏈:子類可以共享父類的實例對象和實...
    淺秋_6672閱讀 456評論 0 0
  • 1. 原型繼承(最常用) 讓子類繼承父類的方法:讓子類的原型等于父類的實例 子.peototype=new 父 A...
    Mr無愧于心閱讀 395評論 0 1
  • 一.構造繼承 構造函數(shù)繼承: function Super(){ this.colors= ['c','a','b...
    yuanjiex閱讀 254評論 0 1
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品,去做同樣的事情,實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,110評論 2 17

友情鏈接更多精彩內(nèi)容