js面向?qū)ο鬁\析--繼承那些事

molyzzx 發(fā)布于2019-08-21 10:46 / 3334人閱讀

摘要：有需要還可以修改指向謙龍寄生組合式繼承思路是通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混合形式來繼承方法改變執(zhí)行環(huán)境實(shí)現(xiàn)繼承有需要還可以修改指向謙龍謙龍拷貝繼承該方法思路是將另外一個(gè)對(duì)象的屬性和方法拷貝至另一個(gè)對(duì)象使用遞歸

前言

js中實(shí)現(xiàn)繼承的方式只支持實(shí)現(xiàn)繼承，即繼承實(shí)際的方法，而實(shí)現(xiàn)繼承主要是依靠原型鏈來完成的。

原型鏈?zhǔn)嚼^承

該方式實(shí)現(xiàn)的本質(zhì)是重寫原型對(duì)象，代之以一個(gè)新類型的實(shí)例。

    function SuperType(){
        this.property=true;
    }
    SuperType.prototype.getSuperValue=function(){
        return this.property;
    }

    function SubType(){
        this.subproperty=false;
    }
    SubType.prototype = new SuperType();//繼承
    SubType.prototype.getSubValue=function(){//額外添加方法
        return this.subproperty;
    }
    var s = new SubType();
        console.log(s.getSubValue());//false
        console.log(s.getSuperValue());//true

借用純?cè)玩湹膯栴}：如果原型中包含引用類型的值，則實(shí)例間對(duì)該值的修改會(huì)相互影響，這不是我們希望看到的。

借用構(gòu)造函數(shù)

該方式的基本思想是在子類型的構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)(父函數(shù))

   function SuperType(){
        this.color=["green","red","black"];
    }

    function SubType(){
        SuperType.call(this)//改變執(zhí)行環(huán)境 實(shí)現(xiàn)繼承
    }
    var  s = new SubType();
        s.color.push("pink");
        console.log(s.color);//[ "green", "red", "black", "pink" ]
    var s1 = new SubType();
        console.log(s1.color);//[ "green", "red", "black" ]

構(gòu)造函數(shù)的問題：方法都在構(gòu)造函數(shù)內(nèi)部定義，則函數(shù)復(fù)用無從談起。

組合繼承

基本思路是使用原型鏈來實(shí)現(xiàn)對(duì)原型屬性和方法的繼承，通過構(gòu)造函數(shù)實(shí)現(xiàn)實(shí)例屬性的繼承

 function SuperType(name){
        this.name=name;
        this.color=["green","red","black"];
    }

    SuperType.prototype.show=function(){
        console.log(this.name,this.color);
    }

    function SubType(name,age){
        SuperType.call(this,name)//改變執(zhí)行環(huán)境 實(shí)現(xiàn)實(shí)例屬性繼承
        this.age=age;
    }
    SubType.prototype = new SuperType();//原型屬性和方法繼承

    var s = new SubType("謙龍",100);
        s.show();//謙龍 ["green", "red", "black"]
    var s = new SubType("雛田",14);
    s.show();//雛田 ["green", "red", "black"]

原型式繼承

該方法的特點(diǎn)是借助原型可以基于一個(gè)已有的對(duì)象創(chuàng)建新的對(duì)象，同時(shí)還不比因此創(chuàng)建自定義類型

    function object(obj){
        function F(){};
        F.prototype=obj;
        //F.prototype.constructor=F; 有需要還可以修改constructor指向
        return new F();
    }

    var person={
        name:"謙龍",
        color:["red","green","black"]
    }
    var p1 = object(person);
        p1.color.push("pink");

    var p2 = object(person);
    p2.color.push("grey");

    console.log(person.color);//["red", "green", "black", "pink", "grey"]

ES5中的Object.creat()與該方式的行為相同

寄生式繼承

該方式的思路是創(chuàng)建一個(gè)僅用來封裝繼承過程的函數(shù)，該函數(shù)在內(nèi)部以某種方式來增強(qiáng)對(duì)象，最后將該對(duì)象返回。

 function object(obj){
        function F(){};
        F.prototype=obj;
        //F.prototype.constructor=F; 有需要還可以修改constructor指向
        return new F();
    }

    function CObject(obj){
        var clone=object(obj);
        clone.sayHi=function(){
            alert("HI");
        }
        return clone;
    }
    var person={
        name:"謙龍",
        color:["red","green","black"]
    }
    var s = CObject(person);
        s.sayHi();

