美文网首页
JS原型链(三)-构造函数与ES6中class间的关系

JS原型链(三)-构造函数与ES6中class间的关系

作者: 平凡的lily | 来源:发表于2018-08-12 09:11 被阅读0次

JS原型链(三)-构造函数与ES6中class间的关系

es6出来了,感觉要学好多新特性,比如大家很多时候用起class而不用构造函数,作为前端工程师,感觉自己好像又要学class的语法才能跟上大家的步伐。

随笔二中最后有一个构造函数继承的例子,下面我们用class的语法实现一样的功能(取出简书首页body中的内容)。                                                                                                

这里可能写的有点不规范,包括不一定符合js的设计模式,设计模式还在学习中,回头掌握了更好的设计模式再来更新。上面的截图可以看出与随笔二一样取出了class为‘reader-black-font'的inner html。然而这里用的是class的语法。自然不免让人心生疑问,这两种方法之间有什么联系吗?然后紧接着上面的环境,进行了下面的验证。可以看出class本质就是构造函数的语法糖。也就是你再用class时候,编译器还是会把它编译成与构造函数一样的代码来执行。

这个时候我有点想不通,既然class并不是一个新东西,为什么要引进前端呢。反而这种语法糖形式很容易让一些前端工程师忘记了它的本质,这对于他们后来的发展肯定是不利的。后来想想,可能class语法更能让现在的工程师接受,尤其那些从后端而来的工程师就能快速上手。

2018/8/13今天对上面class的例子做一个简单的继承改写(一共有两版,也是自己思想变化的见证,最后的一个版本更加合理),结果还是一样的,这里用了继承。表示Gethtml继承了Getele中所有的属性和方法。

相关文章

  • JS原型链(三)-构造函数与ES6中class间的关系

    JS原型链(三)-构造函数与ES6中class间的关系 es6出来了,感觉要学好多新特性,比如大家很多时候用起cl...

  • 前端JS进阶二(ES6-Class语法)

    Class和普通构造函数有何区别 前端会使用ES6中的Class来代替JS中的构造函数 JS 构造函数 Class...

  • ES6 中 class 与构造函数的关系

    ES6 中 class 与构造函数的关系class 为 构造函数的语法糖,即 class 的本质是 构造函数。c...

  • Javascript 继承机制

    一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class extendshttps:/...

  • Typescript中的类

    在ES5中, 我们通过构造函数实现类的概念, 通过原型链实现集成。在ES6中,引入了class, Typescri...

  • JavaScript笔记3

    RegExp、JSON、创建对象、构造函数、原型对象、原型链、原型继承、class、class继承 RegExp ...

  • js基础之实现继承的几种方式

    js 实现继承的方式有: 原型链继承; 构造函数继承; 组合继承(原型链继承 + 构造函数继承)(最常用);(原型...

  • JS继承之extends

    ES6中有关 class 的继承方式,引入了 extends 关键字。但其本质仍然是 构造函数 + 原型链的 组合...

  • js继承与属性

    相关知识点链接与参考链接:一篇文章理解JS继承——原型链/构造函数/组合/原型式/寄生式/寄生组合/Class e...

  • js之继承

    文章主讲 JS 继承,包括原型链继承、构造函数继承、组合继承、寄生组合继承、原型式继承、 ES6 继承,以及 多继...

网友评论

      本文标题:JS原型链(三)-构造函数与ES6中class间的关系

      本文链接:https://www.haomeiwen.com/subject/szojbftx.html