JS面向?qū)ο螅ɡ^承)

1.什么繼承求晶?

繼承就是某個(gè)對象可以訪問另一個(gè)對象的屬性和方法章姓,我們認(rèn)為他們之間存在繼承關(guān)系席楚。

舉例:


function Chinese(){}

var jack=new Chinese();

//jack可以訪問到自身的屬性讶凉,還可以訪問到Chinese.prototype對象中的屬性和方法问欠,

//--->我們說jack繼承自Chinese.prototype

//--->jack.__proto__===Chinese.prototype

2.繼承主流的實(shí)現(xiàn)方式:

1.原型式繼承

a.擴(kuò)展原型對象

 function Person(){}
    //一個(gè)函數(shù)創(chuàng)建好之后,就會又一個(gè)默認(rèn)的原型對象感昼,需要給這個(gè)對象添加屬性装哆、方法,我們把這樣的方式稱之為擴(kuò)展原型對象實(shí)現(xiàn)繼承
    Person.prototype.run=function(){
        console.log("run");
    };
    var p1=new Person();
    console.log(p1.constructor);//Person
    //p1
    //p1.__proto__--->Person.prototype
    console.log(p1.run);
    //有時(shí)候我們需要給原型對象中擴(kuò)展多個(gè)屬性和方法定嗓,如果使用擴(kuò)展原型對象來實(shí)現(xiàn)蜕琴,出現(xiàn)一些重復(fù)的代碼,我們思考能不能把這些重復(fù)封裝起來宵溅,解決方案:替換原型對象實(shí)現(xiàn)繼承
    Person.prototype.run1=function(){
        console.log("run");
    };
    Person.prototype.run2=function(){
        console.log("run");
    };
    Person.prototype.run3=function(){
        console.log("run");
    };
    Person.prototype.run4=function(){
        console.log("run");
    };
    Person.prototype.run5=function(){
        console.log("run");
    };

b.替換原型對象

    function Person(){}
    //一個(gè)函數(shù)創(chuàng)建好之后凌简,就會又一個(gè)默認(rèn)的原型對象,需要給這個(gè)對象添加屬性恃逻、方法雏搂,我們把這樣的方式稱之為擴(kuò)展原型對象實(shí)現(xiàn)繼承

    //替換原型對象
    Person.prototype={
        constructor:Person,
        r1:function(){},
        r2:function(){},
        r3:function(){}
    };

    var p1=new Person();
    console.log(p1.r1);//p1.__prpto__:Person.prototype

2.混入繼承(拷貝繼承)

function foo(name,age,gender,height,width,language,color){}

    foo("zhangsan",20,"男",180,180,"中文","黃色");

    function foo2(obj){
        this.name=obj.name;
        this.age=obj.age;
        this.gender=obj.gender;
        this.height=obj.height;
        this.language=obj.language;
        this.width=obj.width;
        this.color=obj.color;

        //上面的代碼又產(chǎn)生了很多的重復(fù)的字符,就希望有某種方式可以減少重復(fù)
        //解決方案:混入繼承:for...in循環(huán)
        for (var key in obj) {//key保存了obj中每一個(gè)屬性的名稱:字符串的值
            //獲取指定屬性的值:
            this[key]=obj[key];//舉例:this["name"]=obj["name"]
        }
    }
    foo2({
        name:"zhagnsan",age:18,
        gender:"男",height:180,width:200,language:"英語",
        color:"白色"
    });


    /**
     * 將某個(gè)對象中的屬性分別拷貝到另一個(gè)對象中
     * 把提供數(shù)據(jù)的對象稱之為數(shù)據(jù)源對象(source object)
     * 把接收數(shù)據(jù)的對象稱之為目標(biāo)對象(target object)
     */
    function mixin(target,source){
        for (var key in source) {
            //將source中的指定的屬性拷貝到target中-->給target添加同名屬性
            target[key]=source[key];
        }

        //告訴用戶拷貝的結(jié)果:
        return target;
    }

    var o1={name:"zhagnsan",age:25,gender:"男"};
    var o2={};
    console.log(mixin(o2,o1));

    var o3={name:"zhagnsan",age:25,gender:"男"};
    var o4={length:10,gender:"女"};
    console.log(mixin(o4,o3));//o4-->{name:"zhangsan",age:25,gender:"男",length:10}

