修改原生 CanvasRenderingContext2D 函数答案

【问题标题】：Modify native CanvasRenderingContext2D functions修改原生 CanvasRenderingContext2D 函数
【发布时间】：2011-10-17 05:14:11
【问题描述】：

所以，你可以这样做：

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

现在突然alert('Hi') 会提醒Hi!。至此，窗口的提醒功能修改成功。有趣。

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

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

任何人都可以让它工作或至少找出究竟是什么导致它？

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

【问题讨论】：

标签： javascript html canvas prototype-programming

【解决方案1】：

首先，mandatory warning against modifying host objects。

现在你知道你要做什么了，这就是你的 sn-p 的问题：

分配给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) 使用正确的 this 调用 a 函数。

【讨论】：