修改本地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)現在將this是全局對象，而不是context執行舊lineTo功能（a下化名）。當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。