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));

Learn more about 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的值。

MDN forEach() docs - array.forEach(callback[, thisArg])

JavaScript嵌套函数原型范围

3 个答案: