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

資訊專欄INFORMATION COLUMN

JavaScript繼承的六種方式

wujl596 / 3001人閱讀

這是 最近在學(xué)習(xí)js繼承時(shí)看了多篇文章以及自我總結(jié)的學(xué)習(xí)筆記。

目錄:
一:原型鏈
二:構(gòu)造函數(shù)
三:原型鏈和構(gòu)造函數(shù)組合繼承
四:原型式
五:寄生式
六:寄生組合式

1、原型鏈
function Super(){
  this.name = "lily";
  this.age = 21;
  this.arr = [1,2,3]
}
function Sub(){}
Sub.prototype = new Super();//核心 拿父類實(shí)例來充當(dāng)子類原型對象
var l1 = new Sub();
var l2 = new Sub();
l1.name = "gan";
l1.arr.push(4)
l(l1.name)//"gan"
l(l2.name)//"lily"
l(l1.arr)//[1, 2, 3, 4]
l(l2.arr)//[1, 2, 3, 4]

優(yōu)點(diǎn):easy
缺點(diǎn): 1,原型對象的引用屬性是所有實(shí)例共享的, l2.arr跟著 l1.arr一起變化

2,構(gòu)造函數(shù)
function Super(name,age){
  this.name = name;
  this.age = age;
  this.arr = [1,2,3];
  this.foo = function(){
  //..
  }
}
function Sub(name,age){
  Super.call(this,[name,age])//核心 在子類型構(gòu)造函數(shù)中調(diào)用超類型構(gòu)造函數(shù)
}
var l1 = new Sub("lily",21);
var l2 = new Sub("gan",22);
l1.arr.push(4)
l(l1.name)//["lily", 21]
l(l2.name)//["gan", 22]
l(l1.arr)//[1, 2, 3, 4]
l(l2.arr)//[1, 2, 3]
l(l1.foo === l2.foo)//false

優(yōu)點(diǎn): 解決了子類實(shí)例共享父類引用屬性的問題 可傳參
缺點(diǎn):方法都在構(gòu)造函數(shù)中定義,浪費(fèi)內(nèi)存還不能復(fù)用。在超類型的原型中定義的方法對子類型而言不可見:

Super.prototype.sayName = function(){
  l(this.name)
}
l(l1.sayName)//undefined
3,組合式(最常用)
function Super(name){
  this.name = name;
  this.age = 21;
  this.arr = [1,2,3];
}
Super.prototype.sayName = function(){
  return this.name
}
function Sub(name){
  Super.call(this,name)//核心
}
Sub.prototype = new Super();//核心
Sub.prototype.constructor = Sub;
var l1 = new Sub("lily");
l(l1.sayName())//lily

優(yōu)點(diǎn):從已有對象衍生新對象,不需要創(chuàng)建自定義類型(更像是對象復(fù)制,而不是繼承)
缺點(diǎn):原型引用屬性會被所有實(shí)例共享,因?yàn)槭怯谜麄€(gè)父類對象來充當(dāng)了子類原型對象,所以這個(gè)缺陷無可避免;無法實(shí)現(xiàn)代碼復(fù)用

4,原型式
function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
function Super(){
  this.name = "lily";
  this.age = 21;
  this.arr = [1,2,3,4]
}
Super.prototype.sayName = function(){
  return this.name
}
var Sub = new Super();
l(Sub)//Super {name: "lily", age: 21}
var sup = object(Sub)
l(sup)//F {__proto__: Super}得到一個(gè)“純潔”的新對象(“純潔”是因?yàn)闆]有實(shí)例屬性),再逐步增強(qiáng)之(填充實(shí)例屬性)
sup.sex = "girl"
l(sup)//F {sex: "girl",__proto__: Super}
l(sup.arr) //[1,2,3,4]
l(sup1.arr)//[1,2,3,4]

優(yōu)點(diǎn):從已有對象衍生新對象,不需要創(chuàng)建自定義類型(更像是對象復(fù)制,而不是繼承)
缺點(diǎn):原型引用屬性會被所有實(shí)例共享,因?yàn)槭怯谜麄€(gè)父類對象來充當(dāng)了子類原型對象,所以這個(gè)缺陷無可避免;無法實(shí)現(xiàn)代碼復(fù)用

