javascript - 如何覆盖 Javascript 类中的函数，并调用基函数

Question

是否可以覆盖 Javascript 类中的函数，并调用它的基本实现？我已经通过使用原型(prototype)实现了这一点，但我正在努力保护某些数据的隐私。

这是我目前所拥有的，但它不起作用。我明白为什么它不起作用，但我看不到解决它的方法。我开始怀疑这在 javascript 中是否不可能(无需跳过很多环节)。

另外，我需要支持IE11，所以不能用ES6。

    var NoProto = NoProto || {};

    NoProto.Shape = (function(){
        var thing = function(name){
            var privateData = 'this is a ' + name;

            var self = this;
            this.base = function(){
                return self;
            };

            this.doStuff = function(){
                return privateData;
            };
        };

        return thing;
    })();

    NoProto.Square = (function(){
        var thing = function(colour){
            NoProto.Shape.call(this, "square");

            this.doStuff = function(){
                // this fails (stack overflow)
                // ------> how to call the "base" function: doStuff, and preserve the private data?
                var val = this.base().doStuff();
                return val + ', which is '+ colour;
            };
        };

        thing.prototype = Object.create(NoProto.Shape.prototype);

        return thing;
    })();

用法:

        var noProtoSqr = new NoProto.Square('blue');
        try {
            alert(noProtoSqr.doStuff()); // ---> Stack Overflow!
        } catch (e){
            console.error('There was an error: ' + e);
        }

作为引用，这就是我使用原型(prototype)的方式:

    var Proto = Proto || {};

    Proto.Shape = (function(){
        var thing = function(name){
            this._pseudoPrivateData = 'this is a ' + name;
        };

        thing.prototype._pseudoPrivateData = '';
        thing.prototype.doStuff = function(){
            return this._pseudoPrivateData;
        };

        return thing;
    })();

    Proto.Square = (function(){
        var thing = function(colour){
            Proto.Shape.call(this, "square");
            this._colour = colour;
        };

        thing.prototype = Object.create(Proto.Shape.prototype);

        thing.prototype._colour = '';
        thing.prototype.doStuff = function(){
            var val = Proto.Shape.prototype.doStuff.call(this);
            return val + ', which is '+ this._colour;
        };

        return thing;
    })();

用法:

        var protoSqr = new Proto.Square('blue');
        try {
            alert(protoSqr.doStuff());  // --> "this is a square, which is blue"
        } catch (e){
            console.error('There was an error: ' + e);
        }

Answer 1

当你使用

NoProto.Shape.call(this, "square")

这会将 Shape 的 doStuff 分配给当前实例化，如果这是您想要的。所以，现在 this.doStuff 将引用 NoProto.shape 中的原始 doStuff 函数。如果您想覆盖当前实例化的 doStuff 函数，同时能够调用原始 doStuff，请在之前保存对旧 doStuff 的引用分配给 this.doStuff:

var thing = function(colour){
  NoProto.Shape.call(this, "square");
  const oldDoStuff = this.doStuff;
  this.doStuff = function(){
    var val = oldDoStuff();
    return val + ', which is '+ colour;
  };
};

实时片段:

var NoProto = NoProto || {};

NoProto.Shape = (function(){
  var thing = function(name){
    var privateData = 'this is a ' + name;

    var self = this;
    this.base = function(){
      return self;
    };

    this.doStuff = function(){
      return privateData;
    };
  };

  return thing;
})();

NoProto.Square = (function(){
  var thing = function(colour){
    NoProto.Shape.call(this, "square");
    const oldDoStuff = this.doStuff;
    this.doStuff = function(){
      var val = oldDoStuff();
      return val + ', which is '+ colour;
    };
  };

  thing.prototype = Object.create(NoProto.Shape.prototype);

  return thing;
})();

var noProtoSqr = new NoProto.Square('blue');
try {
  console.log(noProtoSqr.doStuff()); // ---> Stack Overflow!
} catch (e){
  console.error('There was an error: ' + e);
}