面試--js實現(xiàn)繼承的幾種方式

baiy 發(fā)布于2019-08-21 16:56 / 3315人閱讀

摘要：基于原型的繼承原型上的屬性被共享了不是我們所需要的這種繼承會有如下的缺點如果父類包含有引用類型的屬性所有的子類就會共享這個屬性。

基于原型的繼承

  function father() {
        this.faName = "father";
        this.names=["11","22"]
    }
    father.prototype.getfaName = function() {
        console.log(this.faName);
    };
    function child() {
        this.chName = "child";
    }
    child.prototype = new father();
    child.prototype.constructor = child;
    child.prototype.getchName = function() {
        console.log(this.chName);
    };
    var c1=new child();
    c1.names.push("sasa");
    var c2=new child();
    console.log(c2.names)   //原型上的names屬性被共享了 不是我們所需要的

這種繼承會有如下的缺點：
1、如果父類包含有引用類型的屬性所有的子類就會共享這個屬性。
2、在創(chuàng)建子類的實例時不能向父類的構造函數(shù)傳遞參數(shù)

組合式繼承

原型繼承+構造函數(shù)的繼承

 function father(name) {
        this.faName = "father";
    }
    father.prototype.getfaName = function() {
        console.log(this.faName);
    };
    function child(args) {
        this.chName = "child";
        father.apply(this,[]); //第二次調(diào)用父類構造函數(shù)
    }
    child.prototype = new father(); //第一次調(diào)用父類構造函數(shù)
    child.prototype.constructor = child;
    child.prototype.getchName = function() {
        console.log(this.chName);
    };

子類繼承父類的屬性，一組在子類實例上，一組在子類原型上（在子類原型上創(chuàng)建不必要的多余的屬性）

寄生組合實現(xiàn)繼承

 function father(name) {
        this.faName = "father";
    }
    father.prototype.getfaName = function() {
        console.log(this.faName);
    };
    function object(o) {    //創(chuàng)建一個原型為o的新對象
        function F() {};
        F.prototype = o;
        return new F();
    }
    /**
     * 通用方法實現(xiàn)子類繼承父類
     * @param  {function} child  子類構造函數(shù)
     * @param  {function} father 被繼承的父類構造函數(shù)
     */
    function inheritPrototype(child, father) {
        var prototype = object(father.prototype); //創(chuàng)建一個指定原型的對象
        prototype.constructor = child; //增強對象
        child.prototype = prototype; //子類的原型等于該對象
    }
    function child(args) {
        this.chName = "child";
        father.apply(this,[]);   //調(diào)用父類的構造函數(shù)可以通過args傳遞參數(shù)
    }
    inheritPrototype(child, father); //子類的原型等于new 空函數(shù)(), 而new 空函數(shù)()出來的對象的原型等于父類的原型
    child.prototype.getchName = function() {
        console.log(this.chName);
    };
    console.log( child.prototype.isPrototypeOf(new child()) ); //true
    console.log(new child() instanceof child); //true

優(yōu)點：1.只調(diào)用一次父類的構造函數(shù),避免了在子類原型上創(chuàng)建不必要的，多余的屬性

  2.原型鏈保持不變

es6實現(xiàn)的繼承

   class father{
        constructor(name){
            this.name=name
            this.names=[1,2,3]
        }
        getname(){
            console.log(this.name);
        }
    }
    class child extends father{
        constructor(name){
            super(name);
        }
        sayHello(){
            console.log("sayHello");
        }
        static hh(){
            console.log("hh")
        }
    }
    var cc=new child("juanjuan");
    cc.sayHello();
    cc.getname();  //juanjuan
    child.hh();  //hh
    cc.names.push("wqwq");
    var c1=new child("sasasa");
    console.log(c1.names)  //[1,2,3]

云服務器 GPU云服務器 js繼承的幾種方式服務器請求的幾種方式 java創(chuàng)建對象的幾種方式 js的幾種數(shù)據(jù)類型

