es6class揭秘

piapia 發(fā)布于2019-08-21 11:42 / 2728人閱讀

摘要：語(yǔ)法在中運(yùn)行以下代碼調(diào)試觀察的值。以上的繼承其實(shí)就是我們說(shuō)的寄生式組合繼承，也是中最常用的繼承模式。

在es6中，新增了class關(guān)鍵字用于定義一個(gè)類(lèi)，但是本質(zhì)上并沒(méi)有給javascript增加新的oop機(jī)制，因?yàn)?b>javascript原型繼承以及構(gòu)造函數(shù)式聲明使人感到晦澀難懂，添加class的目的就是為了掩蓋它底層的機(jī)制，使得我們不用直接接觸這些概念，相當(dāng)于一個(gè)語(yǔ)法糖。

class語(yǔ)法

在chrome中運(yùn)行以下代碼

  class Super{
        constructor(){
            this.name = "Super";
        }
        superSayHello(){
            console.log("super hello")
        }
    }
    class Sub extends Super{
        constructor(){
            super();
            this.realName = "Sub";
        }
        subSayHello(){
            console.log("sub hello")
        }
    }

    var sub = new Sub();

調(diào)試觀察sub的值。

我們發(fā)現(xiàn)所有的方法都是定義在對(duì)象的prototype屬性上,不難得出這幾者的關(guān)系如下圖所示

es5語(yǔ)法

es6中的class與我們之前寫(xiě)的原型繼承基本一致，同樣的關(guān)系用es5來(lái)寫(xiě)的話(huà)

    function Super(){
        this.name= "Super";
    }
    Super.prototype.superSayHello = function(){
            console.log("super hello")
    };

    function Sub(){
        //借用父類(lèi)構(gòu)造函數(shù) 等價(jià)于es6中的super()
        Super.call(this);
        this.realName= "Sub";
    }
    //以上只實(shí)現(xiàn)了數(shù)據(jù)的復(fù)制
    //使用Object.create() 而不是new Sub(); 避免調(diào)用兩次Sub();
    Sub.prototype = Object.create(Super.prototype);
    Sub.prototype.constructor = Sub;
    
    var sub = new Sub();

擴(kuò)展

因?yàn)?b>javascript本質(zhì)上是沒(méi)有類(lèi)這個(gè)概念，一切皆對(duì)象，為了模擬其它面向?qū)ο笳Z(yǔ)言的特性(如JAVA)，出現(xiàn)了許多種間接實(shí)現(xiàn)繼承的方法。以上es5的繼承其實(shí)就是我們說(shuō)的寄生式組合繼承，也是javascript中最常用的繼承模式。

云服務(wù)器 GPU云服務(wù)器 es6class 大揭秘揭秘云存儲(chǔ) 云計(jì)算揭秘

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

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

相關(guān)文章

為什么都說(shuō)js 里面任何對(duì)象最終都繼承了Object對(duì)象

摘要：今天閑來(lái)無(wú)事，看見(jiàn)幾行小字。又說(shuō)所有對(duì)象，繼承終是。強(qiáng)行押韻一波這首詩(shī)的意思就是說(shuō)的我今天沒(méi)有什么事情，然后無(wú)意中又在網(wǎng)上看到了任何對(duì)象都是從對(duì)象繼承而來(lái)的這句話(huà)。一時(shí)興起，便去驗(yàn)證這句話(huà)。今天閑來(lái)無(wú)事，看見(jiàn)幾行小字。又說(shuō)所有對(duì)象，繼承終是Obj。—— 強(qiáng)行押韻一波這首詩(shī)的意思就是說(shuō)的我今天沒(méi)有什么事情，然后無(wú)意中又在網(wǎng)上看到了任何對(duì)象都是從Object對(duì)象繼承而來(lái)的這句話(huà)。一時(shí)興...

Gemini 2019-08-26 10:29 評(píng)論0 收藏0
JavaScript繼承理解：ES5繼承方式+ES6Class繼承對(duì)比

摘要：寄生組合式繼承的繼承方式有多種主要有原型鏈繼承借用構(gòu)造函數(shù)組合式繼承寄生式繼承和寄生組合式繼承。中利用定義類(lèi)，實(shí)現(xiàn)類(lèi)的繼承子類(lèi)里調(diào)用父類(lèi)構(gòu)造函數(shù)實(shí)現(xiàn)實(shí)例屬性和方法的繼承子類(lèi)原型繼承父類(lèi)原型，實(shí)現(xiàn)原型對(duì)象上方法的繼承。 JavaScript中實(shí)現(xiàn)繼承 ??在JavaScript中實(shí)現(xiàn)繼承主要實(shí)現(xiàn)以下兩方面的屬性和方法的繼承，這兩方面相互互補(bǔ)，既有共享的屬性和方法，又有特有的屬性和方法。 ...

liaoyg8023 2019-08-26 12:09 評(píng)論0 收藏0
刷《一年半經(jīng)驗(yàn)，百度、有贊、阿里面試總結(jié)》·手記

摘要：在掘金上看到了一位大佬發(fā)了一篇很詳細(xì)的面試記錄文章一年半經(jīng)驗(yàn)，百度有贊阿里面試總結(jié)，為了查漏補(bǔ)缺，抽空就詳細(xì)做了下。在掘金上看到了一位大佬發(fā)了一篇很詳細(xì)的面試記錄文章-《一年半經(jīng)驗(yàn)，百度、有贊、阿里面試總結(jié)》，為了查漏補(bǔ)缺，抽空就詳細(xì)做了下。（估計(jì)只有我這么無(wú)聊了哈哈哈）有給出的或者有些不完善的答案，也盡力給出/完善了（可能有錯(cuò)，大家自行辨別）。有些很困難的題目（例如實(shí)現(xiàn)Promi...

codeKK 2019-08-23 13:48 評(píng)論0 收藏0
刷《一年半經(jīng)驗(yàn)，百度、有贊、阿里面試總結(jié)》·手記

摘要：在掘金上看到了一位大佬發(fā)了一篇很詳細(xì)的面試記錄文章一年半經(jīng)驗(yàn)，百度有贊阿里面試總結(jié)，為了查漏補(bǔ)缺，抽空就詳細(xì)做了下。在掘金上看到了一位大佬發(fā)了一篇很詳細(xì)的面試記錄文章-《一年半經(jīng)驗(yàn)，百度、有贊、阿里面試總結(jié)》，為了查漏補(bǔ)缺，抽空就詳細(xì)做了下。（估計(jì)只有我這么無(wú)聊了哈哈哈）有給出的或者有些不完善的答案，也盡力給出/完善了（可能有錯(cuò)，大家自行辨別）。有些很困難的題目（例如實(shí)現(xiàn)Promi...

NusterCache 2019-08-29 17:27 評(píng)論0 收藏0
spring boot - 收藏集 - 掘金

摘要：引入了新的環(huán)境和概要信息，是一種更揭秘與實(shí)戰(zhàn)六消息隊(duì)列篇掘金本文，講解如何集成，實(shí)現(xiàn)消息隊(duì)列。博客地址揭秘與實(shí)戰(zhàn)二數(shù)據(jù)緩存篇掘金本文，講解如何集成，實(shí)現(xiàn)緩存。 Spring Boot 揭秘與實(shí)戰(zhàn)（九）應(yīng)用監(jiān)控篇 - HTTP 健康監(jiān)控 - 掘金Health 信息是從 ApplicationContext 中所有的 HealthIndicator 的 Bean 中收集的， Spring...

rollback 2019-06-26 17:16 評(píng)論0 收藏0