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

資訊專欄INFORMATION COLUMN

Javascript 五十問——實(shí)現(xiàn)的繼承多種方式

BlackHole1 / 1479人閱讀

摘要：組合繼承實(shí)現(xiàn)了屬性分離，方法共享下的完美繼承方案繼承我們的主角，，就是對組合繼承的改進(jìn)。這也是為什么在子類構(gòu)造函數(shù)中一定要顯示調(diào)用的原因。

談到繼承，或者更廣義上的：一個(gè)對象可以使用另外一個(gè)對象的屬性或方法。實(shí)現(xiàn)起來無外乎有兩種方式：
apply or call 改變this的作用域
原型繼承 改變__proto__指向，添加作用域鏈

而JavaScript所有的繼承實(shí)現(xiàn)，都是圍繞以上兩點(diǎn)展開的。
1.原型鏈繼承
2.構(gòu)造函數(shù)繼承
3.組合繼承
4.ES6 extends 繼承

原型鏈繼承
function Father(){}
function Son(){}
Son.prototype = new Father()

缺點(diǎn)很明顯：
子類構(gòu)造函數(shù)不能傳遞參數(shù)
子類只是拷貝父類的引用，父類的引用類型的屬性會被所有的子類共享

構(gòu)造函數(shù)繼承
function Father(){}
function Son(){
    Father.apply(this, arguments)
}

解決了參數(shù)和引用共享問題，但是父類方法不能夠共享。

組合繼承
function Father(){}

function Son(){
    Father.apply(this, arguments)
}

Son.prototype = new Father()

實(shí)現(xiàn)了屬性分離，方法共享；es5下的完美繼承方案

ES6繼承

我們的主角，ES6 extends，就是對組合繼承的改進(jìn)。不同的是在子類中，子類作用域和父類作用域誰先誰后的問題。

在ES5中，首先聲明子類的 作用域，然后在將子類的作用域指向父類

在ES6中，是首先將子類的作用域指向父類，然后在此基礎(chǔ)上增強(qiáng)子類的作用域。這也是為什么在子類構(gòu)造函數(shù)中一定要顯示調(diào)用super（）的原因。
參考babel轉(zhuǎn)換后的代碼：

var Son = function (_Father) {
  _inherits(Son, _Person);

  function Son() {
    _classCallCheck(this, Son);
    //為了方便閱讀，簡略了代碼
    var _this = _possibleConstructorReturn(this,Father.call(this));

    _this.gender = "male";
    
    return _this;//返回的是 指向父類的作用域 _this
  }
  return Son;
}(Father);

關(guān)于更詳細(xì)的ES6 Class的實(shí)現(xiàn)機(jī)制，可以參考我的另外一篇文章：聊一聊ES6 CLASS 實(shí)現(xiàn)原理<>

后記

第一次在sifou上發(fā)布文章，添加了一個(gè)專題——Javascript五十問——里面會細(xì)致聊一些關(guān)于JavaScript原生和ES6的內(nèi)容；算是我自己在開發(fā)過程中的一點(diǎn)積累；如果哪位發(fā)現(xiàn)錯(cuò)誤，希望不吝賜教，共同進(jìn)步！

參考文檔

一篇文章理解JS繼承 https://segmentfault.com/a/11...
Javascript 紅寶書
阮一峰 ES6標(biāo)準(zhǔn)入門

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

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

相關(guān)文章

  • JavaScript 五十問——從源碼分析 ES6 Class 的實(shí)現(xiàn)機(jī)制

    摘要：防止類的構(gòu)造函數(shù)以普通函數(shù)的方式調(diào)用。這個(gè)函數(shù)的主要作用是通過給類添加方法，其中將靜態(tài)方法添加到構(gòu)造函數(shù)上，將非靜態(tài)的方法添加到構(gòu)造函數(shù)的原型對象上。 Class是ES6中新加入的繼承機(jī)制，實(shí)際是Javascript關(guān)于原型繼承機(jī)制的語法糖，本質(zhì)上是對原型繼承的封裝。本文將會討論：1、ES6 class的實(shí)現(xiàn)細(xì)2、相關(guān)Object API盤點(diǎn)3、Javascript中的繼承實(shí)現(xiàn)方案盤點(diǎn)...

    LeexMuller 評論0 收藏0

  • JavaScript 五十問——認(rèn)真聊一聊去抖與節(jié)流

    摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動(dòng)和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時(shí)間間隔而去抖動(dòng)會指定事件不觸發(fā)的時(shí)間間隔。 前言 無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動(dòng)和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時(shí)間間隔；而去抖動(dòng)會指定事件不觸發(fā)的時(shí)間間隔...

    chadLi 評論0 收藏0

  • JavaScript 五十問——認(rèn)真聊一聊去抖與節(jié)流

    摘要：前言無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動(dòng)和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時(shí)間間隔而去抖動(dòng)會指定事件不觸發(fā)的時(shí)間間隔。 前言 無論是面試還是在討論瀏覽器優(yōu)化過程中，都會涉及到去抖動(dòng)和節(jié)流的問題?？偟膩碚f，這二者是一種限制事件觸發(fā)頻率的方式。不同的是，節(jié)流會指定事件觸發(fā)的時(shí)間間隔；而去抖動(dòng)會指定事件不觸發(fā)的時(shí)間間隔...

    EscapedDog 評論0 收藏0

  • JavaScript五十問——淺入深出，自己實(shí)現(xiàn)一個(gè) ES 6 Promise

    摘要：以上實(shí)現(xiàn)了最簡單的一個(gè)測試代碼當(dāng)然，這不能算是一個(gè)，目前僅僅實(shí)現(xiàn)了根據(jù)狀態(tài)調(diào)用不同的回調(diào)函數(shù)。靜態(tài)函數(shù)接下來是的各種靜態(tài)函數(shù)每一個(gè)都執(zhí)行完畢后返回總結(jié)現(xiàn)在，一個(gè)完整的對象就完成了。 前言 說到 ES6，Promise 是繞不過的問題；如果說 ES6 的 Class 是基于 Javascript 原型繼承的封裝，那么 Promise 則是對 callback 回調(diào)機(jī)制的改進(jìn)。這篇文章，不...

    hiyayiji 評論0 收藏0

  • JavaScript五十問——對比來說CSS的Grid與FlexBox（上篇）

    摘要：前言春節(jié)假期有幸拜讀了張鑫旭大大的關(guān)于與的兩篇文章見參考文獻(xiàn)，很有收獲自己在開發(fā)的過程中，很多時(shí)候都會采用布局，而與這種方式已經(jīng)很少使用了這次在春假期間學(xué)習(xí)了，深感的好用與便利。相對于，它多出來一個(gè)的屬性，代表拉伸默認(rèn)屬性。 前言 春節(jié)假期有幸拜讀了張鑫旭大大的關(guān)于Flex與Grid的兩篇文章（見參考文獻(xiàn)），很有收獲；自己在開發(fā)的過程中，很多時(shí)候都會采用Flex布局，而Float與in...

    xuhong 評論0 收藏0

發(fā)表評論

0條評論

最新活動(dòng)
閱讀需要支付1元查看
<