Tengo un código simple:

'use strict';

class GameObject {
    constructor(element){
        this.element = element;
}

    render(width,height,color){
        let newEl = document.createElement(this.element);
        newEl.style.width = width;
        newEl.style.height = height;
        newEl.style.backgroundColor = color;
        document.body.appendChild(newEl);
    }
}

class Circle extends GameObject{
    constructor(element){
       super()
        this.element = element;
   }



   //render(){}

}

El círculo Class actualmente tiene acceso al método de representación desde GameObjects Quiero que tenga una característica adicional de girar el elemento circular, es decir, elem.style.borderRadius = 50%, sin embargo, si agrego un método de representación en la {{X3 }} sobrescribe el método original. ¿Cómo puedo mantener el método heredado original render() y agregarle una función en una clase secundaria? ¿Sin tener que copiar y pegar el método de renderizado de la clase padre?

Actualización: Intenté usar el método super() y arroja el siguiente error index.js:24 Uncaught SyntaxError: 'super' keyword unexpected here

class Circle extends GameObject{
constructor(element){
    super()
    this.element = element;
}

render(){
    super()

   }

}
1
JohnSnow 22 mar. 2017 a las 09:58

2 respuestas

La mejor respuesta

Desde el render primario puede devolver el elemento renderizado. Entonces, en la clase secundaria Circle puede agregar estilos adicionales requeridos ...

class GameObject {
  constructor(element) {
    this.element = element;
  }

  render(width, height, color) {
    let newEl = document.createElement(this.element);
    newEl.style.width = width;
    newEl.style.height = height;
    newEl.style.backgroundColor = color;
    document.body.appendChild(newEl);
    return newEl
  }
}

class Circle extends GameObject {
  constructor(element) {
    super(element)
  }
  
  render(width, height, color) {
    let e = super.render(width, height, color)
    e.style.borderRadius = "50%"
  }
}

let c = new Circle('div')
c.render('40px', '40px', '#FF0000')

Alguna forma modificada con el nuevo elemento creado almacenado.

class GameObject {
  constructor(element) {
    this.element = element;
  }

  render(width, height, color) {
    this.newEl = document.createElement(this.element);
    this.newEl.style.width = width;
    this.newEl.style.height = height;
    this.newEl.style.backgroundColor = color;
    document.body.appendChild(this.newEl);
  }
}

class Circle extends GameObject {
  constructor(element) {
    super(element)
  }
  
  render() {
    super.render(...arguments)
    this.newEl.style.borderRadius = "50%"
  }
}

let c = new Circle('div')
c.render('40px', '40px', '#BB0000')
1
Krzysztof Safjanowski 22 mar. 2017 a las 09:03

super() llama al constructor, para otros métodos debe llamar a super.methodName; ver p. la guía MDN. En tu caso:

render() {
  super.render()
}
0
jonrsharpe 22 mar. 2017 a las 07:11