es6class揭秘

piapia 发布于2019-08-21 11:42 / 2712人阅读

摘要：语法在中运行以下代码调试观察的值。以上的继承其实就是我们说的寄生式组合继承，也是中最常用的继承模式。

在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中最常用的继承模式。

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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