Javascript中的apply和call繼承

call實(shí)現(xiàn)繼承

call這里call的意思就是把a(bǔ)nimal的方法應(yīng)用到cat這個(gè)對(duì)象身上酣难,也就是animal的屬性創(chuàng)建到了cat里面,所以cat就繼承了animal的方法

function animal(a, b) {
            this.type = 'animal'
            this.behavior = function(){
                console.log(this.type+" is running")
            }
        }

        function cat(a, b) {
            this.name = 'wsscat'
            //這里call的意思就是把a(bǔ)nimal的方法應(yīng)用到cat這個(gè)對(duì)象身上
            //所以cat就繼承了animal的方法
            animal.call(this);
        }

        console.log(new cat())
qq 20160924165406
qq 20160924165406

call實(shí)現(xiàn)多重繼承

當(dāng)然我們可以繼承多個(gè)構(gòu)造函數(shù)兽泣,這就是多重繼承

function animal(a, b) {
            this.type = 'animal'
            this.behavior = function(){
                console.log(this.type+" is running")
            }
        }

        function wsscat(a, b) {
            this.age = 0
        }

        function cat(a, b) {
            this.name = 'wsscat'
            //這里call的意思就是把a(bǔ)nimal的方法應(yīng)用到cat這個(gè)對(duì)象身上
            //所以cat就繼承了animal的方法
            animal.call(this);
            wsscat.call(this);
        }

        console.log(new cat())
qq20160925-0
qq20160925-0

只要在cat的構(gòu)造函數(shù)中有多個(gè)call就可以,此時(shí)的cat繼承了wsscat和animal

apply和call的區(qū)別

其實(shí)apply和call這兩個(gè)方法基本上是差不多的赂摆,區(qū)別在于call的第二個(gè)參數(shù)可以是任意類型相满,而apply的第二個(gè)參數(shù)必須是數(shù)組据某,也可以是arguments(即傳給構(gòu)造函數(shù)的參數(shù))

例如我們把上面的代碼稍微改一下,如果此時(shí)我在new構(gòu)造函數(shù)cat的時(shí)候傳入?yún)?shù)new cat('wsscat','cute')我們的cat能接收arguments寄纵,但是如果此時(shí)繼承是animal.call(this)鳖敷,沒有給call傳第二個(gè)參數(shù)的時(shí)候,生成的對(duì)象中type的值就會(huì)是undefined程拭,所以為了讓這個(gè)值能夠讓animal接收定踱,我們可以在animal中傳入第二個(gè)參數(shù)animal.call(this,type)

function animal(type) {
            this.type = type
            this.behavior = function(){
                console.log(this.type+" is running")
            }
       }

        function cat(name, type) {
            this.name = name
            //這里call的意思就是把a(bǔ)nimal的方法應(yīng)用到cat這個(gè)對(duì)象身上
            //所以cat就繼承了animal的方法
            //animal.call(this);//type undefined
            //animal.call(this,type);//type cute
            //animal.call(this,arguments[1]);//type cute
            //animal.call(this,arguments);//type ['wsscat','cute']
            animal.apply(this,arguments)//type: wsscat
        }

        console.log(new cat('wsscat','cute'))

這里用apply就很方便,因?yàn)閍rguments是數(shù)組恃鞋,可以全部傳給animal崖媚,而call就要一個(gè)個(gè)地傳過去

  • animal.call(this);//type undefined
  • animal.call(this,type);//type cute
  • animal.call(this,arguments[1]);//type cute
  • animal.call(this,arguments);//type ['wsscat','cute']
  • animal.apply(this,arguments)//type: wsscat

繼承的優(yōu)化

