[ES6] Extends class in ES6 vs ES5 subclass
2023-09-14 09:00:51 时间
ES6 class with extends and super:
class Tree { constructor(size = '10', 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 += 1; } } } class Maple extends Tree { constructor(syrupQty = 15, size, leaves) { super(size, leaves); this.syrupQty = syrupQty; } changeSeason(season) { super.changeSeason(season); if (season === 'spring') { this.syrupQty += 1; } } gatherSyrup() { this.syrupQty -= 3; } } const myMaple = new Maple(15, 5); myMaple.changeSeason('fall'); myMaple.gatherSyrup(); myMaple.changeSeason('spring');
How this is written in ES5:
function Tree() { this.size = size || 10; 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 += 1; } } function Maple (syrupQty, size, leaves) { Tree.call(this, size, leaves); this.syrupQty = syrupQty || 15; } 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 += 1; } } Maple.prototype.gatherSyrup = function() { this.syrupQty -= 3; } const myMaple = new Maple(15, 5); 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);
相关文章
- 3.ES6-数组实例的fill()
- 2.ES6-数组实例的 find() 和 findIndex()
- [ES6] 11. String Templates
- [ES6] 06. Arrow Function =>
- js es6 delete
- [ES6] When should use Map instead of Object
- [ES6] ES6 Modules (ES2015) - Import and Export
- Es6系列之module and class
- Es6系列之深入generator2
- js es6 Iterator
- ES6学习之路4----字符串模版
- JavaScript ES6对Proxy的原生支持的一个例子
- es6 语法 (函数扩展)
- ES6 入门系列之ES6的前世今生
- ES6(ECMAScript 6)部分语法—简化语法的使用