寄生組合式繼承

思路是通過借用構(gòu)造函數(shù)來繼承屬性，通過原型鏈的混合形式來繼承方法

function SuperType(name){
    this.name=name;
    this.color=["green","red","black"];
}
SuperType.prototype.show=function(){
    console.log(this.name,this.color);
}
function SubType(name,age){
    SuperType.call(this,name)//改變執(zhí)行環(huán)境 實(shí)現(xiàn)繼承
    this.age=age;
}
function object(obj){
    function F(){};
    F.prototype=obj;
    //F.prototype.constructor=F; 有需要還可以修改constructor指向
    return new F();
}

function inheritPrototype(subType,superType){
    var prototype=object(superType.prototype);
    prototype.constructor=subType;
    subType.prototype=prototype;
}
inheritPrototype(SubType,SuperType);
var s = new SubType("謙龍",100);
s.show();//謙龍 ["green", "red", "black"]

拷貝繼承

該方法思路是將另外一個(gè)對(duì)象的屬性和方法拷貝至另一個(gè)對(duì)象

 function deepCopy(obj){
            if(typeof obj !="object"){
                console.trace();
                return obj;
            }
            var newObj={};
                for(var attr in obj){
                    newObj[attr]=typeof obj[attr]=="object"?deepCopy(obj[attr]):obj[attr];//使用遞歸
                }
            return newObj;
        }
        var obj={
            name:"min",
            age:20,
            sex:"boy",
            json:{
                name2:"huihui",
                json3:{
                    name3:"yahui"
                }
            }
        }
        var newObj=deepCopy(obj);
        console.log(newObj);

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/86150.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

molyzzx

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

ZJI，雙11促銷，中國香港物理機(jī)5.5折，中國臺(tái)灣/日本/韓國獨(dú)服/多IP站群等終身8折

閱讀 2021·2021-10-25 09:48
godaddy域名如何解析到國內(nèi)主機(jī)-如何解析godaddy域名？

閱讀 2888·2021-09-22 14:59
vue-router頁面跳轉(zhuǎn) 以及頁面配置

閱讀 1817·2019-08-29 16:52
自適應(yīng)頁面的實(shí)現(xiàn)方式

閱讀 930·2019-08-29 16:07
css相關(guān) - 收藏集 - 掘金

閱讀 2376·2019-08-29 12:38
用戶只有一部手機(jī)，怎么保護(hù)私鑰—— mixin如何實(shí)現(xiàn)資產(chǎn)安全

閱讀 1846·2019-08-26 13:23
正則表達(dá)式基礎(chǔ)知識(shí)，持續(xù)更新……

閱讀 936·2019-08-26 11:49
React-sortable-hoc 結(jié)合 hook 實(shí)現(xiàn) Draggin 和 Droppin

閱讀 3348·2019-08-26 10:56

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

js面向?qū)ο鬁\析--繼承那些事

相關(guān)文章

JS程序

**JavaScript面向對(duì)象那些事**

【面試】Java基礎(chǔ)的那些事-Two

**SegmentFault 技術(shù)周刊 Vol.32 - 七夕將至，你的“對(duì)象”還好嗎？**

**SegmentFault 技術(shù)周刊 Vol.32 - 七夕將至，你的“對(duì)象”還好嗎？**

發(fā)表評(píng)論

0條評(píng)論

molyzzx

男|高級(jí)講師

TA的文章

ZJI，雙11促銷，中國香港物理機(jī)5.5折，中國臺(tái)灣/日本/韓國獨(dú)服/多IP站群等終身8折

godaddy域名如何解析到國內(nèi)主機(jī)-如何解析godaddy域名？

vue-router頁面跳轉(zhuǎn) 以及頁面配置

自適應(yīng)頁面的實(shí)現(xiàn)方式

css相關(guān) - 收藏集 - 掘金

用戶只有一部手機(jī)，怎么保護(hù)私鑰—— mixin如何實(shí)現(xiàn)資產(chǎn)安全

正則表達(dá)式基礎(chǔ)知識(shí)，持續(xù)更新……

React-sortable-hoc 結(jié)合 hook 實(shí)現(xiàn) Draggin 和 Droppin

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

js面向?qū)ο鬁\析--繼承那些事

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！