js各種方法繼承以及優(yōu)缺點(diǎn)

Cristalven 發(fā)布于2019-08-26 12:14 / 557人閱讀

摘要：的屬性是指向的，繼承的屬性在寄生式繼承創(chuàng)建一個(gè)僅用于封裝繼承過(guò)程的函數(shù)，該函數(shù)在內(nèi)部以某種形式來(lái)做增強(qiáng)對(duì)象，最后返回對(duì)象。缺點(diǎn)跟構(gòu)造函數(shù)模式一樣，每次創(chuàng)建對(duì)象都會(huì)創(chuàng)建一遍方法。

前言

上文講到j(luò)s中的原型鏈，這篇文章對(duì)每種繼承方式具體分析一下

原型鏈繼承

原型鏈繼承就是將父類(lèi)的實(shí)例賦給子類(lèi)的原型對(duì)象,話(huà)不多說(shuō)，看下代碼

function parent(name){
    this.name = "111";
}
parent.prototype.getName = function(){
    console.log(this.name)
}
function child(){}
child.prototype = new parent();
const child1 = new child()
child1.getName();//111
console.log(child.name);//111

優(yōu)點(diǎn): 可以直接繼承父類(lèi)的屬性和方法,這里的屬性繼承是通過(guò)__proto__找到的，不是實(shí)例本身?yè)碛械?br>缺點(diǎn): 1.不能向父類(lèi)傳參 2.引用屬性會(huì)被所有實(shí)例共享

function parent(){
    this.name = ["111","2222"]
}
parent.prototype.getName = function(){
    console.log(this.name)
}
function child(){}
child.prototype = new parent();
const child1 = new child();
const child2 = new child();
child1.name.push("aaa")
console.log(child1.name,child2.name)//["111","2222","aaa"]

3.child的constructor指向parent，應(yīng)該予以修復(fù)

child.prototype.constructor = child;

構(gòu)造函數(shù)繼承

構(gòu)造函數(shù)繼承就是在子類(lèi)調(diào)用父類(lèi),看代碼

function parent(name){
    this.name = name;
}
function child(name){
   parent.call(this,name);
}
const child1 = new child("child");
console.log(child1.name)//child

優(yōu)點(diǎn):可以繼承父類(lèi)的屬性(這里的屬性繼承是實(shí)例本身自己的)，可以向父類(lèi)傳參，引用類(lèi)型不會(huì)被所有實(shí)例共享,constructor還是指向自己child
缺點(diǎn)：不能繼承父類(lèi)原型上的方法，方法都在構(gòu)造函數(shù)中定義，每次創(chuàng)建實(shí)例都會(huì)創(chuàng)建一遍方法。

function parent(name){
    this.name = name;
    this.arr = ["111"]
}
function child(name){
   parent.call(this,name);
}
const child1 = new child("child1");
const child2 = new child("child2")
child1.arr.push("222");
console.log(child1.arr,child2.arr)//(2)?["111", "222"] ["111"]

組合繼承

如果結(jié)合原型繼承和構(gòu)造函數(shù)繼承，這樣就可以結(jié)合其優(yōu)點(diǎn)，摒棄其缺點(diǎn)了，這就是組合繼承

function parent(name){
   this.name = name;
   this.arr = ["111"]
}
parent.prototype.getName = function(){
   console.log(this.name)
}
function child(name){
    parent.call(this,name)
}
child.prototype = new parent();
const child1 = new child("child1");
const child2 = new child("child2");
child1.arr.push("222");
child1.getName();//child1
console.log(child1.arr,child2.arr)//2)?["111", "222"] ["111"]

優(yōu)點(diǎn): 可以向父類(lèi)傳參，可以繼承父類(lèi)的屬性（子類(lèi)會(huì)有從父類(lèi)繼承的屬性，__proto__上基本屬性是undefined，引用屬性是有的，看下圖）和原型上的方法，引用屬性不會(huì)被共享

缺點(diǎn)：一個(gè)實(shí)例會(huì)實(shí)例化父類(lèi)兩次，parent.call(this,name)調(diào)用一次，child.prototype = new parent()調(diào)用一次，constructor指向了parent

原型繼承

function create(o){
   function F(){};
   F.prototype = o;
   return new F();
}

原型繼承其實(shí)就是es5的object.create()的實(shí)現(xiàn)
看下這段代碼

const person = {
   name: "name",
   arr: ["111","222"]
}
const p1 = create(person);
const p2 = create(person);
p1.name = "p1";
p1.arr.push("aaa");
console.log(p1.name,p2.name);//p1,name
console.log(p1.arr,p2.arr);//(3)?["111", "222", "aaa"] (3)?["111", "222", "aaa"]

