0

setInterval(nissan.moveRight, 250); при выполнении этой строки в консоли выбивает сообщение Cannot read property 'css' of undefined at Car.moveRight. Если же, выполнять вручную nissan.moveRight() - все работает. Почему так выполняется? 

var Car = function(x, y) {
        this.x = x;
        this.y = y;
    };
    Car.prototype.draw = function() {
        var carHtml = '<img src="http://nostarch.com/images/car.png">';
        this.carElement = $(carHtml);
        this.carElement.css({
            position: "absolute",
            left: this.x,
            top: this.y
        });
        $("body").append(this.carElement);
    };
    var tesla = new Car(300, 0);
    var nissan = new Car(200, 100);
    tesla.draw();
    nissan.draw();
    Car.prototype.moveRight = function() {
        this.x += 5;
        this.carElement.css({
            left: this.x,
            top: this.y
        });
    };
  setInterval(nissan.moveRight, 250);
Vl Zi
  • 1
  • 1
  • выведите в консоль this и carElement и посмотрите что они представляют из себя. – Саске Feb 19 '19 at 10:03

2 Answers2

1

Происходит "потеря контекста", при указании ссылки на функцию нужно его явно привязать 

setInterval(nissan.moveRight.bind(nissan), 250);


var Car = function(x, y) {
        this.x = x;
        this.y = y;
    };
    Car.prototype.draw = function() {
        var carHtml = '<img src="http://nostarch.com/images/car.png">';
        this.carElement = $(carHtml);
        this.carElement.css({
            position: "absolute",
            left: this.x,
            top: this.y
        });
        $("body").append(this.carElement);
    };
    var tesla = new Car(300, 0);
    var nissan = new Car(200, 100);
    tesla.draw();
    nissan.draw();
    Car.prototype.moveRight = function() {
        this.x += 5;
        this.carElement.css({
            left: this.x,
            top: this.y
        });
    };
  setInterval(nissan.moveRight.bind(nissan), 250);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Stranger in the Q
  • 56,055
1

Лучше так. Есть более новый вариант. Новые удобный синтаксис.

class Car {
    constructor(x ,y){ 
        this.x = x;
        this.y = y;
    }

    draw = () => {

        var carHtml = document.createElement('img');
        carHtml.src = 'http://nostarch.com/images/car.png'; // '<img src="http://nostarch.com/images/car.png">';
        this.carElement = carHtml;
        this.carElement.style.position = 'absolute';
        this.carElement.style.left = `${this.x}px`;
        this.carElement.style.right = `${this.y}px`;
        this.carElement.style.transition = '.5s';



        document.getElementsByTagName('div')[0].append(this.carElement);
    };
    moveRight = () => {
        console.log(this);
        this.x += 50;
        this.carElement.style.left = `${this.x}px`;
        this.carElement.style.right = `${this.y}px`;
    }

}

window.onload = () => {
    var tesla = new Car(300, 0);
    var nissan = new Car(200, 100);
    nissan.draw();
    setInterval(nissan.moveRight, 250);
}
Саске
  • 1,326
  • 13
  • 23