javascript - JavaScript 嵌套函数原型范围

Question

我仍然无法弄清楚如何在 JavaScript 中管理范围。在这个特定的示例中，我有一个包含某些属性的绘图函数和一个需要基于数组绘制线条的函数。

function Draw (canvas)
{
    this.ctx = canvas.getContext('2d');
    this.street_size = 20;
}

Draw.prototype.street = function (MAP)
{

    MAP.forEach(function (name)
    {
        this.ctx.moveTo(name.start.x,name.start.y);
        this.ctx.lineTo(name.end.x,name.end.y)
        this.ctx.stroke();
    });
}

当然，forEach 函数内的“this.ctx”返回“undefined”。如何确保将 Draw() 的变量传递给 forEach 函数（无需执行 ctx = this.ctx 之类的操作）？

Answer 1

您可以使用.bind ^[MDN]：

MAP.forEach(function (name) {
    this.ctx.moveTo(name.start.x,name.start.y);
    this.ctx.lineTo(name.end.x,name.end.y)
    this.ctx.stroke();
}.bind(this));

了解更多关于this.

Answer 2

在方法范围内将对象实例变量声明为新变量是很常见的：

var self = this;
MAP.forEach(function (name) {
    self.ctx.moveTo(...

这样做的好处是可以让您继续this照常使用。

Answer 3

this作为第二个参数传递给forEach().

MAP.forEach(function (name)
{
    this.ctx.moveTo(name.start.x,name.start.y);
    this.ctx.lineTo(name.end.x,name.end.y)
    this.ctx.stroke();
}, this);

第二个参数设置this回调中的值。

---

MDNforEach()文档-array.forEach(callback[, thisArg])