如果構(gòu)造函數(shù)this綁定太多屬性(比如一些共同方法)亦歉,在實(shí)例化后會(huì)造成浪費(fèi),為此我們一般會(huì)使用原型鏈來優(yōu)化畅哑,但是使用原型鏈之后我們的apply和call的繼承方法就會(huì)失效
為此我們一般使用混合的寫法肴楷,使用原型鏈和(apply或者call)方法進(jìn)行繼承
具體兩句話
讓子的原型鏈指向父的實(shí)例(父實(shí)例化的對(duì)象)
cat.prototype = new animal();
讓父的屬性創(chuàng)建在子的this上
animal.call(this, type)
整體代碼如下,那么就會(huì)讓父原型鏈的屬性和this上的屬性都得到繼承

function animal(type) {
            this.type = type
            this.behavior = function() {
                console.log(this.type + " is running")
            }
        }
        animal.prototype.action = function() {
            console.log("running")
        }

        function cat(name, type) {
            this.name = name
            animal.call(this, type)
        }

        cat.prototype = new animal();
        console.log(new cat('wsscat', 'cute'));
        (new cat('wsscat')).action() //running
qq20160925-1
qq20160925-1
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末荠呐,一起剝皮案震驚了整個(gè)濱河市赛蔫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌泥张,老刑警劉巖呵恢,帶你破解...
    沈念sama閱讀 206,126評(píng)論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異媚创,居然都是意外死亡渗钉,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,254評(píng)論 2 382
  • 文/潘曉璐 我一進(jìn)店門钞钙,熙熙樓的掌柜王于貴愁眉苦臉地迎上來鳄橘,“玉大人,你說我怎么就攤上這事歇竟』舆耄” “怎么了抵恋?”我有些...
    開封第一講書人閱讀 152,445評(píng)論 0 341
  • 文/不壞的土叔 我叫張陵焕议,是天一觀的道長。 經(jīng)常有香客問我弧关,道長盅安,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 55,185評(píng)論 1 278
  • 正文 為了忘掉前任世囊,我火速辦了婚禮别瞭,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘株憾。我一直安慰自己蝙寨,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,178評(píng)論 5 371
  • 文/花漫 我一把揭開白布嗤瞎。 她就那樣靜靜地躺著墙歪,像睡著了一般。 火紅的嫁衣襯著肌膚如雪贝奇。 梳的紋絲不亂的頭發(fā)上虹菲,一...
    開封第一講書人閱讀 48,970評(píng)論 1 284
  • 那天,我揣著相機(jī)與錄音掉瞳,去河邊找鬼毕源。 笑死浪漠,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的霎褐。 我是一名探鬼主播址愿,決...
    沈念sama閱讀 38,276評(píng)論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼瘩欺!你這毒婦竟也來了必盖?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,927評(píng)論 0 259
  • 序言:老撾萬榮一對(duì)情侶失蹤俱饿,失蹤者是張志新(化名)和其女友劉穎歌粥,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體拍埠,經(jīng)...
    沈念sama閱讀 43,400評(píng)論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡失驶,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,883評(píng)論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了枣购。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片嬉探。...
    茶點(diǎn)故事閱讀 37,997評(píng)論 1 333
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖棉圈,靈堂內(nèi)的尸體忽然破棺而出涩堤,到底是詐尸還是另有隱情,我是刑警寧澤分瘾,帶...
    沈念sama閱讀 33,646評(píng)論 4 322
  • 正文 年R本政府宣布胎围,位于F島的核電站,受9級(jí)特大地震影響德召,放射性物質(zhì)發(fā)生泄漏白魂。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,213評(píng)論 3 307
  • 文/蒙蒙 一上岗、第九天 我趴在偏房一處隱蔽的房頂上張望福荸。 院中可真熱鬧,春花似錦肴掷、人聲如沸敬锐。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,204評(píng)論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽台夺。三九已至,卻和暖如春栋烤,著一層夾襖步出監(jiān)牢的瞬間谒养,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 31,423評(píng)論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留买窟,地道東北人丰泊。 一個(gè)月前我還...
    沈念sama閱讀 45,423評(píng)論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像始绍,于是被迫代替她去往敵國和親瞳购。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,722評(píng)論 2 345

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