继承

程序中的继承: 子类可以继承父类的一些属性和方法

class Father { //父类
constructor () {
}
money () {
console.log(100)
}
}
class Son extends Father { //子类继承父类
}
let son = new Son()
son.money() // 100
son.

super关键字

super关键字用于访问和调用对象父类上的函数,可以通过调用父类的构造函数,也可以调用父类的普通函数

class Father { //父类
constructor (x, y) {
this.x = x
this.y = y
}
money () {
console.log(100)
}
sum () {
console.log(this.x + this.y)
}
}
class Son extends Father { //子类继承父类
constructor (x, y) {
super(x, y) //调用了父类中的构造函数
}
}
let son = new Son(1,2)
son.sum() // 3
son.

继承的特点:

  1. 继承中,如果实例化子类输出一个方法,先看子类有没有这个方法,如果有就先执行子类,(就近原则)
  2. 继承中,如果子类里面没有,就去查找父类有没有这个方法,如果有,就执行父类的这个方法
  3. 在子类中,可以用super调用父类元素的方法
class Father {
say() {
return '我是父元素'
}
sing() {
return '父元素唱一首歌'
} }
class Son extends Father {
say() {
console.log('我是子元素')
}
sing() {
console.log(super.sing())
}
}
var son = new Son()
son.say() //我是子元素
son.sing() //

子元素可以继承父元素的方法的同时,子元素也可以扩展自己的其他方法,子类在构造函数中用super调用父类的构造方法时候,必须放在子类的this之前调用

class Father {
constructor(x, y) {
this.x = x
this.y = y
}
sum() {
console.log(this.x + this.y)
}
} class Son extends Father {
constructor(x,y) {
//利用super 调用父类的构造函数
super(x,y)
this.x = x
this.y = y
}
subtract() {
console.log(this.x - this.y)
}
}
let son = new Son(5,3)
son.subtract() // 2
son.sum() //8

ES6中的类和对象的4个注意点:

  1. 在ES6中类没有变量提升,所以必须先定义类,才能通过类实例化对象
  2. 类里面的共有属性和方法一定要加this使用
  3. 类里面的this指向问题
  4. constructor里面的this指向实例对象,方法里面的this向这个方法的调用者

总结

这篇文章主要分享了,关于类的继承、继承需要的用到的extends,super、ES6中的类和对象的注意点等。

如果想了解更多,请扫描二维码

ES6学习笔记(二):教你玩转类的继承和类的对象的更多相关文章

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

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

  2. ES6学习笔记(二)——字符串扩展

    相信很多人也和我一样,不喜欢这样循规蹈矩的逐条去学习语法,很枯燥乏味.主要是这样学完一遍之后,没过一段时间就忘到九霄云外了.不如实际用到的时候研究它记得牢靠,所以我就整理成笔记,加深记忆的同时便于复习 ...

  3. ES6学习笔记二

    字符串遍历 var str = 'hello'; for(let s of str){console.log(s += ' ')} //h e l l o 字符串查找:添加了include(str,i ...

  4. ES6学习笔记二:各种扩展

    转载请注明原文地址:http://www.cnblogs.com/ygj0930/p/7242967.html 一:字符串扩展 1:字符串遍历器 for (let char of str) { // ...

  5. ES6学习笔记(二)

    Set 和 Map 数据结构 1.set 基本用法 ES6提供了新的数据结构Set,它类似于数组,但是成员的值都是唯一的,没有重复的值 Set本身是一个构造函数,用来生成Set数据结构 const s ...

  6. es6学习笔记二:生成器 Generators

    今天这篇文章让我感到非常的兴奋,接下来我们将一起领略ES6中最具魔力的特性. 为什么说是“最具魔力的”?对于初学者来说,此特性与JS之前已有的特性截然不同,可能会觉得有点晦涩难懂.但是,从某种意义上来 ...

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

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

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

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

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

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

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

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

随机推荐

  1. 8.for循环及练习

    For循环:   虽然所有循环结构都可以用 while 或者 do...while 表示,但Java提供了另一种语句— —for循环,使一些循环结构变的更加简单. for 循环语句是支持迭代的一种通用 ...

  2. 初探ASP.NET Core 3.x (4) - 项目的重要组成

    目录 O 前请提要 I 启动部分 I.1 Program类 I.2 Startup类 I.2.1 这个类干什么呢?? I.2.2 特征?? I.3 appsettings.json I.4 launc ...

  3. Linux内存管理解析(一) : 分段与分页机制

    背景 : 在此文章里会从分页分段机制去解析Linux内存管理系统如何工作的,由于Linux内存管理过于复杂而本人能力有限.会尽量将自己总结归纳的部分写清晰. 从实模式到保护模式的寻址方式的不同 : 1 ...

  4. 基于Bootstrap和Knockout.js的ASP.NET MVC开发实战

    之前在一家公司里用过Knockout,是easyui 和 Knockout结合 的.下面的这本应该不错. 目录 前言 第一部分入门指南 第1章MVC介绍 创建第一个项目 分析HomeControlle ...

  5. JZOJ4238 纪念碑

    Description 2034年,纪念中学决定修建校庆100周年纪念碑,作为杰出校友的你被找了过来,帮校方确定纪念碑的选址. 纪念中学的土地可以看作是一个长为n,宽为m的矩形.它由n* m个1*1的 ...

  6. Ubuntu下配置GitHub

    使用GitHub进行代码托管是如此地方便,原来一直在Windows下进行操作,非常的简单,由于其图形化界面将所有这些都隐藏起来了. 还是不得不吐槽一下自己,非得将自己的系统装为Ubuntu... 言归 ...

  7. WebAPI接口开发实践

    背景 在团队两年多陆续负责了几个项目的开发上线已经代码的review,特别是对老项目的重构过程中,发现之前的API设计是没有任何规范和约定的,不同的开发同学有不同的习惯,因此需要一套规范去约定,现在分 ...

  8. java数据域初始化

    1.在声明中赋值 /** * Created by N3verL4nd on 2016/11/19. */ class Test{ private String str = "Hello W ...

  9. FMPEG结构体分析:AVStream

    注:写了一系列的结构体的分析的文章,在这里列一个列表: FFMPEG结构体分析:AVFrame FFMPEG结构体分析:AVFormatContext FFMPEG结构体分析:AVCodecConte ...

  10. C语言宏的神奇写法:语句块作为参数,算半个函数式编程?

    我想要写几个循环做测试代码,每次都写 `for(size_t i = 0; i < n; i++)` 很烦人,然后就灵机一动,能不能用宏实现,然后就写出了: #define repeat(n, ...