es6class揭秘

piapia 發布于2019-08-21 11:42 / 2713人閱讀

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

在es6中，新增了class關鍵字用于定義一個類，但是本質上并沒有給javascript增加新的oop機制，因為javascript原型繼承以及構造函數式聲明使人感到晦澀難懂，添加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();

調試觀察sub的值。

我們發現所有的方法都是定義在對象的prototype屬性上,不難得出這幾者的關系如下圖所示

es5語法

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

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

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

擴展

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

GPU云服務器云服務器 es6class 大揭秘揭秘云存儲云計算揭秘

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/87006.html

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

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

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

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

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

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

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

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

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

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

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