国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專(zhuān)欄INFORMATION COLUMN

JS之理解ES6 繼承extends

starsfun / 2717人閱讀

摘要：理解繼承在中對(duì)繼承有了更友好的方式。總的來(lái)說(shuō)的的實(shí)質(zhì)和以前的繼承方式是一致的，但是有了更好的，更清晰的表現(xiàn)形式。

理解ES6繼承extends 
1.在es6中對(duì)繼承有了更友好的方式。在下面的繼承中那到底在extends的時(shí)候做了什么，super()又是代表什么意思。
class People{
constructor(name, age) {
  this.name = name;
  this.age = age;}
  
say(){
  alert("hello")}
  
static see(){
  alert("how are you")}}

class lily extends People{
  constructor(){
     super()}
  goodbye(){alert("goodbye")}}
2.解析extends和super()

①在前面的文章中有提及class聲明類(lèi)的原理：https://segmentfault.com/a/11...

②lily是People的子類(lèi)，首先lily也是一個(gè)類(lèi)；extends的過(guò)程中創(chuàng)建了一個(gè)自執(zhí)行函數(shù)，并將父類(lèi)傳進(jìn)去，繼承父類(lèi)之后再返回該子類(lèi)。lily.__proto__指的是當(dāng)前對(duì)象所屬類(lèi)的原型,也就是Object.getPrototypeOf(lily).

var lily = function(_People) {
   inherits(lily, _People);  //第一步，繼承父類(lèi)原型
   function lily() {         //第二步，繼承父類(lèi)對(duì)象屬性
     return _possibleConstructorReturn(this, (lily.__proto__ || Object.getPrototypeOf(lily)).call(this));}
   createClass(lily, [{     //第三步，創(chuàng)建子類(lèi)自己的方法
    key: "goodbye",
    value: function goodbye() {
    alert("goodbye");}}]);
   
   return lily;
 }(People);

③繼承的過(guò)程：一般繼承分兩步，call繼承+原型的繼承 （分別繼承父類(lèi)對(duì)象屬行和原型屬性）

第一步：繼承父類(lèi)的原型，通過(guò)Object.create，第一個(gè)參數(shù)是創(chuàng)建一個(gè)對(duì)象的原型，定義原型上的屬性constructor指向subclass；把父類(lèi)的原型方法繼承給子類(lèi)原型；

function inherits(subClass, superClass) {
   subClass.prototype = Object.create(superClass && superClass.prototype, {
     constructor: {
       value: subClass,
       enumerable: false,
       writable: true,
       configurable: true
     }
   });
   if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
 }

第二步：call繼承，就是super()的處理過(guò)程，super()的實(shí)質(zhì)就是People.call(this);把父類(lèi)的對(duì)象方法繼承給子類(lèi)對(duì)象；這也是為什么在es6的繼承時(shí)必須要加上super()，因?yàn)椴患拥脑挓o(wú)法繼承到父類(lèi)的對(duì)象屬性。

function _possibleConstructorReturn(self, call) { 
   //call指的是Object.getPrototypeOf(lily)).call(this)，也就是People.call(this)
   return call && (typeof call === "object" || typeof call === "function") ? call : self;

第三部：創(chuàng)建子類(lèi)自己的方法。 可以參考class里面的實(shí)現(xiàn)過(guò)程。

總的來(lái)說(shuō)es6的extends的實(shí)質(zhì)和以前的繼承方式是一致  的，但是有了更好的，更清晰的表現(xiàn)形式。

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

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

相關(guān)文章

  • 揭秘babel的魔法之class繼承的處理2

    摘要：并且用驗(yàn)證了中一系列的實(shí)質(zhì)就是魔法糖的本質(zhì)。抽絲剝繭我們首先看的編譯結(jié)果這是一個(gè)自執(zhí)行函數(shù)，它接受一個(gè)參數(shù)就是他要繼承的父類(lèi)，返回一個(gè)構(gòu)造函數(shù)。 如果你已經(jīng)看過(guò)第一篇揭秘babel的魔法之class魔法處理，這篇將會(huì)是一個(gè)延伸；如果你還沒(méi)看過(guò)，并且也不想現(xiàn)在就去讀一下，單獨(dú)看這篇也沒(méi)有關(guān)系，并不存在理解上的障礙。 上一篇針對(duì)Babel對(duì)ES6里面基礎(chǔ)class的編譯進(jìn)行了分析。這一篇將...

    BlackHole1 評(píng)論0 收藏0

  • javascript之模擬類(lèi)繼承

    摘要：歡迎關(guān)注我的博客正文讓我來(lái)構(gòu)造函數(shù)其實(shí)，模擬一個(gè)類(lèi)的方式非常的簡(jiǎn)單構(gòu)造函數(shù)。我們先來(lái)看一個(gè)例子這里通過(guò)構(gòu)造函數(shù)模擬出來(lái)的類(lèi)，其實(shí)和其他語(yǔ)言的類(lèi)行為上是基本一致的，唯一的區(qū)別就是它不具備私有方法。 前言 ES6時(shí)代的來(lái)臨，使得類(lèi)繼承變得如此的圓滑。但是，你有思考過(guò)ES6的類(lèi)繼承模式嗎？如何去實(shí)現(xiàn)它呢？ 類(lèi)繼承對(duì)于JavaScript來(lái)說(shuō)，實(shí)現(xiàn)方式與Java等類(lèi)語(yǔ)言大不相同。熟悉JavaS...

    Jochen 評(píng)論0 收藏0

  • JS之理解繼承

    摘要：父類(lèi)子類(lèi)原理就是改變中的指向，指向的實(shí)例，子類(lèi)會(huì)獲得父類(lèi)的私有屬性和方法原型鏈繼承在中通過(guò)繼承到了父類(lèi)的私有屬性和私有方法。子類(lèi)私有繼承父類(lèi)私有原理目前比較常用的是混合繼承和混合繼承，子類(lèi)能很清晰的繼承父類(lèi)的公有和私有。 前言：JS之理解原型和原型鏈，幾種常見(jiàn)的繼承方式介紹 1.call繼承，也叫借用構(gòu)造函數(shù)、偽造對(duì)象或是經(jīng)典繼承。call繼承回把父類(lèi)的私有屬性和方法繼承給子類(lèi)私有；...

    caiyongji 評(píng)論0 收藏0

  • ES6 class繼承與super關(guān)鍵詞深入探索

    摘要：請(qǐng)看對(duì)應(yīng)版本干了什么可知，相當(dāng)于以前在構(gòu)造函數(shù)里的行為。這種寫(xiě)法會(huì)與上文中寫(xiě)法有何區(qū)別我們?cè)诃h(huán)境下運(yùn)行一下，看看這兩種構(gòu)造函數(shù)的有何區(qū)別打印結(jié)果打印結(jié)果結(jié)合上文中關(guān)于原型的論述，仔細(xì)品味這兩者的差別，最好手動(dòng)嘗試一下。 ES6 class 在ES6版本之前，JavaScript語(yǔ)言并沒(méi)有傳統(tǒng)面向?qū)ο笳Z(yǔ)言的class寫(xiě)法，ES6發(fā)布之后，Babel迅速跟進(jìn)，廣大開(kāi)發(fā)者也很快喜歡上ES6帶...

    jubincn 評(píng)論0 收藏0

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

0條評(píng)論

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