Comunidad de diseño web y desarrollo en internet online

Como programar mejor en JS (TIP 002-B) (Clases)

Citar            
MensajeEscrito el 26 Sep 2014 06:23 pm
El tema de hoy son clases. Uno de los conceptos primordiales en OOP (programacion orientada a objetos) y que pocas personas realmente usan en el mundo JS. El tema de hoy es this, y como declarar una clase. En javascript no esxiten las clases como en otros lenguajes, sin embargo las funciones pueden convertirse y comportarse como clases siguiento unos pasos muy simples. Supongamos que queremos hacer una clase que sea un circulo y que calcule su area, una clase se declara usando una funcion, como recomedacion las classes empiezan con mayusculas, algunos nombres de clases son Object, Array y String. Como veran todos empiezan con mayusculas esta es una convencion ya muy establecida y recomendada porque en codigo del mundo real sin leer mas yo puedo asumir que Popup es una clase para crear popups, y popup es una variable que muy probablemente sea un instancia de la clase Popup.

Que es una instancia?
Una intancia es un objeto que usa una clase, una clase puede ser usada multiples veces, si vamos a crear una clase que calcule el area de los circulos, esto significa que si tengo 10 circulos puedo crear 10 instancias (10 objetos que sean circulos) y cada uno tendra su area independiente de los demás.

Recomiendo mas leer respecto a este tema si aun no queda claro. O si te queda claro pero no has programado en Java, C , as3 o algun lenguaje que use clases.

Com crear una Clase:

Como dije una funcion se puede comportar como una clase asi que para crear una clase llamada criculo, a la cual le mandaremos su radio seria asi

Código :

function Circle(radio)
{
  this.radio = radio
}


la clave es la palabra this, cuando se crea una instancia this, hace que haga refrencia hacia si mismo, hacia el objeto que se creo. Para usar una clase se usa la palabra new y el nombre de la clase, los paramatros son los de la funcion que se creo. quedaria asi:

Código :

// Circulo de 10 de radio
var circuloA = new Circle(10);
// Circulo de 20 de radio
var circuloB = new Circle(20);
// Circulo de 30 de radio
var circuloC = new Circle(30);


Como cada uno es independiente, cada circulo guarda su propio radio de forma tal que

Código :

alert(circuloB.radio); // retorna una alerta con el valor de 20
alert(circuloA.radio); // retorna una alerta con el valor de 10


Este es uno de los conceptos mas poderosos de la programacion, ya que permite tener dos objetos similares pero totalmente independientes uno de otro, dos botones, dos checkboxes, dos poups, dos o el numero que se necesite, por eso la importancia de este concepto. La proxima vez veremos como hacer que el circulo calcule su propia area. Como tarea pueden crear una clase llamada rectangulo con ancho y altura. Feliz fin de semana

Por striwensko

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 14 Oct 2014 01:44 am
Ok en javascript no existen algo como "clases" , solo que el lenguaje sea muy flexible y que permita emular este modelo y otros es otra cosa, El problema de usar este modelo es que lo que comienzan con js no saben todo el proceso que hay por detras (constructores,prototipos,etc) y a veces puede llegar a ser muy confuso pero no deja de ser muy util. Me parece muy buena tus iniciativa(tips).

Por ignell

11 de clabLevel



Genero:Masculino  

Juegos con Html5

opera
Citar            
MensajeEscrito el 16 Oct 2014 09:38 pm
Cierto no existen las classes en javascript usamos las funciones como si lo fueran, y si tienes razon cuesta trabajo empezar a escribir en clases o entender como funcionan, yo me inicie en java y en un princippio recuerdo pensar pues hechemos todo en una sola funcion y ya esta, para que hacer varias, para que hacer varias classes. Pero es bueno empezar a formar habitos, que desafortunadamente no ocurre con muchos desarrolladores.

Otras cosas que extraño de otros lenguajes son las constantes, los eventos (de as3), los metodos privados y publicos, y el forzar un tipo de dato en las variables. Pero todo se puede emular en js solo siguiendo ciertas practicas como las constantes se pueden emular no cambiando el valor de una variable, pues lo importante es el concepto detras.

Gracias por el comentario y espero escribir mas tips pronto, ahorita como corrieron a un desarrollador con un cliente que trabajo no he tenido tiempo, pero espero pronto volver a continuar con la series de tips.

Por striwensko

15 de clabLevel



 

firefox
Citar            
MensajeEscrito el 30 Oct 2014 03:18 pm
ES6 agregará muchos cambios al lenguaje, ahora SI existirán clases, herencia mucho más sencilla y clara! entre muchas, muchas cosas más :)

Por stock

26 de clabLevel



Genero:Masculino  

JavaScript Developer

chrome
Citar            
MensajeEscrito el 31 Oct 2014 03:44 pm
Si ya habia escuchado algo de eso, espero ya pronto tener soporte para ES6, y que este sea un estandar en el mundo real, pero creo falta mucho aun pues la gente no actualiza sus navegadores, y ya tenemos el mundo movil que nos trajo navegadores mas modernos, pero tambien el mismo problema que depende de que version son los features que tienes disponibles.

Por striwensko

15 de clabLevel



 

firefox

 

Cristalab BabyBlue v4 + V4 © 2011 Cristalab
Powered by ClabEngines v4, HTML5, love and ponies.