js面向對象淺析--繼承那些事

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

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

前言

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

原型鏈式繼承

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

    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

借用純原型鏈的問題：如果原型中包含引用類型的值，則實例間對該值的修改會相互影響，這不是我們希望看到的。

借用構造函數(shù)

該方式的基本思想是在子類型的構造函數(shù)的內部調用超類型構造函數(shù)(父函數(shù))

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

    function SubType(){
        SuperType.call(this)//改變執(zhí)行環(huán)境 實現(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" ]

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

組合繼承

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

 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)境 實現(xiàn)實例屬性繼承
        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"]

原型式繼承

該方法的特點是借助原型可以基于一個已有的對象創(chuàng)建新的對象，同時還不比因此創(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)建一個僅用來封裝繼承過程的函數(shù)，該函數(shù)在內部以某種方式來增強對象，最后將該對象返回。

 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();

寄生組合式繼承

思路是通過借用構造函數(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)境 實現(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"]

拷貝繼承

該方法思路是將另外一個對象的屬性和方法拷貝至另一個對象

 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);

GPU云服務器云服務器 js 面向對象視頻 oop面向對象 js js面向對象開發(fā)表格云服務器那些事

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

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/86150.html

JS程序

摘要：設計模式是以面向對象編程為基礎的，的面向對象編程和傳統(tǒng)的的面向對象編程有些差別，這讓我一開始接觸的時候感到十分痛苦，但是這只能靠自己慢慢積累慢慢思考。想繼續(xù)了解設計模式必須要先搞懂面向對象編程，否則只會讓你自己更痛苦。 JavaScript 中的構造函數(shù) 學習總結。知識只有分享才有存在的意義。是時候替換你的 for 循環(huán)大法了~ 《小分享》JavaScript中數(shù)組的那些迭代方法~ ...

melody_lql 2019-08-22 11:22 評論0 收藏0
JavaScript面向對象那些事

摘要：委托上面的代碼結合了構造函數(shù)和原型兩種方式去創(chuàng)建對象，首先聊聊構造函數(shù)構造函數(shù)構造函數(shù)本質上還是函數(shù)，只不過為了區(qū)分將其首字母大寫了而已。注意注釋掉的代碼是自動執(zhí)行的，但這并不是構造函數(shù)獨有的，每個函數(shù)在聲明時都會自動生成。首先看看下面兩個1+1=2的問題: 問題一：為什么改變length的值，數(shù)組的內容會變化？ var arr = [1]; arr.length = 3; aler...

王偉廷 2019-08-20 18:07 評論0 收藏0
【面試】Java基礎的那些事-Two

摘要：前言面試中對于技術職位，一般分筆試與面談，如果面試官的一些小問題你可以立馬找到對應的知識點擴展開來，那么這就是你的優(yōu)勢，本系列將講述一些面試中的事，不會很詳細，但是應該比較全面吧。前言面試中對于技術職位，一般分筆試與面談，如果面試官的一些小問題你可以立馬找到對應的知識點擴展開來，那么這就是你的優(yōu)勢，本系列將講述一些java面試中的事，不會很詳細，但是應該比較全面吧。主要內容 pa...

you_De 2019-08-19 10:59 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù)，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

李昌杰 2019-08-16 10:40 評論0 收藏0
SegmentFault 技術周刊 Vol.32 - 七夕將至，你的“對象”還好嗎？

摘要：很多情況下，通常一個人類，即創(chuàng)建了一個具體的對象。對象就是數(shù)據(jù)，對象本身不包含方法。類是相似對象的描述，稱為類的定義，是該類對象的藍圖或原型。在中，對象通過對類的實體化形成的對象。一類的對象抽取出來。注意中，對象一定是通過類的實例化來的。 showImg(https://segmentfault.com/img/bVTJ3H?w=900&h=385); 馬上就要到七夕了，離年底老媽老爸...

Lyux 2019-06-28 13:32 評論0 收藏0