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);
  • 相关阅读:
    02.规划过程组表格-干系管理计划
    02.规划过程组表格-供方选择标准
    02.规划过程组表格-采购管理计划
    12动态规划运用实例
    11算法策略之动态规划
    10算法策略之贪婪法
    9算法策略之分治法
    8算法策略之枚举法
    7算法策略之递推法
    6数学模型和数学建模
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7818011.html
Copyright © 2011-2022 走看看