Clases de ES6

C

Introducción

No hay duda de que la popularidad de JavaScript se ha disparado en los últimos años, y se está convirtiendo rápidamente en el lenguaje de elección no solo para el código del lado del cliente, sino también para el lado del servidor. Nunca había sido un gran fanático de JavaScript, simplemente me parecía demasiado desordenado e innecesariamente confuso. Si bien todavía creo que algo de esto es cierto, gran parte fue solo un malentendido del lenguaje y una intolerancia por la falta de ciertas características / sintaxis (es decir, clases tradicionales).

Con el lanzamiento de ES6, JavaScript parece estar avanzando más hacia el lenguaje que personalmente quiero que sea, con la adición de clases de estilo tradicional, generadores, iteradores, promesas integradas y muchas otras características. Personalmente, creo que esto facilitará la transición para los desarrolladores que vienen de otros lenguajes como Java (como hice yo), Python y C ++. Aprender JavaScript abre muchas más posibilidades a los desarrolladores, permitiéndoles escribir código para casi cualquier plataforma que desee (del lado del navegador, del lado del servidor a través de node/io.js, aplicaciones móviles a través de Reaccionar nativoe incluso aplicaciones de escritorio).

Esté atento a las nuevas funciones de ES6 y ES7, todas están ahí por una razón y resuelven algunos problemas importantes para los desarrolladores, como lidiar con el infierno de las devoluciones de llamada.

En este artículo, analizaré las características y advertencias de las clases de ES6.

Clases de ES6

Entonces, vayamos directo a eso. Estos son los elementos básicos para crear una clase ES6:

class Animal {}

var a = new Animal();

Esto hace exactamente lo que parece, define una clase vacía sin propiedades ni métodos. Hay algunas formas diferentes de definir una clase ES6, y la sintaxis anterior es una de ellas. También puede definir clases anónimas o sin nombre, así:

var Animal = class {
    constructor(name) {
        this.name = name;
    }
};

Esto es equivalente a las clases anónimas en Java, donde define y crea una instancia de la clase al mismo tiempo.

Desde aquí, podemos agregar propiedades. Para hacer eso, debemos definirlos dentro del constructor, a diferencia de fuera de él como lo requiere Java.

class Animal {
	constructor() {
		this._name="cow";
	}
}

var a = new Animal();
console.log(a._name);	// Prints 'cow'

Para acceder o modificar estos datos, podemos definir métodos getter y setter:

class Animal {
	constructor(n) {
		this._name = n;
	}

	get name() {
		return this._name;
	}

	set name(n) {
		this._name = n;
	}
}

var a = new Animal('cow');
console.log(a.name);	// Prints 'cow'
a.name="cat"
console.log(a.name);	// Prints 'cat'

Al igual que con muchos otros lenguajes, podemos usar métodos estáticos y de instancia para acceder o manipular los datos de la clase:

class Animal {
	constructor(n) {
		this._name = n;
	}

	get name() {
		return this._name;
	}

	set name(n) {
		this._name = n;
	}

	fullName() {
		return 'holy ' + this._name;
	}

	static className() {
		return 'Animal';
	}
}

var a = new Animal('cow');
console.log(Animal.className());	// Prints 'Animal'
console.log(a.fullName());			// Prints 'holy cow'

Para los desarrolladores de Java y C #, esto debería resultar familiar. Tenemos los métodos tradicionales y los métodos estáticos, al igual que en muchos otros lenguajes.

Hasta ahora, las funciones que he mostrado no agregan mucho a JavaScript que no pudiéramos hacer antes. La utilidad real de las clases ES6 se realiza cuando usamos la herencia con el extends palabra clave. Esta funcionalidad estaba disponible antes, pero tenías que lidiar con la prototype y use util.inherits, que se sintió un poco incómodo y no fue muy claro para los desarrolladores de JS novatos. Ahora, podemos hacer algo como esto:

class Dog extends Animal {
	constructor() {
		super('dog');
	}

	fullName() {
		return 'snoop ' + this._name;
	}

	static className() {
		return 'Dog';
	}
}

var d = new Dog();
console.log(Dog.className());	// Prints 'Dog'
console.log(d.fullName());		// Prints 'snoop dog'

Esta sintaxis y comportamiento deben ser lo suficientemente comprensibles e intuitivos para que la mayoría de los desarrolladores puedan sumergirse directamente en ellos. Además, también debería hacer que el aprendizaje de JS sea mucho más fácil para los programadores más novatos.

Una advertencia a tener en cuenta es el “izado”. Elevar es el comportamiento predeterminado de JavaScript de mover declaraciones a la parte superior. La diferencia entre las declaraciones de clases y las declaraciones de funciones es que las funciones se elevan y las clases no. Esto significa que para usar una clase, debe estar definida antes de usarla.

var a = new Animal();    // ReferenceError!
class Animal {}

Las funciones, por otro lado, se pueden utilizar antes de definirlas.

Conclusión

Aunque gran parte de esta funcionalidad siempre ha estado disponible, creo que este es un gran paso para hacer que JS sea más fácil de usar. La sintaxis y la facilidad de uso son un factor importante en la adopción del lenguaje, por lo que es probable que esto impulse a JS aún más en popularidad.

¿Qué opinas de las nuevas clases de ES6? ¡Háganos saber lo que piensa en los comentarios!

 

About the author

Ramiro de la Vega

Bienvenido a Pharos.sh

Soy Ramiro de la Vega, Estadounidense con raíces Españolas. Empecé a programar hace casi 20 años cuando era muy jovencito.

Espero que en mi web encuentres la inspiración y ayuda que necesitas para adentrarte en el fantástico mundo de la programación y conseguir tus objetivos por difíciles que sean.

Add comment

Sobre mi

Últimos Post

Etiquetas

Esta web utiliza cookies propias para su correcto funcionamiento. Al hacer clic en el botón Aceptar, aceptas el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos. Más información
Privacidad