javascript - 修改原生CanvasRenderingContext2D函数

Question

所以，你可以这样做:

window.alert=function(a) {
    return function(b) {
        a(b+'!')
    }
}(window.alert)

现在突然 alert('Hi') 会发出警报 Hi!。这样，窗口的alert功能就修改成功了。有趣。

现在我遇到的问题是将同样的概念应用到 HTML5 的 CanvasRenderingContext2D ( Canvas )。我不确定 prototype 是问题还是其他问题，但当我尝试调用新修改的 lineTo 函数时，它返回“非法调用”错误。

CanvasRenderingContext2D.prototype.lineTo=function(a) {
    return function(b,c) {
        a(b,c)
        return this
        }
    }(CanvasRenderingContext2D.prototype.lineTo)

任何人都可以让它发挥作用，或者至少找出到底是什么原因造成的吗？

此外，如果您想知道，我想要这样做的原因是使用 Canvas 函数创建链接(例如 context.lineTo(10,15).lineTo(20,15).lineTo(20 ,20)).

Answer 1

首先，mandatory warning against modifying host objects .

现在您知道自己要做什么了，这就是您的代码片段的问题:

分配给 CanvasRenderingContext2D.prototype.lineTo 的新函数简单地调用旧函数 a(b, c) 。当像这样调用函数时 - a(b, c) — 也称为“作为函数调用”，它的执行方式为 this是全局对象。

所以context.lineTo(10, 15)现在将执行旧的 lineTo函数(在 a 下别名)与 this是全局对象而不是 context 。当lineTo没有context进行操作，它显然不能做太多事情，因此会出现错误。

如何解决这个问题？

我们可以使用适当的 this 来调用函数值:

CanvasRenderingContext2D.prototype.lineTo = function(a) {
  return function(b,c) {
    a.call(this, b, c);
    return this;
  };
}(CanvasRenderingContext2D.prototype.lineTo);

通知a.call(this, b, c)调用 a功能正确 this .