Конструктор не передает аргументы, что делать?

Question

[Д. Г.]

Сделал конструктор для создания ботов в игре , потом решил добавить в диалоговую систему единицу , отвечающую за поведение бота во время диалога . По какой-то причине это число(только оно , остальные передаются нормально) не передается в функцию . Как такое исправить ? Код (писал только необходимое) :

$("body").append('<img src="dialog.png" , id="dialog" , width=800 , height=800>') ;
$("body").append('<button id="close">Закрыть</button>') ;
$("body").append('<h2 id="name"></h2>') ;
$("body").append('<h2 id="dates"></h2>') ;
$("body").append('<h4 id="words"></h4>') ;
$("body").append('<button id="q1"></button>') ;
$("body").append('<button id="q2"></button>') ;
$("body").append('<button id="q3"></button>') ;
$("body").append('<button id="q4"></button>') ;
$("body").append('<button id="q5"></button>') ;
$("body").append('<button id="q6"></button>') ;
$("#dialog").fadeOut(1) ;
$("#close").fadeOut(1) ;
$("#name").fadeOut(1) ;
$("#dates").fadeOut(1) ;
$("#words").fadeOut(1) ;
$("#q1").fadeOut(1) ;
$("#q2").fadeOut(1) ;
$("#q3").fadeOut(1) ;
$("#q4").fadeOut(1) ;
$("#q5").fadeOut(1) ;
$("#q6").fadeOut(1) ;

$("#dialog").offset({
top : 200 ,
left : 400 
}) ;
$("#close").offset({
top : 950 ,
left : 430
}) ;
$("#name").offset({
top : 225 ,
left : 680
}) ;
$("#dates").offset({
top : 270 ,
left : 750
}) ;
$("#words").offset({
top : 350 ,
left : 420 
}) ;
$("#q1").offset({
top : 550 ,
left : 420
}) ;
$("#q2").offset({
top : 580 ,
left : 420
}) ;
$("#q3").offset({
top : 610 ,
left : 420
}) ;
$("#q4").offset({
top : 550 ,
left : 700
}) ;
$("#q5").offset({
top : 580 ,
left : 700
}) ;
$("#q6").offset({
top : 610 ,
left : 700
}) ;

var close = function() {
$("#dialog").fadeOut(1000) ;
$("#close").fadeOut(1000) ;
$("#name").fadeOut(1000) ;
$("#dates").fadeOut(1000) ;
$("#words").fadeOut(1000) ;
$("#q1").fadeOut(1000) ;
$("#q2").fadeOut(1000) ;
$("#q3").fadeOut(1000) ;
$("#q4").fadeOut(1000) ;
$("#q5").fadeOut(1000) ;
$("#q6").fadeOut(1000) ;
} ;
$("#close").click(close) ;

var open = function() {
$("#dialog").fadeIn(1000) ;
$("#close").fadeIn(1000) ;
$("#name").fadeIn(1000) ;
$("#dates").fadeIn(1000) ;
$("#words").fadeIn(1000) ;
$("#q1").fadeIn(1000) ;
$("#q2").fadeIn(1000) ;
$("#q3").fadeIn(1000) ;
$("#q4").fadeIn(1000) ;
$("#q5").fadeIn(1000) ;
$("#q6").fadeIn(1000) ;
} ;
var NPC = function(id , name , birthdate , deathdate , words , int) {
this.id = id ;
this.name = name ;
this.birthdate = birthdate ;
//И.т.д. 
} ;
var dialogs = {
q1 : "Дарова !" , //Вопрос
a1 : ["Дарова!" , "Чё надо , а ?"] //Варианты ответов
} ;
NPC.prototype.draw = function() {
//Создаем изображение и.т.д.
//Система диалогов :
NPC.prototype.dialog = function() {
$("#name").text(this.name) ;
$("#words").text(this.words) ;
$("#dates").text(this.birthdate + " - " + this.deafhdate) ;
$("#q1").text(dialogs.q1) ;
$("#q1").click(function(){$("#wordsA").text(dialogs.a1[this.int])}) ; //Проблемное место
$("#" + this.id).click(open) ;
} ;
$("#" + this.id).click(this.dialog.bind(this)) ;
} ;
var npc1 = new NPC ("1" , "Ничтожество" , 1986 , 2027 , "Чаво от нас требуется ?" , 0) ;
npc1.draw() ;

Answer 1

[bruian]

Везде, кроме проблемного места, вы обращались к this в контексте метода объекта. В таком случае this привязан к объекту. В проблемном месте, обратите внимание, что воспользовались функцией. При определении this важна форма выражения вызова функции. У вас функция анонимна и будет использовать всегда this равный глобальному объекту, а в strict mode равным undefined.
Для решения проблемы можете воспользоваться замыканием, либо использовать стрелочную функцию (у стрелочной функции this лексически определен и наследуется из родительского окружения).