Я пытаюсь создать бесконечную функцию прототипа. Вот моя попытка, которая не работает:

function Cat(name, direction) {
this.name = name;
this.stand = {left: "images/standLeft.png", right: "images/standRight.png"};
this.walk = {left: "images/walkLeft.gif", right: "images/walkRight.gif"};
this.direction = direction;
}

Cat.prototype.walking = function() {
var myDirection = (this.direction == "right" ? "+=": "-=");
var myPosition = $("#cat").css("left");
myPosition = myPosition.substring(0, myPosition.length - 2);

var distanceLeft = myPosition;
var distanceRight = 1024 - myPosition - 173;


if(this.direction == "right") {
    var distance = distanceRight;
} else {
    var distance = distanceLeft;
}
    $("#cat img")[0].src =  this.walk[this.direction];
    $("#cat").animate({
        left: myDirection + distance
        }, (22.85 * distance), function(){
            this.direction = (this.direction == "right" ? "left": "right");
             this.walking();
        });
}

var myCat = new Cat("Izzy", "right");

Я думал, что вызов (this.walking()) снова запустит ту же функцию с тем же объектом, но это вызовет ошибку. Есть мысли или предложения?

0
Brandon Threinen 25 Янв 2013 в 22:23

2 ответа

Лучший ответ

this будет область окна.

$("#cat img")[0].src =  this.walk[this.direction];
var that = this;
$("#cat").animate({
    left: myDirection + distance
    }, (22.85 * distance), function(){
        that.direction = (that.direction == "right" ? "left": "right");
         that.walking();
    });
1
epascarello 25 Янв 2013 в 18:27

Смотрите мое объяснение обработки области в JavaScript (и jQuery) на этот поток StackOvervlow. В вашем случае вы просто должны принять, что jQuery выберет this как нечто отличное от вашего объекта cat. Также обратите внимание, что jQuery работает с элементом HTML, а не с экземпляром cat, поэтому, даже если он этого хочет, он не может установить this = ваш объект cat.

Вы можете решить эту проблему, добавив функцию в $.proxy (<ссылка) = "http://api.jquery.com/jQuery.proxy/" rel = "nofollow noreferrer"> ссылка ) примерно так:

// This is your original handler. I made this a named function for clarity.
var animateHandler = function() {
    this.direction = (this.direction == "right" ? "left": "right");
    this.walking();
}

// Now here's your original call to animate.
$("#cat").animate(
    { left: myDirection + distance},
    (22.85 * distance),
    animateHandler
);

// Here's what you'd change it to.
$("#cat").animate(
    { left: myDirection + distance },
    (22.85 * distance),
    $.proxy(animateHandler, this)
);
0
Community 23 Май 2017 в 11:56