• [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);
  • 相关阅读:
    Mybatis Generator生成Mybatis Dao接口层*Mapper.xml以及对应实体类
    ssh通过pem文件登陆服务器
    maven私服nexus上传第三方jar包以及下载
    springboot不占用端口启动
    springboot2.x纯注解整合dubbo
    mysql5.7 group by语法 1055
    java读取pdf文本转换html
    java 记录对象前后修改的内容(工具类)
    在docker中运行mysql实例
    Linux编辑启动停止重启springboot jar包脚本
  • 原文地址:https://www.cnblogs.com/Answer1215/p/7818011.html
Copyright © 2020-2023  润新知