[ES6] Extends class in ES6 vs ES5 subclass
ES6 class with extends and super:
class Tree {
constructor(size = '', leaves = {spring: 'green', summer: 'green', fall: 'orange', winter: null}) {
this.size = size;
this.leaves = leaves;
this.leafColor = null;
} changeSeason(season) {
this.leafColor = this.leaves[season];
if (season === 'spring') {
this.size += ;
}
}
} class Maple extends Tree {
constructor(syrupQty = , size, leaves) {
super(size, leaves);
this.syrupQty = syrupQty;
} changeSeason(season) {
super.changeSeason(season);
if (season === 'spring') {
this.syrupQty += ;
}
} gatherSyrup() {
this.syrupQty -= ;
}
} const myMaple = new Maple(, );
myMaple.changeSeason('fall');
myMaple.gatherSyrup();
myMaple.changeSeason('spring');
How this is written in ES5:
function Tree() {
this.size = size || ;
this.leaves = leaves || {spring: 'green', summer: 'green', fall: 'orange', winter: null};
this.leafColor;
} Tree.prototype.changeSeason = function(season) {
this.leafColor = this.leaves[season];
if (season === 'spring') {
this.size += ;
}
} function Maple (syrupQty, size, leaves) {
Tree.call(this, size, leaves);
this.syrupQty = syrupQty || ;
} Maple.prototype = Object.create(Tree.prototype);
Maple.prototype.constructor = Maple; Maple.prototype.changeSeason = function(season) {
Tree.prototype.changeSeason.call(this, season);
if (season === 'spring') {
this.syrupQty += ;
}
} Maple.prototype.gatherSyrup = function() {
this.syrupQty -= ;
} const myMaple = new Maple(, );
myMaple.changeSeason('fall');
myMaple.gatherSyrup();
myMaple.changeSeason('spring');
We use 'Tree.call(this)' to pass context, 'this' is refer to Maple because of Clourse.
Then we create a new object by using Object.create()
Maple.prototype = Object.create(Tree.prototype);
[ES6] Extends class in ES6 vs ES5 subclass的更多相关文章
- ES6中的类继承和ES5中的继承模式详解
1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...
- 通过原型继承理解ES6 extends 如何实现继承
前言 第一次接触到 ES6 中的 class 和 extends 时,就听人说这两个关键字不过是语法糖而已.它们的本质还是 ES3 的构造函数,原型链那些东西,没有什么新鲜的,只要理解了原型链等这些概 ...
- React与ES6(三)ES6类和方法绑定
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- React与ES6(四)ES6如何处理React mixins
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- React和ES6(二)ES6的类和ES7的property initializer
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
- ES6 实战项目构建 ES6+glup+express
ES6推出已经有几个年头了,平时也有学过一些基本语法,无奈实践经验太少.而且前端早已脱离了刀耕火种的时代,一些自动化构建工具像gulp.webpack等也需要熟练掌握.最近刚签了三方,闲暇之余就找了个 ...
- ES6入门一:ES6简介及Babel转码器
ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码 1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...
- 石川es6课程---1-2、ES6简介
石川es6课程---1-2.ES6简介 一.总结 一句话总结: 从ECMAScript的历史发展来看,太顺了的时候总会遇到一挫折,比如ecma4 1.ECMAScript 和 JavaScript关系 ...
- 石川es6课程---18、ES6 复习
石川es6课程---18.ES6 复习 一.总结 一句话总结: 无论在讲课和学习中,复习总结都是很重要 二.ES6 复习 变量 let const 声明方式 能否重复声明 作用域 类型 是否支持变量提 ...
随机推荐
- ArchLinux dwm的安装和配置
dwm官网:https://dwm.suckless.org/ dwm是一个简洁的平铺式窗口管理器 配置简单,使用便捷,没有多少依赖,占用内存非常小 总之dwm正合口味 安装方法 首先在官网下载dwm ...
- BZOJ 2724 [Violet 6]蒲公英(分块)
题意 在线区间众数 思路 预处理出 f[i][j] 即从第 i 块到第 j 块的答案.对于每个询问,中间的整块直接用预处理出的,两端的 sqrtn 级别的数暴力做,用二分查找它们出现的次数.每次询问的 ...
- 极速响应Excel数据报表请求的一种方法
摘要 通过缓存和维护Excel Workbook实例,极速响应Excel数据报表请求. 这是一个真实的大数据"云计算"项目中的解决方案,在给定的时间和资源下,只有这种方法是最简单并 ...
- Android组件Activity初探
1.Activity是什么 Activity是Android系统中的四大组件之一,在MVC模式中属于C控制层 M(Model 模型):Model是应用程序的主体对象. V(View 视图) ...
- HDU 4917 Permutation 拓扑排序的计数
题意: 一个有n个数的排列,给你一些位置上数字的大小关系.求合法的排列有多少种. 思路: 数字的大小关系可以看做是一条有向边,这样以每个位置当点,就可以把整个排列当做一张有向图.而且题目保证有解,所以 ...
- 05-数据类型转换(bool类型)
- ArcGIS api for javascript——地图配置-定制缩放动画
描述 本例展示了当用户放大或缩小地图时如何定义地图的动画.zoomDuration和zoomRate是Dojo动画属性,他们确定了动画的duration和帧刷新的rate .这些属性单位是毫秒,zoo ...
- Thinking in UML 学习笔记(三)——UML核心视图之类图
类图的作用:用于展示系统中的类及其相互之间的关系. UML在解决面向对象的方法中对类理解为三个层次,各自是:概念层.说明层.实现层.在UML中,从開始的需求到终于设计类,类图也是环绕这三个层次的观点进 ...
- swift 动态设置UILabel的高度
import UIKit class ViewController3: UIViewController { override func viewDidLoad() { ...
- win32下实现透明窗体
最開始写透明窗体的代码,在百度了之后,找到了SetLayeredWindowAttributes()这一个函数,可是因为网上案列的缺少,使得非常多人无法非常好的使用这一个方法,我花了几天的时间写了一个 ...