缺點(diǎn)：會(huì)共享引用屬性
注意:修改p1.name的值，p2.name的值并未發(fā)生改變，并不是因?yàn)閜1和p2有獨(dú)立的 name 值，而是因?yàn)閜1.name = "p1"，給person1添加了 name 值，并非修改了原型上的 name 值。p1,p2的constructor屬性是指向object的，繼承的屬性在__proto__

寄生式繼承

創(chuàng)建一個(gè)僅用于封裝繼承過(guò)程的函數(shù)，該函數(shù)在內(nèi)部以某種形式來(lái)做增強(qiáng)對(duì)象，最后返回對(duì)象。

function createObj (o) {
  var clone = object.create(o);
  clone.sayName = function () {
    console.log("hi");
  }
  return clone;
}

缺點(diǎn)：跟構(gòu)造函數(shù)模式一樣，每次創(chuàng)建對(duì)象都會(huì)創(chuàng)建一遍方法。

寄生組合式繼承

終極繼承??！寄生組合式繼承，結(jié)合了以上的優(yōu)點(diǎn)，來(lái)看下代碼
組合繼承的缺點(diǎn)就是會(huì)調(diào)用兩次父類(lèi)，如何避免調(diào)用兩次呢？能不能直接讓子類(lèi)的prototype訪(fǎng)問(wèn)到父類(lèi)的prototype？當(dāng)然可以??！看下面的代碼

function parent(name){
   this.name = name;
   this.arr = ["111"]
}
parent.prototype.getName = function(){
   console.log(this.name)
}
function child(name){
    parent.call(this,name)
}
//注意!!關(guān)鍵!!
function F(){}
F.prototype = parent.prototype;
child.prototype = new F();

const c1 = new child("c1");
const c2 = new child("c2");
c1.arr.push("ccc");
c1.name = "name";
c1.getName();//name
c2.getName();//c2
console.log(c1,c2);//child?{name: "name", arr: Array(2)} child?{name: "c2", arr: Array(1)}

優(yōu)點(diǎn)：可以繼承父類(lèi)的屬性和原型上的方法，實(shí)例間不會(huì)共享引用屬性，基本屬性也可以繼承變成自己的屬性，不會(huì)執(zhí)行兩遍父類(lèi)

缺點(diǎn): 子類(lèi)的constructor指向指向了父類(lèi),應(yīng)該修復(fù)之，可以改寫(xiě)如下
可以改寫(xiě)寫(xiě)上面的關(guān)鍵步驟

function create(o){
   function F(){}
   F.prototype = o;
   return new F();
}
function prototype(child,parent){
   const p = create(parent.prototype);
   p.constructor = child;
   child.prototype = p;
}

GPU云服務(wù)器云服務(wù)器 javascript繼承方法 java繼承方法 php繼承重寫(xiě)方法 php 構(gòu)造方法繼承

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/108306.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Cristalven

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

程序員的悲哀是什么？

閱讀 925·2021-11-25 09:43
軟件測(cè)試剛?cè)胄斜乜矗?測(cè)試基本流程、測(cè)試用例全在這里

閱讀 1301·2021-11-17 09:33
通過(guò)css3動(dòng)畫(huà)和opacity透明度實(shí)現(xiàn)呼吸燈效果

閱讀 3026·2019-08-30 15:44
css常用布局

閱讀 3316·2019-08-29 17:16
“位置”在css里的細(xì)節(jié)

閱讀 485·2019-08-28 18:20
taro的坑：子組件的默認(rèn)屬性和父組件中修改子組件樣式問(wèn)題以及應(yīng)用復(fù)雜數(shù)據(jù)

閱讀 1645·2019-08-26 13:54
js各種方法繼承以及優(yōu)缺點(diǎn)

閱讀 558·2019-08-26 12:14
【JavaScript】面向?qū)ο笾?/a>

閱讀 2180·2019-08-26 12:14

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

js各種方法繼承以及優(yōu)缺點(diǎn)

相關(guān)文章

深入理解JavaScript

js繼承從入門(mén)到理解

javascript 中各種繼承方式的優(yōu)缺點(diǎn)

js中對(duì)數(shù)據(jù)類(lèi)型的總結(jié)及判斷數(shù)據(jù)類(lèi)型的各種方法及優(yōu)缺點(diǎn)

JavaScript之深入各種繼承

發(fā)表評(píng)論

0條評(píng)論

Cristalven

男|高級(jí)講師

TA的文章

程序員的悲哀是什么？

軟件測(cè)試剛?cè)胄斜乜矗?測(cè)試基本流程、測(cè)試用例全在這里

通過(guò)css3動(dòng)畫(huà)和opacity透明度實(shí)現(xiàn)呼吸燈效果

css常用布局

“位置”在css里的細(xì)節(jié)

taro的坑：子組件的默認(rèn)屬性和父組件中修改子組件樣式問(wèn)題以及應(yīng)用復(fù)雜數(shù)據(jù)