【问题标题】:ES6 javascript static class inheritance: sublass that overrides static method used by superclass [duplicate]ES6 javascript静态类继承:覆盖超类使用的静态方法的子类[重复]
【发布时间】:2016-06-08 16:06:36
【问题描述】:

如何覆盖子类中的静态方法,让超类方法仍然使用它们?
下面是代码示例:

    class SuperClass {
      static calc1() {
        return 5;
      }

      static calc2() {
        return 10;
      }

      static calcAll() {
        //here must be something else, instead of SuperClass reference
        return SuperClass.calc1() + SuperClass.calc2();
      }
    }


    class SubClass extends SuperClass {
      //override
      static calc1() {
        return 1000;
      }
    }

    console.log(SuperClass.calcAll()); //expected 5+10 = 15, got 15
    console.log(SubClass.calcAll()); //expected 1000+10 = 1010, got 15

【问题讨论】:

    标签: javascript class inheritance ecmascript-6 overriding


    【解决方案1】:

    解决方案

    刚刚找到解决方案,使用this
    但不确定这是否正确,如有必要,请查看/更正。

    class SuperClass {
      static calc1() {
        return 5;
      }
    
      static calc2() {
        return 10;
      }
    
      static calcAll() {
        //reference to this, bound to class itself, because of 'static'
        return this.calc1() + this.calc2();
      }
    }
    
    
    class SubClass extends SuperClass {
      //override
      static calc1() {
        return 1000;
      }
    }
    
    console.log(SuperClass.calcAll()); //5+10 = 15
    console.log(SubClass.calcAll()); //1000+10 = 1010
    

    可选信息:

    顺便发现了一些东西

    覆盖实例方法,是一样的:

    class SuperClass {
      calc1() {
        return 5;
      }
    
      calc2() {
        return 10;
      }
    
      calcAll() {
        //reference to this, bound to instance
        return this.calc1() + this.calc2();
      }
    }
    
    
    class SubClass extends SuperClass {
      //override
      calc1() {
        return 1000;
      }
    }
    
    console.log(new SuperClass().calcAll()); //5+10 = 15
    console.log(new SubClass().calcAll()); //1000+10 = 1010
    

    要在实例方法中使用静态方法,或将静态方法映射到实例方法上,请使用当前构造函数引用。

    class SuperClass {
      static calc1() {
        return 5;
      }
    
      calc2() {
        return 10;
      }
    
      calcAll() {
        //'this' bound to instance, and we get current! (e.g. SubClass) class, by .constructor call
        return this.constructor.calc1() + this.calc2();
      }
    }
    
    
    class SubClass extends SuperClass {
      //override
      static calc1() {
        return 1000;
      }
    }
    
    console.log(new SuperClass().calcAll()); //5+10 = 15
    console.log(new SubClass().calcAll()); //1000+10 = 1010
    

    将静态方法映射到实例方法:

    class SuperClass {
      static calc1(num) {
        return num;
      }
    
      calc1(...args) {
        //reference to static
        return this.constructor.calc1.apply(this.constructor, args);
      }
     /* alternative:
      calc1(num) {
        //reference to static
        return this.constructor.calc1(num);
      }
      */
    
    }
    
    
    class SubClass extends SuperClass {
      //override
      static calc1(num) {
        return num + 1000;
      }
    }
    
    //call statics
    console.log(SuperClass.calc1(5)); //5
    console.log(SubClass.calc1(5)); //5+1000 = 1005
    //call instance
    console.log(new SuperClass().calc1(5)); //5
    console.log(new SubClass().calc1(5)); //5+1000 = 1005
    

    【讨论】:

    • 我很确定它已经在 SO 上讨论过了,但是感谢您分享您的发现。这个this.constructor.calc1.apply(this, args); 是半生不熟的ES6(如果calc1 调用其他静态方法,它将失败)。使用this.constructor.calc1(...args)
    • @estus: 例如here :-) 顺便说一句,apply 相当于正确的调用将是this.constructor.calc1.apply(this.constructor, args)
    • @Bergi 好的,已修复,谢谢。 SO,当时没有发现问题。解决方案由您描述:stackoverflow.com/a/28648214/2519073
    猜你喜欢
    • 1970-01-01
    • 2016-01-19
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多