ES6引入了class(类)的概念。新的class写法让对象原型的写法更加清晰、更像面向对象编程的语法,也更加通俗易懂。

class Animal{
constructor(){
this.type = 'animal';
}
says(say){
console.log(this.type + ' says ' + say);
}
} let animal = new Animal();
animal.says('hello') //animal says hello class Cat extends Animal{
constructor(){
super();
this.type = 'cat'
}
}
let cat = new Cat();
cat.says('hello'); //cat says hello

上面的代码首先用了class定义了一个“类”,里面有个constructor方法,就是构造函数,而this关键字则代表实例对象。简单地说,constructor内定义的方法和属性是实例对象自己的,而constructor外定义的方法和属性则是所有实例对象可以共享的。

class之间可以通过 extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。上面定义了一个Cat类,该类通过extends关键字,继承了Animal类的所有属性和方法。

super关键字,它指代父类的实例(即父类的this对象)。子类必须在constructor方法中调用super方法,否则新建实例时会报错。这是因为子类没有自己的this对象,而是继承父类的this对象,然后对其进行加工。如果不调用super方法,子类就得不到this对象。

ES6的继承机制,实质是先创造父类的实例对象this(所以必须先调用super方法),然后再用子类的构造函数修改this.

ES6学习笔记--class,extends,super的更多相关文章

  1. ES6学习笔记<一> let const class extends super

    学习参考地址1  学习参考地址2 ECMAScript 6(以下简称ES6)是JavaScript语言的下一代标准.因为当前版本的ES6是在2015年发布的,所以又称ECMAScript 2015:也 ...

  2. ES6学习笔记<五> Module的操作——import、export、as

    import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...

  3. ES6学习笔记<四> default、rest、Multi-line Strings

    default 参数默认值 在实际开发 有时需要给一些参数默认值. 在ES6之前一般都这么处理参数默认值 function add(val_1,val_2){ val_1 = val_1 || 10; ...

  4. ES6学习笔记<三> 生成器函数与yield

    为什么要把这个内容拿出来单独做一篇学习笔记? 生成器函数比较重要,相对不是很容易理解,单独做一篇笔记详细聊一聊生成器函数. 标题为什么是生成器函数与yield? 生成器函数类似其他服务器端语音中的接口 ...

  5. ES6学习笔记<二>arrow functions 箭头函数、template string、destructuring

    接着上一篇的说. arrow functions 箭头函数 => 更便捷的函数声明 document.getElementById("click_1").onclick = ...

  6. es6学习笔记-class之一概念

    前段时间复习了面向对象这一部分,其中提到在es6之前,Javasript是没有类的概念的,只从es6之后出现了类的概念和继承.于是乎,花时间学习一下class. 简介 JavaScript 语言中,生 ...

  7. ES6学习笔记之块级作用域

    ES6学习笔记:块级作用域 作用域分类 全局作用域 局部作用域 块级作用域 全局作用域示例 var i=2; for (var i = 0; i < 10; i++) { } console.l ...

  8. ES6学习笔记之变量的解构赋值

    变量的解构赋值 ES6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称为解构. 数组的解构赋值 以前,为变量赋值,只能直接指定值: 1 2 3 var a = 1; var b = 2; ...

  9. ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

随机推荐

  1. Modbus 协议-Ascii,RTU

    Modbus 协议之 Ascii 下载地址:http://download.csdn.net/detail/woxpp/5043249 1.提供Modbus Ascii 相关发送与接收代码 2.提供M ...

  2. Sitecore安全性第1部分:自定义角色和权限

    安全性是任何Sitecore构建的重要组成部分.它可确保您的内容作者具有适当级别的访问权限,以管理他们拥有的内容,并授予他们访问不同Sitecore功能的权限. Sitecore附带了许多提供功能访问 ...

  3. ES7.3.0配置邮件告警

    情况说明: 三台es组成集群,一台kibana,版本均为7.3.0 es版本要求是白金版,基础版的不行,不过可以试用30天的白金版 步骤:先说我自己走通的流程,然后介绍官方说明 1.因为我这边使用的是 ...

  4. VMware Workstation报错 : 另一个正在运行的VMware进程可能正在使用配置文件

    这个问题出现于虚拟机卡死后用任务管理器关闭了VMware,然而还有虚拟机的进程在运行而且还关不掉(三步操作便可解决这一问题) 一.打开系统配置使用程序进行设置 1.Win+R打开运行输入:msconf ...

  5. element-UI级联选择器(Cascader)获取label值 ,this.$refs['新组件名'].currentLabels 在2.7版本给移除了,新的解决方法。

    原文参考:https://blog.csdn.net/lijiabinbbg/article/details/97396812 遇到的新的问题是如果设置了ref,那么v-model绑定的值不会动态更新 ...

  6. Mysql之视图和事务(五)

    一:视图 1.问题 对于复杂的查询,往往是有多个数据表进行关联查询而得到,如果数据库因为需求等原因发生了改变,为了保证查询出来的数据与之前相同,则需要在多个地方进行修改,维护起来非常麻烦 解决办法:定 ...

  7. 剑指前端(前端入门笔记系列)——DOM(属性节点)

    DOM(属性节点) 属性节点没有过参加家族关系中,其专用选择器:attributes,返回值为对象的形式,它的键是索引值,也就是用对象模拟了一个伪数组,DOM中选择器返回的都是伪数组(可以使用数组的形 ...

  8. Web前端面试总结(别人的)

    http://note.youdao.com/noteshare?id=0bfbe45de0de0bc4735f867e5a6c528f&sub=D52F5C079DDE49F99A5118D ...

  9. Android源码分析(四)-----Android源码编译及刷机步骤

    一 : 获取源码: 每个公司服务器地址不同,以如下源码地址为例: http://10.1.14.6/android/Qualcomm/msm89xx/branches/msm89xx svn环境执行: ...

  10. I tensorflow/core/platform/cpu_feature_guard.cc:142] Your CPU supports instructions that this TensorFlow binary was not compiled to use: AVX2

    遇到了这个问题,意思是你的 CPU 支持AVX AVX2 (可以加速CPU计算),但你安装的 TensorFlow 版本不支持 解决:1. 如果是初学者 或者 没有太大计算速度的需求,在开头加上这两行 ...