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)

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

另外，如果你想知道，我想要这样做的原因是用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函数。

修改本机CanvasRenderingContext2D函数

1 个答案: