利用原型鏈和借用構(gòu)造函數(shù)實現(xiàn)繼承

原型鏈繼承

原型鏈是實現(xiàn)繼承的主要方法纹份,其基本思想是利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法。
在介紹原型鏈之前廷痘,需要了解掌握以下幾點內(nèi)容:
構(gòu)造函數(shù)蔓涧、原型對象、實例對象之間的關(guān)系:
1. 每一個構(gòu)造函數(shù)都有一個原型對象笋额,原型對象都包含有一個指向其構(gòu)造函數(shù)的指針(constructor)元暴;
2. 實例對象包含一個指向原型對象的內(nèi)部指針(_ proto _);
3. 每一個構(gòu)造函數(shù)都有一個prototype屬性兄猩,用來指向它的原型對象

構(gòu)造函數(shù)茉盏、原型對象、實例對象三者之間的關(guān)系.png

如果讓原型對象等于另一個類型的實例枢冤,此時鸠姨,原型對象將包含一個指向另一個原型的指針,相應(yīng)地淹真,另一個原型中也包含著一個指向另一個構(gòu)造函數(shù)的指針讶迁。如此下去,每一個原型對象都是下一個構(gòu)造函數(shù)的實例對象核蘸,這樣就構(gòu)成了實例與原型的鏈條巍糯,就是所謂的原型鏈。

原型鏈示例.png
function Animal() {
            this.name = "animal";
            this.age  =  18;
            this.say  = function() {
                console.log("hellow");
            } 
        }
        //給原型對象添加方法
        Animal.prototype.run = function() {
            console.log("running");
        }
function Person() {
            this.name = "person";
        }
/*******************未構(gòu)建原型鏈之前實例的per對象*****************************************/
        // var per = new Person;
        // console.log(per);
        // per.say();// is not a function
        //因為沒有構(gòu)建原型鏈客扎,所以Person實例的per對象中沒有say()方法
/*******************未構(gòu)建原型鏈之前實例的per對象*****************************************/
        //解決方法:
        // 1.利用原型鏈的繼承關(guān)系祟峦,構(gòu)建原型鏈
        // console.log(per.constructor);//Person
        // console.log(Person.prototype.constructor);//Person

        Person.prototype = new Animal();//原型鏈的核心

        //此時Person的原型對象的constructor屬性指向的是Animal了
        // console.log(per.constructor);//Person
        // console.log(Person.prototype.constructor);//Aniaml
        // 為了保證原型對象的constructor指向不變
        Person.prototype.constructor = Person;//(可以不寫徙鱼,不會對代碼運行造成影響)
        // 構(gòu)建好原型鏈之后再創(chuàng)建per對象2罄ⅰ!疆偿!;
        // 特別注意:要想子類構(gòu)造函數(shù)實例的對象擁有父級的方法(say()),必須先搭建原型鏈關(guān)系即:Person.prototype = new Animal();,再實例對象搓幌。
         var per = new Person();
         console.log(per.name);//animal
         per.say();//hellow  對比未構(gòu)建原型鏈之前的per.say()//pre is not defined
         per.run();//running;

總結(jié):

優(yōu)點:可以繼承父級的所有方法;
缺點:
1.創(chuàng)建子類型的實例時不能向超類型的構(gòu)造函數(shù)傳遞參數(shù)
2.子類實例共享父類引用屬性的問題杆故。

借用構(gòu)造函數(shù)法實現(xiàn)繼承

基本思想就是在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類型構(gòu)造函數(shù)。
介紹借用構(gòu)造函數(shù)之前需要掌握以下幾點
每個函數(shù)都有call()和apply()方法
Function.apply(obj,[參數(shù)2溉愁,參數(shù)3处铛,參數(shù)4...])等同于Function.apply(obj,arguments)
obj:這個對象將代替Function類里this對象
[]:這個是數(shù)組饲趋,它將作為參數(shù)傳給Function
Function.call([obj[,參數(shù)2[, 參數(shù)3[,參數(shù)4 [,.argN]]]]]) (我個人看著這個很別扭,簡單說就是撤蟆,將上面的數(shù)組集合拆為單個的參數(shù)書寫)
Function.call(obj,參數(shù)2奕塑,參數(shù)3,參數(shù)4家肯,...)

 function Animal(name,age) {
            this.name = name;
            this.age  = age ;
            this.say  = function() {
                console.log("hellow");
            } 
        }
        //給原型對象添加方法
        Animal.prototype.run = function() {
            console.log("running");
        }
 function Person(name,age) {
            Animal.call(this,name,age);//核心關(guān)鍵
            // Animal.apply(this,[name,age]);
            // Animal.apply(this,arguments);
        }
         var per    =  new  Person();
         animal.say.call(per);//只傳遞了一個對象參數(shù)
         Animal.call(per,"李明",18);//傳遞了三個參數(shù):參數(shù)1:對象龄砰;參數(shù)2:“李明”;參數(shù)3:18
         console.log(per);
         Animal.call(per,"王磊",21)
         console.log(per);
結(jié)果.jpg

總結(jié):

call()與apply()沒有太大區(qū)別讨衣,只是參數(shù)傳遞方式不同
優(yōu)點:
1.解決了子類實例共享父類引用屬性的問題
2.創(chuàng)建子類實例時换棚,可以向父類構(gòu)造函數(shù)傳參,
缺點:
無法實現(xiàn)函數(shù)復(fù)用反镇,每個子類實例都持有一個新的fun函數(shù)固蚤,太多了就會影響性能,內(nèi)存爆炸(參考別人的歹茶,自己也不太清楚)夕玩。

補充:

實際經(jīng)常將原型鏈和借用構(gòu)造函數(shù)結(jié)合起來使用,即組合繼承惊豺。其背后的思想是使用原型鏈實現(xiàn)原型屬性和方法的繼承燎孟,而通過借用構(gòu)造函數(shù)來實現(xiàn)實例屬性的繼承。這樣扮叨,即通過在原型上定義方法實現(xiàn)了函數(shù)復(fù)用缤弦,用能夠保證每個實例都有自己的屬性。
關(guān)于apply()還有一些其他巧妙用法

apply的一些其他巧妙用法

在調(diào)用apply方法的時候彻磁,第一個參數(shù)是對象宗苍,第二個參數(shù)是一個數(shù)組集合舆绎,但是在調(diào)用父級構(gòu)造函數(shù)的時候,它需要的不是一個數(shù)組,但是跃惫,為什么他給我一個數(shù)組我仍然可以解析成一個個參數(shù)呢?這就是apply的一個巧妙的用法:apply()可以將一個數(shù)組默認的轉(zhuǎn)換成為一個參數(shù)列表
這個如果讓我們用程序來實現(xiàn)將數(shù)組的每一項轉(zhuǎn)換成參數(shù)列表可能會費點功夫求冷,借助apply的這點特性侠草,就方便多了
var max = Math.max.apply(null,[1,2,3,4,6,8,0]); console.log(max);
更多關(guān)于apply的詳細介紹

后記:

這是自己第一次使用markdown寫的筆記,你能想象我寫這篇文章用一天的時間么置吓?把腦袋里的想法用文字表達出來无虚,對于我這個不善表達的人是多么不容易呀。17年衍锚,一起加油友题。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市戴质,隨后出現(xiàn)的幾起案子度宦,更是在濱河造成了極大的恐慌踢匣,老刑警劉巖,帶你破解...
    沈念sama閱讀 206,602評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件戈抄,死亡現(xiàn)場離奇詭異离唬,居然都是意外死亡,警方通過查閱死者的電腦和手機划鸽,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,442評論 2 382
  • 文/潘曉璐 我一進店門输莺,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人漾稀,你說我怎么就攤上這事模闲。” “怎么了崭捍?”我有些...
    開封第一講書人閱讀 152,878評論 0 344
  • 文/不壞的土叔 我叫張陵尸折,是天一觀的道長。 經(jīng)常有香客問我殷蛇,道長实夹,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,306評論 1 279
  • 正文 為了忘掉前任粒梦,我火速辦了婚禮亮航,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘匀们。我一直安慰自己缴淋,他們只是感情好,可當我...
    茶點故事閱讀 64,330評論 5 373
  • 文/花漫 我一把揭開白布泄朴。 她就那樣靜靜地躺著重抖,像睡著了一般。 火紅的嫁衣襯著肌膚如雪祖灰。 梳的紋絲不亂的頭發(fā)上钟沛,一...
    開封第一講書人閱讀 49,071評論 1 285
  • 那天,我揣著相機與錄音局扶,去河邊找鬼恨统。 笑死,一個胖子當著我的面吹牛三妈,可吹牛的內(nèi)容都是我干的畜埋。 我是一名探鬼主播,決...
    沈念sama閱讀 38,382評論 3 400
  • 文/蒼蘭香墨 我猛地睜開眼畴蒲,長吁一口氣:“原來是場噩夢啊……” “哼由捎!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起饿凛,我...
    開封第一講書人閱讀 37,006評論 0 259
  • 序言:老撾萬榮一對情侶失蹤狞玛,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后涧窒,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體心肪,經(jīng)...
    沈念sama閱讀 43,512評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,965評論 2 325
  • 正文 我和宋清朗相戀三年纠吴,在試婚紗的時候發(fā)現(xiàn)自己被綠了硬鞍。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,094評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡戴已,死狀恐怖固该,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情糖儡,我是刑警寧澤伐坏,帶...
    沈念sama閱讀 33,732評論 4 323
  • 正文 年R本政府宣布,位于F島的核電站握联,受9級特大地震影響桦沉,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜金闽,卻給世界環(huán)境...
    茶點故事閱讀 39,283評論 3 307
  • 文/蒙蒙 一纯露、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧代芜,春花似錦埠褪、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,286評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至罚随,卻和暖如春玉工,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背淘菩。 一陣腳步聲響...
    開封第一講書人閱讀 31,512評論 1 262
  • 我被黑心中介騙來泰國打工遵班, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人潮改。 一個月前我還...
    沈念sama閱讀 45,536評論 2 354
  • 正文 我出身青樓狭郑,卻偏偏與公主長得像,于是被迫代替她去往敵國和親汇在。 傳聞我的和親對象是個殘疾皇子翰萨,可洞房花燭夜當晚...
    茶點故事閱讀 42,828評論 2 345

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