修改本机CanvasRenderingContext2D函数

Question

所以，你可以这样做：

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))创建链接。

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