這篇文章主要介紹了javascript現(xiàn)繼承的方式有哪些,具有一定借鑒價(jià)值,需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
成都創(chuàng)新互聯(lián)公司基于成都重慶香港及美國(guó)等地區(qū)分布式IDC機(jī)房數(shù)據(jù)中心構(gòu)建的電信大帶寬,聯(lián)通大帶寬,移動(dòng)大帶寬,多線BGP大帶寬租用,是為眾多客戶(hù)提供專(zhuān)業(yè)服務(wù)器托管報(bào)價(jià),主機(jī)托管價(jià)格性?xún)r(jià)比高,為金融證券行業(yè)達(dá)州主機(jī)托管,ai人工智能服務(wù)器托管提供bgp線路100M獨(dú)享,G口帶寬及機(jī)柜租用的專(zhuān)業(yè)成都idc公司。1、原型鏈繼承
核心: 將父類(lèi)的實(shí)例作為子類(lèi)的原型
缺點(diǎn): 父類(lèi)新增原型方法/原型屬性,子類(lèi)都能訪問(wèn)到,父類(lèi)一變其它的都變了
function Person (name) { this.name = name; }; Person.prototype.getName = function () { //對(duì)原型進(jìn)行擴(kuò)展 return this.name; }; function Parent (age) { this.age = age; }; Parent.prototype = new Person('老明'); //這一句是關(guān)鍵 //通過(guò)構(gòu)造器函數(shù)創(chuàng)建出一個(gè)新對(duì)象,把老對(duì)象的東西都拿過(guò)來(lái)。 Parent.prototype.getAge = function () { return this.age; }; // Parent.prototype.getName = function () { //可以重寫(xiě)從父類(lèi)繼承來(lái)的方法,會(huì)優(yōu)先調(diào)用自己的。 // console.log(222); // }; var result = new Parent(22); console.log(result.getName()); //老明 //調(diào)用了從Person原型中繼承來(lái)的方法(繼承到了當(dāng)前對(duì)象的原型中) console.log(result.getAge()); //22 //調(diào)用了從Parent原型中擴(kuò)展來(lái)的方法
2、構(gòu)造繼承
基本思想
借用構(gòu)造函數(shù)的基本思想就是利用call
或者apply
把父類(lèi)中通過(guò)this
指定的屬性和方法復(fù)制(借用)到子類(lèi)創(chuàng)建的實(shí)例中。
因?yàn)?code>this對(duì)象是在運(yùn)行時(shí)基于函數(shù)的執(zhí)行環(huán)境綁定的。也就是說(shuō),在全局中,this
等于window
,而當(dāng)函數(shù)被作為某個(gè)對(duì)象的方法調(diào)用時(shí),this
等于那個(gè)對(duì)象。call
、apply
方法可將一個(gè)函數(shù)的對(duì)象上下文從初始的上下文改變?yōu)橛?thisObj 指定的新對(duì)象。
所以,這個(gè)借用構(gòu)造函數(shù)就是,new
對(duì)象的時(shí)候(new創(chuàng)建的時(shí)候,this
指向創(chuàng)建的這個(gè)實(shí)例),創(chuàng)建了一個(gè)新的實(shí)例對(duì)象,
并且執(zhí)行Parent
里面的代碼,而Parent
里面用call
調(diào)用了Person
,也就是說(shuō)把this
指向改成了指向新的實(shí)例,
所以就會(huì)把Person
里面的this
相關(guān)屬性和方法賦值到新的實(shí)例上,而不是賦值到Person
上面,
所以所有實(shí)例中就擁有了父類(lèi)定義的這些this
的屬性和方法。
因?yàn)閷傩允墙壎ǖ?code>this上面的,所以調(diào)用的時(shí)候才賦到相應(yīng)的實(shí)例中,各個(gè)實(shí)例的值就不會(huì)互相影響了。
核心:使用父類(lèi)的構(gòu)造函數(shù)來(lái)增強(qiáng)子類(lèi)實(shí)例,等于是復(fù)制父類(lèi)的實(shí)例屬性給子類(lèi)(沒(méi)用到原型)
缺點(diǎn): 方法都在構(gòu)造函數(shù)中定義, 只能繼承父類(lèi)的實(shí)例屬性和方法,不能繼承原型屬性/方法,無(wú)法實(shí)現(xiàn)函數(shù)復(fù)用,每個(gè)子類(lèi)都有父類(lèi)實(shí)例函數(shù)的副本,影響性能
function Person (name) { this.name = name; this.friends = ['小李','小紅']; this.getName = function () { return this.name; } }; // Person.prototype.geSex = function () { //對(duì)原型進(jìn)行擴(kuò)展的方法就無(wú)法復(fù)用了 // console.log("男"); // }; function Parent = (age) { Person.call(this,'老明'); //這一句是核心關(guān)鍵 //這樣就會(huì)在新parent對(duì)象上執(zhí)行Person構(gòu)造函數(shù)中定義的所有對(duì)象初始化代碼, // 結(jié)果parent的每個(gè)實(shí)例都會(huì)具有自己的friends屬性的副本 this.age = age; }; var result = new Parent(23); console.log(result.name); //老明 console.log(result.friends); //["小李", "小紅"] console.log(result.getName()); //老明 console.log(result.age); //23 console.log(result.getSex()); //這個(gè)會(huì)報(bào)錯(cuò),調(diào)用不到父原型上面擴(kuò)展的方法
3、組合繼承
組合繼承(所有的實(shí)例都能擁有自己的屬性,并且可以使用相同的方法,組合繼承避免了原型鏈和借用構(gòu)造函數(shù)的缺陷,結(jié)合了兩個(gè)的優(yōu)點(diǎn),是最常用的繼承方式)
核心:通過(guò)調(diào)用父類(lèi)構(gòu)造,繼承父類(lèi)的屬性并保留傳參的優(yōu)點(diǎn),然后再通過(guò)將父類(lèi)實(shí)例作為子類(lèi)原型,實(shí)現(xiàn)函數(shù)復(fù)用
缺點(diǎn):調(diào)用了兩次父類(lèi)構(gòu)造函數(shù),生成了兩份實(shí)例(子類(lèi)實(shí)例將子類(lèi)原型上的那份屏蔽了)
function Person (name) { this.name = name; this.friends = ['小李','小紅']; }; Person.prototype.getName = function () { return this.name; }; function Parent (age) { Person.call(this,'老明'); //這一步很關(guān)鍵 this.age = age; }; Parent.prototype = new Person('老明'); //這一步也很關(guān)鍵 var result = new Parent(24); console.log(result.name); //老明 result.friends.push("小智"); // console.log(result.friends); //['小李','小紅','小智'] console.log(result.getName()); //老明 console.log(result.age); //24 var result1 = new Parent(25); //通過(guò)借用構(gòu)造函數(shù)都有自己的屬性,通過(guò)原型享用公共的方法 console.log(result1.name); //老明 console.log(result1.friends); //['小李','小紅']
4、寄生組合繼承
核心:通過(guò)寄生方式,砍掉父類(lèi)的實(shí)例屬性,這樣,在調(diào)用兩次父類(lèi)的構(gòu)造的時(shí)候,就不會(huì)初始化兩次實(shí)例方法/屬性,避免的組合繼承的缺點(diǎn)
缺點(diǎn):堪稱(chēng)完美,但實(shí)現(xiàn)較為復(fù)雜
function Person(name) { this.name = name; this.friends = ['小李','小紅']; } Person.prototype.getName = function () { return this.name; }; function Parent(age) { Person.call(this,"老明"); this.age = age; } (function () { var Super = function () {}; // 創(chuàng)建一個(gè)沒(méi)有實(shí)例方法的類(lèi) Super.prototype = Person.prototype; Parent.prototype = new Super(); //將實(shí)例作為子類(lèi)的原型 })(); var result = new Parent(23); console.log(result.name); console.log(result.friends); console.log(result.getName()); console.log(result.age);
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享javascript現(xiàn)繼承的方式有哪些內(nèi)容對(duì)大家有幫助,同時(shí)也希望大家多多支持創(chuàng)新互聯(lián),關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,遇到問(wèn)題就找創(chuàng)新互聯(lián),詳細(xì)的解決方法等著你來(lái)學(xué)習(xí)!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)scvps.cn,海內(nèi)外云服務(wù)器15元起步,三天無(wú)理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性?xún)r(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專(zhuān)為企業(yè)上云打造定制,能夠滿(mǎn)足用戶(hù)豐富、多元化的應(yīng)用場(chǎng)景需求。