文章版權歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/88921.html

2018年5月前端面試題

摘要：在上家公司裸辭之后，經(jīng)過一段時間休整，月中下旬面試了一些公司，由于本人框架使用的是，所以面試題涉及到框架的都是，現(xiàn)將面試題整理一下列舉常用的特性。事件冒泡以及事件捕獲。其他前端分頁和后端分頁優(yōu)缺點。包含多個子節(jié)點及孫節(jié)點，遍歷。在上家公司裸辭之后，經(jīng)過一段時間休整，5月中下旬面試了一些公司，由于本人框架使用的是vue，所以面試題涉及到框架的都是vue，現(xiàn)將面試題整理一下： es6 ...

wwolf 2019-08-26 11:55 評論0 收藏0
2018年5月前端面試題

摘要：在上家公司裸辭之后，經(jīng)過一段時間休整，月中下旬面試了一些公司，由于本人框架使用的是，所以面試題涉及到框架的都是，現(xiàn)將面試題整理一下列舉常用的特性。事件冒泡以及事件捕獲。其他前端分頁和后端分頁優(yōu)缺點。包含多個子節(jié)點及孫節(jié)點，遍歷。在上家公司裸辭之后，經(jīng)過一段時間休整，5月中下旬面試了一些公司，由于本人框架使用的是vue，所以面試題涉及到框架的都是vue，現(xiàn)將面試題整理一下： es6 ...

Lavender 2019-08-02 10:35 評論0 收藏0
【面試系列】番外：關于糯米面試

摘要：番外關于糯米面試結果總而言之一句話糯米的面試掛了過程把面試過程中面試官的問題分享一下有幾種數(shù)據(jù)類型。將一個字符串轉(zhuǎn)化為數(shù)字，將數(shù)字轉(zhuǎn)化為字符串。獲取當前網(wǎng)址并從中截取信息。究其愿意還是對字符串和數(shù)組的操作不熟練，我決定深刻反思。番外：關于糯米面試結果總而言之一句話：糯米的面試掛了過程把面試過程中面試官的問題分享一下： js有幾種數(shù)據(jù)類型。將一個字符串轉(zhuǎn)化為數(shù)字，將數(shù)字轉(zhuǎn)化...

PiscesYE 2019-08-29 11:09 評論0 收藏0
【面試系列】番外：關于糯米面試

摘要：番外關于糯米面試結果總而言之一句話糯米的面試掛了過程把面試過程中面試官的問題分享一下有幾種數(shù)據(jù)類型。將一個字符串轉(zhuǎn)化為數(shù)字，將數(shù)字轉(zhuǎn)化為字符串。獲取當前網(wǎng)址并從中截取信息。究其愿意還是對字符串和數(shù)組的操作不熟練，我決定深刻反思。番外：關于糯米面試結果總而言之一句話：糯米的面試掛了過程把面試過程中面試官的問題分享一下： js有幾種數(shù)據(jù)類型。將一個字符串轉(zhuǎn)化為數(shù)字，將數(shù)字轉(zhuǎn)化...

Rocture 2019-08-01 15:38 評論0 收藏0
【面試系列】番外：關于糯米面試

摘要：番外關于糯米面試結果總而言之一句話糯米的面試掛了過程把面試過程中面試官的問題分享一下有幾種數(shù)據(jù)類型。將一個字符串轉(zhuǎn)化為數(shù)字，將數(shù)字轉(zhuǎn)化為字符串。獲取當前網(wǎng)址并從中截取信息。究其愿意還是對字符串和數(shù)組的操作不熟練，我決定深刻反思。番外：關于糯米面試結果總而言之一句話：糯米的面試掛了過程把面試過程中面試官的問題分享一下： js有幾種數(shù)據(jù)類型。將一個字符串轉(zhuǎn)化為數(shù)字，將數(shù)字轉(zhuǎn)化...

iKcamp 2019-08-20 10:29 評論0 收藏0