Clases de ES6

    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!

     

    Etiquetas:

    Deja una respuesta

    Tu direcci贸n de correo electr贸nico no ser谩 publicada. Los campos obligatorios est谩n marcados con *