es6class揭秘

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

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

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

class語法

在chrome中運行以下代碼

  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)所有的方法都是定義在對象的prototype屬性上,不難得出這幾者的關(guān)系如下圖所示

es5語法

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

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

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

擴展

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

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

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

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

相關(guān)文章

為什么都說js 里面任何對象最終都繼承了Object對象

摘要：今天閑來無事，看見幾行小字。又說所有對象，繼承終是。強行押韻一波這首詩的意思就是說的我今天沒有什么事情，然后無意中又在網(wǎng)上看到了任何對象都是從對象繼承而來的這句話。一時興起，便去驗證這句話。今天閑來無事，看見幾行小字。又說所有對象，繼承終是Obj?！?強行押韻一波這首詩的意思就是說的我今天沒有什么事情，然后無意中又在網(wǎng)上看到了任何對象都是從Object對象繼承而來的這句話。一時興...

Gemini 2019-08-26 10:29 評論0 收藏0
JavaScript繼承理解：ES5繼承方式+ES6Class繼承對比

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

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

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

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

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

NusterCache 2019-08-29 17:27 評論0 收藏0
spring boot - 收藏集 - 掘金

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

rollback 2019-06-26 17:16 評論0 收藏0