5,寄生式
function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
function Super(){
  this.name = "lily";
  this.age = 21;
  this.arr = [1,2,3,4]
}
Super.prototype.sayName = function(){
  return this.name
}
function getSubObject(obj){
  // 創(chuàng)建新對象
  var clone = object(obj); // 核心
  // 增強(qiáng)
  clone.attr1 = 1;
  clone.attr2 = 2;
  //clone.attr3...
  return clone;
}
var Sub = getSubObject(new Super());
l(Sub)//Super {name: "lily", age: 21}
var sup = object(Sub)
var sup1 = object(Sub)
l(sup)//F {__proto__: Super}得到一個(gè)“純潔”的新對象(“純潔”是因?yàn)闆]有實(shí)例屬性),再逐步增強(qiáng)之(填充實(shí)例屬性)
l(sup.arr)
l(sup1.arr)
6,寄生組合式
function object(o){
  function F(){}
  F.prototype = o;
  return new F();
}
function Super(){
  this.name = "lily";
  this.age = 21;
  this.arr = [1,2,3,4]
}
Super.prototype.sayName = function(){
  return this.name
}
function Sub(){
  Super.call(this)
}
var proto = object(Super.prototype); // 核心
proto.constructor = Sub; // 核心
Sub.prototype = proto; // 核心

var sub = new Sub();
l(sub.name);
l(sub.arr);

用object(Super.prototype);切掉了原型對象上多余的那份父類實(shí)例屬性

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/86624.html

相關(guān)文章

  • JavaScript常見六種繼承方式

    摘要:組合繼承也是需要修復(fù)構(gòu)造函數(shù)指向的這種方式融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn),是中最常用的繼承模式。的繼承機(jī)制完全不同,實(shí)質(zhì)是先將父類實(shí)例對象的屬性和方法,加到上面所以必須先調(diào)用方法,然后再用子類的構(gòu)造函數(shù)修改。 前言 面向?qū)ο缶幊毯苤匾囊粋€(gè)方面,就是對象的繼承。A 對象通過繼承 B 對象,就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復(fù)用是非常有用的。 大部分面向?qū)ο蟮木幊陶Z言,...

    silvertheo 評論0 收藏0
  • JavaScript常見六種繼承方式

    摘要:組合繼承也是需要修復(fù)構(gòu)造函數(shù)指向的這種方式融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn),是中最常用的繼承模式。的繼承機(jī)制完全不同,實(shí)質(zhì)是先將父類實(shí)例對象的屬性和方法,加到上面所以必須先調(diào)用方法,然后再用子類的構(gòu)造函數(shù)修改。 前言 面向?qū)ο缶幊毯苤匾囊粋€(gè)方面,就是對象的繼承。A 對象通過繼承 B 對象,就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復(fù)用是非常有用的。 大部分面向?qū)ο蟮木幊陶Z言,...

    wyk1184 評論0 收藏0
  • JavaScript常見六種繼承方式

    摘要:組合繼承也是需要修復(fù)構(gòu)造函數(shù)指向的這種方式融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn),是中最常用的繼承模式。的繼承機(jī)制完全不同,實(shí)質(zhì)是先將父類實(shí)例對象的屬性和方法,加到上面所以必須先調(diào)用方法,然后再用子類的構(gòu)造函數(shù)修改。 前言 面向?qū)ο缶幊毯苤匾囊粋€(gè)方面,就是對象的繼承。A 對象通過繼承 B 對象,就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復(fù)用是非常有用的。 大部分面向?qū)ο蟮木幊陶Z言,...

    anyway 評論0 收藏0
  • JavaScript常見六種繼承方式

    摘要:組合繼承也是需要修復(fù)構(gòu)造函數(shù)指向的這種方式融合原型鏈繼承和構(gòu)造函數(shù)的優(yōu)點(diǎn),是中最常用的繼承模式。的繼承機(jī)制完全不同,實(shí)質(zhì)是先將父類實(shí)例對象的屬性和方法,加到上面所以必須先調(diào)用方法,然后再用子類的構(gòu)造函數(shù)修改。 前言 面向?qū)ο缶幊毯苤匾囊粋€(gè)方面,就是對象的繼承。A 對象通過繼承 B 對象,就能直接擁有 B 對象的所有屬性和方法。這對于代碼的復(fù)用是非常有用的。 大部分面向?qū)ο蟮木幊陶Z言,...

    helloworldcoding 評論0 收藏0
  • JavaScript六種基本數(shù)據(jù)類型

    摘要:數(shù)據(jù)類型數(shù)據(jù)類型指的就是字面量類型在中一共有六種數(shù)據(jù)類型字符串?dāng)?shù)值布爾值空值未定義對象其中屬于基本數(shù)據(jù)類型而屬于引用數(shù)據(jù)類型字符串在中使用字符串需要使用引號括起來使用雙引號或單引號都可以不能混合使用引號不能嵌套數(shù)值型在中所有數(shù)值類型都 ?? ? ? ???????????????????? ???????數(shù)據(jù)類型 數(shù)據(jù)類型指的就是字面量類型 在JS中一共有六種數(shù)據(jù)類型 ...

    CollinPeng 評論0 收藏0

發(fā)表評論

0條評論

wujl596

|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<