3.原型式繼承(經(jīng)典繼承)

 //原型式繼承:經(jīng)典繼承-->由道格拉斯在蝴蝶書(javascript語言精粹)中提出

    function mixin(target,source){
        for (var key in source) {
            //將source中的指定的屬性拷貝到target中-->給target添加同名屬性
            target[key]=source[key];
        }

        //告訴用戶拷貝的結(jié)果:
        return target;
    }
    var o3={name:"zhagnsan",age:25,gender:"男"};
    var o4={length:10,gender:"女"};

    //希望o4中可以訪問到length/gender:"女"/-->name/age
    //實(shí)現(xiàn)思路:讓o3和o4之間產(chǎn)生某個(gè)聯(lián)系(繼承關(guān)系)
    //      -->o4繼承自o3
    //      -->o4.__proto__==o3     -->o4就不僅可以訪問到自己的屬性寇损,也可以正常訪問到o3的一些屬性

    //不能直接使用:o4.__proto__==o3凸郑,因?yàn)開_proto__屬性是非標(biāo)準(zhǔn)屬性,具有瀏覽器兼容性問題
    //曲線救國的方式:
    //想到之前:function Person(){}   var p1=new Person();  p1.__proto__===Person.prototype

    //為了實(shí)現(xiàn)上面的關(guān)系矛市,需要進(jìn)行相關(guān)的轉(zhuǎn)換芙沥,也就是通過某個(gè)構(gòu)造函數(shù)創(chuàng)建一個(gè)實(shí)例o4,執(zhí)行構(gòu)造函數(shù)的原型指向o3
    function F(){}
    F.prototype=o3;//讓F的實(shí)例都可以訪問到o3中的屬性
    var o5=new F();//o5.__proto__===o3
    o5.length=10;
    o5.gender="女";

    console.log(o5.length);//自己的length
    console.log(o5.gender);//自己的gender
    console.log(o5.name);//自己沒有,訪問o3的name屬性

    //總結(jié):
    //原型式繼承的功能:創(chuàng)建一個(gè)新的對象而昨,讓新的對象可以繼承自指定的對象救氯,從而這個(gè)新的對象既可以訪問到自己的屬性,也可以訪問到指定的對象的屬性

    //現(xiàn)代瀏覽器中:Object.create()實(shí)現(xiàn)了原型式繼承(經(jīng)典繼承)
    //ES5(js語言規(guī)范的第五個(gè)版本)——Object.create()--->IE9以下不支持
    //var o6=Object.create(o3);//o6繼承自o3



    //如果希望寫出一段代碼配紫,實(shí)現(xiàn)原型式繼承径密,讓它可以兼容所有的瀏覽器

    //執(zhí)行過程:首先判斷瀏覽器是否存在這個(gè)方法,如果不存在躺孝,這個(gè)瀏覽器自己沒有實(shí)現(xiàn)經(jīng)典繼承享扔,就幫他實(shí)現(xiàn)
    //                              如果已經(jīng)存在,就不需要進(jìn)行任何操作
    //經(jīng)過上面的處理之后植袍,就實(shí)現(xiàn)了可以在任意瀏覽器版本中惧眠,可以調(diào)用Object.create()
    if(!Object.create){
        Object.create=function(parent){
            function F(){}
            F.prototype=parent;
            return new F();
        };
    }
    alert(Object.create.toString());

    var o7=Object.create(o3);//o6繼承自o3
    alert(o7.name);


4.借用構(gòu)造函數(shù)繼承

