Ошибка "Неперехваченная ошибка типа" при изменении свойства этого объекта- JavaScript

#javascript #javascript-objects

#javascript #javascript-объекты

Вопрос:

Я изучаю объекты и прототипы в JavaScript, и я застрял. Моя цель — создать объект, который затем будет отображен на странице. Я создал другой конструктор прототипа, чтобы позже этот конкретный созданный объект можно было переместить на страницу, однако это не работает, и я не знаю, как с этим работать дальше

вот мой JS:

 var Bunny = function (x, y) {
    this.x = x;
    this.y = y;
}

Bunny.prototype.drawBunny = function () {
    var bunnyImage =  document.createElement('img');
    bunnyImage.src = "https://64.media.tumblr.com/tumblr_m06yweMXBl1qaajuxo1_500.gif";
    bunnyImage.style.position = "absolute";
    bunnyImage.style.left = this.x   "px";
    bunnyImage.style.top = this.y   "px";
    document.getElementsByTagName("body")[0].appendChild(bunnyImage);
}

Bunny.prototype.moveRight = function() {
    this.x  = 5;
    this.bunnyImage.style.left = this.x   "px";
    this.bunnyImage.style.top = this.y   "px";
}

а затем в журнале консоли (это работает):

 var sunflower = new Bunny(200, 200);
sunflower.drawBunny();

но когда я пишу это в журнале консоли:

 sunflower.moveRight();

Я получаю эту ошибку:

Неперехваченная ошибка типа: this.bunnyImage не определен

указание на this.bunnyImage в moveRight() функции

Ответ №1:

Определите «Это не работает» (одного этого утверждения недостаточно, чтобы помочь). В вашем случае консоль выдает :

Неперехваченная ошибка типа: не удается прочитать свойство ‘style’ неопределенного

Действительно, this.bunnyImage не определено. Вы забыли сохранить его в своей функции с this.bunnyImage = bunnyImage;

 var Bunny = function(x, y) {
  this.x = x;
  this.y = y;
}

Bunny.prototype.drawBunny = function() {
  var bunnyImage = document.createElement('img');
  bunnyImage.src = "https://64.media.tumblr.com/tumblr_m06yweMXBl1qaajuxo1_500.gif";
  bunnyImage.style.position = "absolute";
  bunnyImage.style.left = this.x   "px";
  bunnyImage.style.top = this.y   "px";
  this.bunnyImage = bunnyImage;
  document.getElementsByTagName("body")[0].appendChild(bunnyImage);
}

Bunny.prototype.moveRight = function() {
  this.x  = 5;
  this.bunnyImage.style.left = this.x   "px";
  this.bunnyImage.style.top = this.y   "px";
}

var sunflower = new Bunny(200, 200);

sunflower.drawBunny();
sunflower.moveRight();

Ответ №2:

 var Bunny = function (x, y) {
    this.x = x;
    this.y = y;
}

Bunny.prototype.drawBunny = function () {
    this.bunnyImage =  document.createElement('img');
    this.bunnyImage.src = "https://64.media.tumblr.com/tumblr_m06yweMXBl1qaajuxo1_500.gif";
    this.bunnyImage.style.position = "absolute";
    this.bunnyImage.style.left = this.x   "px";
    this.bunnyImage.style.top = this.y   "px";
    document.getElementsByTagName("body")[0].appendChild(this.bunnyImage);
}

Bunny.prototype.moveRight = function(delta = 5) {
    this.x  = delta;
    this.bunnyImage.style.left = this.x   "px";
    this.bunnyImage.style.top = this.y   "px";
}

var sunflower = new Bunny(200, 0);
sunflower.drawBunny();

// Lets dance
setInterval(() => {
  sunflower.moveRight(200 * (.5 - Math.random()))
}, 200)