Menu

Clases en ES6

ecmascript - August 29, 2019 por Carlos Rojas | Edita este Post.
EcmaScript6

En EcmaScript 6 se agrego el uso de clases o el uso de la sintaxis con class presente en la mayoria de los lenguajes orientados a objetos.

La palabra class fue introducida en esta versión de EcmaScript como una forma mas sencilla de realizar programación orientada a objetos en JavaScript sin embargo solo fue una mejora de sintaxis porque esto se ha podido realizar en JavaScript desde versiones anteriores.

Miremos primero como se hacia anteriormente:

var Shape = function (id, x, y) {
    this.id = id;
    this.move(x, y);
};
Shape.prototype.move = function (x, y) {
    this.x = x;
    this.y = y;
};

Ahora miremos como se hace con una class.

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }
}

Como puedes observar es mucho mas claro para su lectura y se asimila mucho a los otros lenguajes de programación.

También tenemos cosas que nos ayudan mucho en nuestro codigo como es poder definir los constructor, tener que usar new para instanciar una clase y poder usar getters y setters.

class Shape {
    constructor (id, x, y) {
        this.id = id
        this.move(x, y)
    }
    move (x, y) {
        this.x = x
        this.y = y
    }

    get id() {
      return this.id;
    }

    set id(value) {
      this.id = value;
    }
}
let myShape = new Shape(1,2,3);

Adicionalmente, el manejo de la herencia es mucho mas claro.

class Square extends Shape {
    constructor (name,id,x,y) {
        super(id,x,y);
        this.name = name;
    }
}

Con la palabra extends indicamos que estamos heredando y con super podemos inicializar y mantener una referencia de la clase raiz.

Si este contenido te parece útil y me quieres ayudar a hacer mas considera apoyarme en Patreon.

Bueno eso es todo por ahora. Espero sea de utilidad :)

¡Compártelo!