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的更多相关文章

  1. ES6中的类继承和ES5中的继承模式详解

    1.ES5中的继承模式 我们先看ES5中的继承. 既然要实现继承,首先我们得要有一个父类. Animal.prototype.eat = function(food) { console.log(th ...

  2. 通过原型继承理解ES6 extends 如何实现继承

    前言 第一次接触到 ES6 中的 class 和 extends 时,就听人说这两个关键字不过是语法糖而已.它们的本质还是 ES3 的构造函数,原型链那些东西,没有什么新鲜的,只要理解了原型链等这些概 ...

  3. React与ES6(三)ES6类和方法绑定

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  4. React与ES6(四)ES6如何处理React mixins

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  5. React和ES6(二)ES6的类和ES7的property initializer

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

  6. ES6 实战项目构建 ES6+glup+express

    ES6推出已经有几个年头了,平时也有学过一些基本语法,无奈实践经验太少.而且前端早已脱离了刀耕火种的时代,一些自动化构建工具像gulp.webpack等也需要熟练掌握.最近刚签了三方,闲暇之余就找了个 ...

  7. ES6入门一:ES6简介及Babel转码器

    ES6简介 Babel转码器 Nodejs中使用ES6 WebPack中使用ES6及Babel转码插件 一.ES6简介与转码  1.1一个常见的问题,ECMAScript和JavaScript到底是什 ...

  8. 石川es6课程---1-2、ES6简介

    石川es6课程---1-2.ES6简介 一.总结 一句话总结: 从ECMAScript的历史发展来看,太顺了的时候总会遇到一挫折,比如ecma4 1.ECMAScript 和 JavaScript关系 ...

  9. 石川es6课程---18、ES6 复习

    石川es6课程---18.ES6 复习 一.总结 一句话总结: 无论在讲课和学习中,复习总结都是很重要 二.ES6 复习 变量 let const 声明方式 能否重复声明 作用域 类型 是否支持变量提 ...

随机推荐

  1. parted---磁盘分区

    parted命令是由GNU组织开发的一款功能强大的磁盘分区和分区大小调整工具,与fdisk不同,它支持调整分区的大小.作为一种设计用于Linux的工具,它没有构建成处理与fdisk关联的多种分区类型, ...

  2. 【问题:SSH】win10使用SSH链接服务器时,提示:Host key verification failed

    异常原因:当前连接新建的验证信息与之前保存的验证信息不一致,将原来的验证信息删除就可以了. 1 使用以下命令,清空之前缓存的信息.或者直接打开C:\Users\Nolan\.ssh\known_hos ...

  3. 【ICM Technex 2018 and Codeforces Round #463 (Div. 1 + Div. 2, combined) C】 Permutation Cycle

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] p[i] = p[p[i]]一直进行下去 在1..n的排列下肯定会回到原位置的. 即最后会形成若干个环. g[i]显然等于那个环的大 ...

  4. 【Codeforces Round #423 (Div. 2) B】Black Square

    [Link]:http://codeforces.com/contest/828/problem/B [Description] 给你一个n*m的格子; 里面包含B和W两种颜色的格子; 让你在这个格子 ...

  5. 洛谷 P2839 畅通工程

    P2839 畅通工程 题目描述 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇.省政府“畅通工程”的目标是使全省任何两个城镇间都可以实现交通(但不一定有直接的道路相连, ...

  6. c3p0出现 An attempt by a client to checkout a Connection has timed out

    java.sql.SQLException: An attempt by a client to checkout a Connection has timed out. at com.mchange ...

  7. 《R实战》读书笔记一

    你仅仅要想处理数据,<R实战>这本书就能够助你一臂之力. <R实战>的目标是让你认识R,而且可以对数据进行操作.可视化和理解.该书包含4部分16个章节8个附录. 第一部分:入门 ...

  8. vue25---vue2.0变化

    组件模版: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  9. HDU 4358 Boring counting dfs序+莫队算法

    题意:N个节点的有根树,每个节点有一个weight.有Q个查询,问在以u为根的子树中,有恰好出现了K次的weight有多少种. 这是第一次写莫队算法,之前也只是偶有耳闻. 看了别人的代码打的,还是贴上 ...

  10. Android真机调试访问本地服务器(localhost)的解决方案

    Android系统把它自己作为了localhost!当连接localhost都是他自己啊.. 囧,在这里晕了好久才发现.. 网上介绍的都是模拟器连接本地服务器的,我试着把链接改为http://10.0 ...