Область прототипа встроенной функции JavaScript

Question

У меня все еще возникает проблема с тем, как управлять областями в JavaScript. В этом конкретном примере у меня есть функция draw, содержащая определенные свойства и функцию, которая должна рисовать линии на основе массива.

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

Конечно, «this.ctx» внутри функции forEach возвращает «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

Pass 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])

Answer 3

Распространено объявить переменную экземпляра объекта в качестве новой переменной внутри рамки метода:

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

Это имеет то преимущество, что позволяет продолжать использовать this как это было бы обычно.