如何覆盖Javascript类中的函数,并调用基函数

Rik*_*Rak 5 javascript

是否可以覆盖Javascript类中的函数,并调用它的基本实现?我通过使用原型来实现这一目标,但我试图保留一些数据的隐私.

这是我到目前为止所做的,它不起作用.我可以看出为什么它不起作用,但我看不到解决它的方法.我开始怀疑这在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;
    })();
Run Code Online (Sandbox Code Playgroud)

用法:

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

作为参考,这就是我使用原型的方法:

    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;
    })();
Run Code Online (Sandbox Code Playgroud)

用法:

        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);
        }
Run Code Online (Sandbox Code Playgroud)

Cer*_*nce 1

当你使用

NoProto.Shape.call(this, "square")
Run Code Online (Sandbox Code Playgroud)

如果您想要的话,这会将Shape'分配给当前实例化。doStuff因此,现在将引用中的this.doStuff原始函数。如果您想覆盖当前实例化的函数,同时能够调用原始函数,请在分配给之前保存对旧实例的引用:doStuffNoProto.shapedoStuffdoStuffdoStuffthis.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;
  };
};
Run Code Online (Sandbox Code Playgroud)

直播片段:

NoProto.Shape.call(this, "square")
Run Code Online (Sandbox Code Playgroud)