Не работает this в функциях, что делать?

Question

[Д. Г.]

Есть две функции , одна для отчета расстояния между объектами (для диалога) , вторая для размещения объектов на странице . Я использовал в них this и позже добавил их в объект , чтобы не создавать каждый раз уникальную функцию для каждого объекта . Проблема в том , что код не работает с использованием этого самого this или же различных аргументов в функциях , но работает , если назвать имя объекта в самой функции . Как вы понимаете , создавать отдельную функцию для каждого объекта не ахти . Можете пожалуйста объяснить , в чём проблема . Код такой (функцию передвижения не писал) :

$("body").append("<button id='action1'>-</button>");

var talkf = function() {
    var distance = function(n) {
        var x = img.left - this.left;
        var y = img.top - this.top;
        return Math.sqrt((x * x) + (y * y));
    };
    if (distance < 300) {
        $("#action1").text("Начать диалог");
    } else {
        $("#action1").text("-");
    };
};

var positionf = function() {
    $("#" + this.id).offset({
        left: this.left,
        top: this.top
    });
};

var img = {
    id: "1",
    left: 100,
    top: 200,
    position: setInterval(positionf, 200),
};

var img2 = {
    id: "2",
    left: 500,
    top: 600,
    position: setInterval(positionf, 200),
    talk: talkf
};

Comments

[Д. Г.]

BD_ l3ftoverZ!, А что он делает ?

[Д. Г.]

BD_ l3ftoverZ!, Спасибо , понял . А по вопросу часом информацией не располагаете ?

[origami1024]

Можешь переформулировать вопрос попроще?
И сделать jsfiddle

[origami1024]

if (distance < 300) {
    ...
}

Это вызов функции distance у тебя?

[Д. Г.]

origami1024, Не совсем . В distance я сделал return , который передает дистанцию .Так что можно считать , что distance на этом этапе превращается в переменную

Answer 1

[Somewhere Intech]

Проблема в том, что Вы не знаете, что такое scope..

$("body").append("<button id='action1'>-</button>");

var talkf = function() {
    var distance = function(n) {
        var x = img.left - this.left; 
        var y = img.top - this.top; 
        return Math.sqrt((x * x) + (y * y));
    };
    if (distance() < 300) {
        $("#action1").text("Начать диалог");
    } else {
        $("#action1").text("-");
    };
};

var positionf = function() {
    $("#" + this.id).offset({
        left: this.left,
        top: this.top
    });
};

var img = {
    id: "1",
    left: 100,
    top: 200,
    position: setInterval(() => { positionf.bind(img)() }, 200),
};

var img2 = {
    id: "2",
    left: 500,
    top: 600,
    position: setInterval( () => { positionf.bind(img2)() }, 200),
    talk: talkf.bind(img2)
};

Comments

[Д. Г.]

Можете поподробнее про содержание position и talk ?

[Somewhere Intech]

Кожный Мякиш, Содержимое их я менял для наглядности, на самом деле Ваш код можно было оставить без изменений в этих функциях. А вот в объектах img и img2 вы ошиблись в том, что не передали их функциям positionf и talkf. Вот что происходит:

var img2 = {
    id: "2",
    left: 500,
    top: 600,
    position: setInterval(positionf, 200), // в positionf объект this = undefined
    talk: talkf // в talkf объект this = undefined
};

Если изменить это на:

var img2 = {
    id: "2",
    left: 500,
    top: 600,
    position: setInterval(() => { positionf.bind(this)() } , 200), // в positionf объект this = window
    talk: talkf.bind(this) // в talkf объект this = window
};

Теперь правильный вариант:

var img2 = {
    id: "2",
    left: 500,
    top: 600,
    position: setInterval(() => { positionf.bind(img2)() } , 200), // bind`ом устанавливается содержимое this в функциях, т.е. scope - вам нужно изучить этот вопрос
    talk: talkf.bind(img2) // в positionf и talkf объект this = объект img2
};

[Д. Г.]

Спасибо , про bind я уже прочитал , но как насчет этой строчки , внутри интервала :
() => { positionf.bind(img2)() }
Можно вот про неё , а то уж больно она жутко выглядит .

[Somewhere Intech]

Кожный Мякиш, сократил запись...
() => { positionf.bind(img2)() }
или function(){ positionf.bind(img2)() }
или function(){ positionf.bind(img2).call() }
применяется bind, затем вызывается функция

[Д. Г.]

Johnny Lowhunter, Ух , а я уж подумал , что вы сверяете числовое значение скобок и функции ...