什么是关于 TypeScript 的猴子补丁？

Question

谁能给我一个关于 TypeScript 和 Angular2 的猴子补丁示例以及解释？

Answer 1

因为 JavaScript 是高度动态的，您可以将任何对象上的成员函数（和相关功能）替换为新的。它允许您在不更改原始代码的情况下修改一段代码的行为。

这是一个简单的 TypeScript 示例：

// original code, assume its in some library
interface Foo {
    a:number,
    b():number
}
var foo:Foo = {a:123,b:function(){return this.a}} 

// Monkey patch the function b with a new one
// Allows you to change the behaviour of foo without changing the original code
foo.b = function(){return 456}

更多：猴子补丁不仅仅是拦截

当您替换函数但保留原始行为时，它是函数拦截。是的，您使用猴子补丁进行函数拦截（替换函数），但调用原始函数不是猴子补丁的要求。

• python 答案What is monkey patching?（仅替换/覆盖）

同样来自维基百科：https://en.wikipedia.org/wiki/Monkey_patch 一个明显替代原始行为的应用程序：

在运行时替换方法/类/属性/函数，例如在测试期间存根函数；

最后，仅仅因为你可以调用原版并不意味着你必须在猴子修补时调用原版。

Answer 2

接受的答案并不是monkey patching 的真正示例。这是一个覆盖函数的例子

monkey patching 的关键在于将original function 分配给一个变量（供以后使用），并用new function 替换/覆盖 - 但是，new function 也必须致电original function

TypeScript Playground上的演示

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let originalFunciton = Greeter.prototype.greet;

Greeter.prototype.greet = function () {
    alert('In Monkey Patched Function');
    let returnValue = originalFunciton.apply(this); 
    return returnValue;
};

let greeter = new Greeter("world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
    alert(greeter.greet());
}

document.body.appendChild(button);