5.寄生繼承、寄生組合于个、組合繼承

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末氛魁,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子厅篓,更是在濱河造成了極大的恐慌秀存,老刑警劉巖,帶你破解...
    沈念sama閱讀 216,372評論 6 498
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件羽氮,死亡現(xiàn)場離奇詭異或链,居然都是意外死亡,警方通過查閱死者的電腦和手機(jī)档押,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,368評論 3 392
  • 文/潘曉璐 我一進(jìn)店門澳盐,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人令宿,你說我怎么就攤上這事叼耙。” “怎么了粒没?”我有些...
    開封第一講書人閱讀 162,415評論 0 353
  • 文/不壞的土叔 我叫張陵筛婉,是天一觀的道長。 經(jīng)常有香客問我癞松,道長倾贰,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,157評論 1 292
  • 正文 為了忘掉前任拦惋,我火速辦了婚禮,結(jié)果婚禮上安寺,老公的妹妹穿的比我還像新娘厕妖。我一直安慰自己,他們只是感情好挑庶,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,171評論 6 388
  • 文/花漫 我一把揭開白布言秸。 她就那樣靜靜地躺著软能,像睡著了一般。 火紅的嫁衣襯著肌膚如雪举畸。 梳的紋絲不亂的頭發(fā)上查排,一...
    開封第一講書人閱讀 51,125評論 1 297
  • 那天,我揣著相機(jī)與錄音抄沮,去河邊找鬼跋核。 笑死,一個(gè)胖子當(dāng)著我的面吹牛叛买,可吹牛的內(nèi)容都是我干的砂代。 我是一名探鬼主播,決...
    沈念sama閱讀 40,028評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼率挣,長吁一口氣:“原來是場噩夢啊……” “哼刻伊!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起椒功,我...
    開封第一講書人閱讀 38,887評論 0 274
  • 序言:老撾萬榮一對情侶失蹤捶箱,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后动漾,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體丁屎,經(jīng)...
    沈念sama閱讀 45,310評論 1 310
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,533評論 2 332
  • 正文 我和宋清朗相戀三年谦炬,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了悦屏。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,690評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡键思,死狀恐怖础爬,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情吼鳞,我是刑警寧澤看蚜,帶...
    沈念sama閱讀 35,411評論 5 343
  • 正文 年R本政府宣布,位于F島的核電站赔桌,受9級特大地震影響供炎,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜疾党,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,004評論 3 325
  • 文/蒙蒙 一音诫、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧雪位,春花似錦竭钝、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽卧波。三九已至,卻和暖如春庇茫,著一層夾襖步出監(jiān)牢的瞬間港粱,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,812評論 1 268
  • 我被黑心中介騙來泰國打工旦签, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留查坪,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 47,693評論 2 368
  • 正文 我出身青樓顷霹,卻偏偏與公主長得像咪惠,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子淋淀,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,577評論 2 353

推薦閱讀更多精彩內(nèi)容

  • 1.繼承(接口繼承和實(shí)現(xiàn)繼承) 繼承是 OO 語言中的一個(gè)最為人津津樂道的概念遥昧。許多 OO 語言都支持兩種繼承方式...
    believedream閱讀 947評論 0 3
  • js中的this:當(dāng)前觸發(fā)事件的對象(元素)觸發(fā)這個(gè)函數(shù)的對象(看上下文)js中怎么創(chuàng)造對象:var obj=ne...
    BrightenSun閱讀 2,497評論 0 5
  • 本章內(nèi)容 理解對象屬性 理解并創(chuàng)建對象 理解繼承 面向?qū)ο笳Z言有一個(gè)標(biāo)志袍辞,那就是它們都有類的概念鞋仍,而通過類可以創(chuàng)建...
    悶油瓶小張閱讀 850評論 0 1
  • 1、//call繼承 } 2搅吁、//原型繼承 3威创、//組合繼承 4、//冒充繼承
    Simon_s閱讀 281評論 0 0
  • 嫁個(gè)老公等受氣 家公家婆最冤氣 兒女不聽真激氣 做個(gè)女人好谷氣 生活艱難不景氣 大霧迷蒙又濕氣 何日云開見朝氣 見...
    芬芳花草的香味閱讀 248評論 0 0