javascript：将变量设置为ctx函数，例如moveTo不起作用

Question

如果我直接执行ctx.moveTo，它就可以了。但是，如果我将变量设置为ctx.moveTo（var f=ctx.moveTo;），那么f===ctx.moveTo为true，但f(0,0)失败并显示错误，ctx.moveTo(0,0)工作正常。为什么？我必须对javascript有一个根本的误解 - 我错过了什么？

Answer 1

您需要将上下文（在这种情况下为this）绑定到调用。为此，您可以使用bind()。

moveTo()之类的调用需要在内部访问this并期望它成为上下文。但是f()默认情况下仅与自身关联，并且无法在内部通过this访问上下文。将其绑定到上下文将允许内部调用与原始上下文一样访问this。

var f = ctx.moveTo.bind(ctx);
f(x, y);

var ctx = c.getContext("2d");
var f = ctx.fillRect.bind(ctx); // fillRect instead of moveTo for demo

f(10, 10, 100, 30);

<canvas id=c></canvas>