Skip to main content
adicionou 50 caracteres ao conteúdo
Fonte Link
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154

Isso está acontecendo porque você está utilizando uma arrow function, cujo this binding possui funcionamento léxico. Isso significa que o this não irá se referir à instância de EvilCircle, mas sim ao this do escopo superior que, nesse caso, é window.

Saiba mais nesta outra pergunta. A documentação também pode ser clarificadora nessa matéria.

Para corrigir, então, utilize uma expressão de função:

EvilCircle.prototype.draw = function() {
  console.log(this);
  console.log(this instanceof EvilCircle); //=> true
};

Sobre programação orientada a objetos em JavaScript, o funcionamento sempre será prototípico. Mas vale a pena utilizar a nova sintaxe de classes, introduzida no ECMAScript 2015 (ES6) para simplificar o seu código, principalmente na parte relacionada à herança.

class Shape {
  constructor(x, y, velX, velY, exists) {
    this.x = x;
    this.y = y;
    this.velX = velX;
    this.velY = velY;
    this.exists = exists;
  }
}

class EvilCircle extends Shape {
  constructor(x, y, exists) {
    // Chama o construtor da classe pai:
    super(this, x, y, 20, 20, exists); 

    this.color = 'white';
    this.size = 10;
  }

  draw() {
    console.log(this);
  }
}

Isso está acontecendo porque você está utilizando uma arrow function, cujo this binding possui funcionamento léxico. Isso significa que o this não irá se referir à instância de EvilCircle, mas sim ao this do escopo superior que, nesse caso, é window.

Saiba mais nesta outra pergunta. A documentação também pode ser clarificadora nessa matéria.

Para corrigir, então, utilize uma expressão de função:

EvilCircle.prototype.draw = function() {
  console.log(this);
  console.log(this instanceof EvilCircle); //=> true
};

Sobre programação orientada a objetos em JavaScript, o funcionamento sempre será prototípico. Mas vale a pena utilizar a nova sintaxe de classes, introduzida no ECMAScript 2015 (ES6) para simplificar o seu código, principalmente na parte relacionada à herança.

class Shape {
  constructor(x, y, velX, velY, exists) {
    this.x = x;
    this.y = y;
    this.velX = velX;
    this.velY = velY;
    this.exists = exists;
  }
}

class EvilCircle extends Shape {
  constructor(x, y, exists) {
    // Chama o construtor da classe pai:
    super(this, x, y, 20, 20, exists);
  }

  draw() {
    console.log(this);
  }
}

Isso está acontecendo porque você está utilizando uma arrow function, cujo this binding possui funcionamento léxico. Isso significa que o this não irá se referir à instância de EvilCircle, mas sim ao this do escopo superior que, nesse caso, é window.

Saiba mais nesta outra pergunta. A documentação também pode ser clarificadora nessa matéria.

Para corrigir, então, utilize uma expressão de função:

EvilCircle.prototype.draw = function() {
  console.log(this);
  console.log(this instanceof EvilCircle); //=> true
};

Sobre programação orientada a objetos em JavaScript, o funcionamento sempre será prototípico. Mas vale a pena utilizar a nova sintaxe de classes, introduzida no ECMAScript 2015 (ES6) para simplificar o seu código, principalmente na parte relacionada à herança.

class Shape {
  constructor(x, y, velX, velY, exists) {
    this.x = x;
    this.y = y;
    this.velX = velX;
    this.velY = velY;
    this.exists = exists;
  }
}

class EvilCircle extends Shape {
  constructor(x, y, exists) {
    // Chama o construtor da classe pai:
    super(this, x, y, 20, 20, exists); 

    this.color = 'white';
    this.size = 10;
  }

  draw() {
    console.log(this);
  }
}
Fonte Link
Luiz Felipe
  • 36,5mil
  • 10
  • 74
  • 154

Isso está acontecendo porque você está utilizando uma arrow function, cujo this binding possui funcionamento léxico. Isso significa que o this não irá se referir à instância de EvilCircle, mas sim ao this do escopo superior que, nesse caso, é window.

Saiba mais nesta outra pergunta. A documentação também pode ser clarificadora nessa matéria.

Para corrigir, então, utilize uma expressão de função:

EvilCircle.prototype.draw = function() {
  console.log(this);
  console.log(this instanceof EvilCircle); //=> true
};

Sobre programação orientada a objetos em JavaScript, o funcionamento sempre será prototípico. Mas vale a pena utilizar a nova sintaxe de classes, introduzida no ECMAScript 2015 (ES6) para simplificar o seu código, principalmente na parte relacionada à herança.

class Shape {
  constructor(x, y, velX, velY, exists) {
    this.x = x;
    this.y = y;
    this.velX = velX;
    this.velY = velY;
    this.exists = exists;
  }
}

class EvilCircle extends Shape {
  constructor(x, y, exists) {
    // Chama o construtor da classe pai:
    super(this, x, y, 20, 20, exists);
  }

  draw() {
    console.log(this);
  }
}