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);
  • 相关阅读:
    快考试了
    16号了
    终于找到网吧了,写写今天
    又打了一天的篮球
    (转载)Andoid2.X各字段意义
    (转载)AndroidMatrixCursor
    (转载)非常好 必须要顶
    (转载)Android Cursor之MergeCursor
    七天开发安卓软件(二)
    “Visual Studio.net已检测到指定的Web服务器运行的不是Asp.net1.1版。您将无法运行Asp.net Web应用程序或服务”问题的解决方法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7818011.html
Copyright © 2011-2022 走看看