En esta ocasión, vamos a ver como funciona la nueva sintaxis para escribir clases en JavaScript. Esta nueva sintaxis es otra de las novedades que presenta ES6.
Declaración
En la versión tradicional de JavaScript, también se puede trabajar con clases (POO) lo que pasa es que no hay una declaración “class” para ello. Se tiene que hacer a través de prototipos (prototype). Vamos a ver un ejemplo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// constructor function Product(name, year, price) { this.name = name; this.year = year; this.price = price; } // método Product.prototype.generateBarcode = function() { console.log('Método generateBarcode'); } // instancia clase var iphone = new Product('iPhone', 2018, 999); // llamada método iphone.generateBarcode(); // Método generateBarcode console.log(iphone.name); // iPhone |
Ver código anterior en vivo: https://repl.it/@vreaxe/JS-Prototype
Una vez hemos visto como se declaran clases en JS tradicional, vamos a ver cómo se haría con la nueva sintaxis de ES6 que simplemente es una manera más clara de escribir lo mismo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
// clase class Product { // constructor constructor(name, year, price) { this.name = name; this.year = year; this.price = price; } // método generateBarcode() { console.log('Método generateBarcode'); } } // instancia clase let iphone = new Product('iPhone', 2018, 999); // llamada método iphone.generateBarcode(); // Método generateBarcode console.log(iphone.name); // iPhone |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Class
Como podemos ver al comparar sintaxis, es mucho más sencilla y fácil de entender, y se escribe de manera parecida a otros lenguajes de programación.
Getters y setters
Los métodos getters y setters son métodos que nos permiten obtener (get) y establecer (set) propiedades en nuestras clases:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 |
// clase class Product { // constructor constructor(name, year, price) { this.name = name; this.year = year; this.price = price; } // getter get price() { return this._price; } // setter set price(price) { // https://blog.abelotech.com/posts/number-currency-formatting-javascript/ this._price = price.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + ' €'; } // método generateBarcode() { console.log('Método generateBarcode'); } } // instancia clase let iphone = new Product('iPhone', 2018, 999); // llamada método iphone.generateBarcode(); // Método generateBarcode console.log(iphone.name); // iPhone console.log(iphone.price); // precio formateado |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Getters-and-setter
En el ejemplo, estamos formateando el precio a formato Euros. Cuando a través del constructor se establece la propiedad se ejecuta el método set y cuando se imprime por consola el valor se llama al método get.
Métodos estáticos
Los métodos estáticos son un tipo de métodos que podemos acceder sin tener que hacer una instancia de la clase y que se declaran poniendo delante del nombre del método static:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
// clase class Product { // constructor constructor(name, year, price) { this.name = name; this.year = year; this.price = price; } // getter get price() { return this._price; } // setter set price(price) { // https://blog.abelotech.com/posts/number-currency-formatting-javascript/ this._price = price.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + ' €'; } // método generateBarcode() { console.log('Método generateBarcode'); } // método estático static exampleStaticmethod() { return 'Esto es un método estático que podemos llamar sin instanciar la clase.'; } } // llamada método estático console.log(Product.exampleStaticmethod()); // instancia clase let iphone = new Product('iPhone', 2018, 999); // llamada método iphone.generateBarcode(); // Método generateBarcode console.log(iphone.name); // iPhone console.log(iphone.price); // precio formateado |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Static-method
Es un método de ejemplo que en sí no hace nada útil, pero para ver cómo funciona nos sirve. Como ves, lo estoy llamando antes de la instancia (new) y, como he dicho antes, se puede acceder sin instanciar la clase. También, se llama de manera diferente (nombre de la clase, punto y método estático).
Herencia
En JavaScript tradicional, para heredar una clase de otra, lo tenemos que hacer de la siguiente manera:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
// constructor function Product(name, year, price) { this.name = name; this.year = year; this.price = price; } // método Product.prototype.generateBarcode = function() { console.log('Método generateBarcode'); } // constructor function Smartphone(name, year, price, os) { Product.call(this, name, year, price); this.os = os; } // herencia Smartphone.prototype = Object.create(Product.prototype); Smartphone.prototype.constructor = Smartphone; // instancia clase var iphone = new Smartphone('iPhone', 2018, 999, 'iOS'); // llamada método console.log(iphone.name); // iPhone console.log(iphone.os); // iOS iphone.generateBarcode(); // Método generateBarcode |
Ver código anterior en vivo: https://repl.it/@vreaxe/JS-Class-extends
En ES6, simplemente tenemos que utilizar extends después de la declaración de la clase (class) e indicar el nombre de la clase de la cual queremos que herede todos los métodos y propiedades:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
// clase class Product { // constructor constructor(name, year, price) { this.name = name; this.year = year; this.price = price; } // getter get price() { return this._price; } // setter set price(price) { // https://blog.abelotech.com/posts/number-currency-formatting-javascript/ this._price = price.toFixed(2).replace('.', ',').replace(/(\d)(?=(\d{3})+(?!\d))/g, '$1.') + ' €'; } // método generateBarcode() { console.log('Método generateBarcode'); } } // herencia class Smartphone extends Product { // constructor constructor(name, year, price, os) { super(name, year, price); this.os = os; } } // instancia clase let iphone = new Smartphone('iPhone', 2018, 999, 'iOS'); console.log(iphone); console.log(iphone.price); iphone.generateBarcode(); |
Ver código anterior en vivo: https://repl.it/@vreaxe/ES6-Class-extends
-
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR