zoukankan      html  css  js  c++  java
  • [ES6] Extends class in ES6 vs ES5 subclass

    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);
  • 相关阅读:
    构建之法8,9,10章
    作业6
    通过处理器类型获得处理器对象
    面经
    C语言实现字符串替换
    计算机网络整理
    常见面试题
    数据库常见面试题
    redis常见知识整理
    项目总结
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7818011.html
Copyright © 2011-2022 走看看