覆盖 javascript 对象属性上的函数答案

【问题标题】：Overriding a function on a javascript object's property覆盖 javascript 对象属性上的函数
【发布时间】：2017-04-19 22:26:53
【问题描述】：

当函数位于父对象中的另一个对象上时，您将如何覆盖 javascript 对象上的函数。

例子：

function TestingABC() {
     this.events = { finish: function() { console.log("FINISHED"); } };
}

function TestingXYZ() {
     TestingABC.call(this);
}

TestingXYZ.prototype = Object.create(TestingABC.prototype);

如何覆盖 TestingXYZ 上的 events.finish 函数以运行父 (TestingABC) 代码以及我需要编写的一些新代码？

【问题讨论】：

var old = this.events.finish; this.events.finish = function() { console.log('new function'); old.call(this); }; ?
@RobG 你为什么删除你的答案？

标签： javascript oop inheritance

【解决方案1】：

因为events 对象是实例的属性，而不是原型，您可以使用类似于 monkey patching 的技术，在其中存储对当前函数的引用，然后覆盖当前函数，其中一个除了可以做其他事情外，还可以调用旧函数。

例如

function TestingABC() {
     this.events = { finish: function() { console.log("FINISHED"); } };
}

function TestingXYZ() {
     TestingABC.call(this);
     var superEvents = this.events;
     this.events = {
         finish: function () {
              superEvents.finish();
              doMyStuff();
         }
     };
}

TestingXYZ.prototype = Object.create(TestingABC.prototype);

【讨论】：

TestingXYZ.prototype.constructor = TestingXYZ 怎么样？ :D
@Badacadabra 我不确定你的意思，抱歉。
没问题... ;) 事实上，在 ES5 中使用继承时，“重新映射”构造函数通常是一个好主意。 Object.create() 采用父“类”的整个原型，其中包括父构造函数。但是“子类”的真正构造函数不是父构造函数……这就是上面代码有用的地方。 :)

【解决方案2】：

.events 是TestingABC() 构造函数的实例化属性 - 因此，一旦您实例化了它，您就可以修改该值。

也许这就是你所追求的？...

function TestingABC() {
     this.events = {
        finish: function() {
            console.log('ABC FINISHED');
        },
        other: function() {
            console.log('ABC OTHER');
        }
    };
}

function TestingXYZ() {
     TestingABC.call(this);
}

TestingXYZ.prototype = Object.create(TestingABC.prototype);

TestingXYZ.prototype.callEvents = function() {
    this.events.finish();
    this.events.other();
}

var test1 = new TestingABC();
var test2 = new TestingXYZ();

test2.events.finish = function() {
    console.log('XYZ FINISHED');
};

test1.events.finish();
test1.events.other();
//-> ABC FINISHED
//-> ABC OTHER

test2.callEvents();
//-> XYZ FINISHED
//-> ABC OTHER

【讨论】：