Почему не работает код?

Question

[lowsentmy]

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

Car.prototype.moveRight = function () {
	this.x += 10
	this.carElement.css({
		left:this.x,
		top:this.y
	})
}



var tesla = new Car(0,100)
tesla.draw()
var timer = setInterval(tesla.moveRight,30)

Ошибка script.js:19 Uncaught TypeError: Cannot read property 'css' of undefined at Car.moveRight
Почему не работает код?

Comments

[Алексей Ярков]

Нормальные пацаны к таким вопросам прикладывают текст ошибки ))

[lowsentmy]

Алексей Ярков, Uncaught TypeError: Cannot read property 'css' of undefined
at Car.moveRight

[Алексей Ярков]

lowsentmy, ну собственно вам уже и ответили ))

Answer 1

[0xD34F]

setInterval(tesla.moveRight,30)

Контекст теряете, при вызовах moveRight значением this у него внутри будет вовсе не tesla.

Какие есть варианты исправления данного косяка:

1. Привязывать контекст при передаче метода в setInterval:
   
   setInterval(tesla.moveRight.bind(tesla), 30)
   
   
2. Передавать в setInterval не сам метод, а функцию-обёртку, где метод будет вызываться в правильном контексте:
   
   setInterval(() => tesla.moveRight(), 30)
   
   
3. Сделать Car классом, а метод moveRight объявить с использованием синтаксиса стрелочных функций:
   
   

   class Car {
     ...
   
     moveRight = () => {
       ...
     }
   }

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

Comments

[lowsentmy]

Понял, спасибо

Answer 2

[Just Me]

var timer = setInterval(function (){
	return tesla.moveRight()
}	
,30)