JavaScript nested function prototype scope - Stack Overflow

admin管理员组

文章数量:1277901

I'm still having trouble figuring on how to manage scopes in JavaScript. In this particular example, I have a draw function containing certain properties and a function that needs to draw lines based on an array.

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

Of course, "this.ctx" inside the forEach function returns "undefined". How can I make sure that Draw()'s variables are passed to the forEach function (without doing something like ctx = this.ctx)?

I'm still having trouble figuring on how to manage scopes in JavaScript. In this particular example, I have a draw function containing certain properties and a function that needs to draw lines based on an array.

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

Of course, "this.ctx" inside the forEach function returns "undefined". How can I make sure that Draw()'s variables are passed to the forEach function (without doing something like ctx = this.ctx)?

• javascript
• scope
• prototype

Share Improve this question Follow edited Feb 11, 2013 at 1:31 Felix Kling 817k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked Feb 11, 2013 at 1:30 Jack GuyJack Guy 8,52388 gold badges6060 silver badges8888 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

You can use .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.

It's mon to declare the object instance variable as a new variable inside the method scope:

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

This has the advantage of allowing you to continue to use this as it would be ordinarily.

Pass this as the second argument to 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);

The second argument sets the value of this in the callback.

---

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

本文标签： JavaScript nested function prototype scopeStack Overflow