Programación orientada a objetos

Es un estilo de programación (forma de organizar el código) en el cual se crean entidades.

Para representar las entidades se necesita crear una plantilla.

En la plantilla se definen las características que va a tener y las acciones que puede realizar cada entidad.

Conceptos generales.

Clase

Plantilla donde se definen los atributos y las acciones de la entidad.

Ej: “Curso”

// La clase curso

var Curso = function () {
  // Código
}

Propiedad o Atributo

Característica de cada entidad.

Ej: Cada curso que hagamos queremos que tenga un nombre, una fecha de inicio y una fecha de término.

// Clase curso con atributos 
// nombre, inicio, termino

var Curso = function () {
  this.nombre 
  this.inicio
  this.termino
}

Métodos

Acciones que va a poder realizar cada entidad.

Ej: Queremos que el curso muestra su duración en días.

// Clase curso con atributos y un método
// que devuelve la duración del curso en días
var Curso = function () {
  this.nombre 
  this.inicio
  this.termino
  this.duracion = duracion
  
  function duracion() {  
   return Math.abs((this.termino.getTime() - this.inicio.getTime())/ 86400000) + " dias"
  }
  
}

Objeto o Instancia de Clase
Entidad creada a través del uso de la plantilla.

/*
Para crear un objeto se utiliza
la palabra new antes del nombre
de la clase. 
En este caso el objeto se va a llamar mi_curso
*/

var mi_curso = new Curso()

Ya que hicimos el objeto ¿cómo establecemos los valores que van a tener los atributos?
Una vez que creamos una instancia y la almacenamos en una variable (en este caso es mi curso) utilizamos el nombre de la variable, seguido de un punto y después el nombre del atributo al que le queramos asignar un valor y le asignamos el valor.

mi_curso.nombre = "js"
mi_curso.inicio = new Date(2014, 01, 01)
mi_curso.termino = new Date(2014, 03, 01)

Para consultar el valor que tiene establecido la propiedad, utilizamos el nombre de la variable, seguido de un punto y después el nombre del atributo.

mi_curso.nombre
mi_curso.inicio
mi_curso.termino

Este proceso de asignación y lectura de valores es similar a la asignación y lectura de valores con las variables.

Si consultamos el valor de una propiedad a la cual no le hemos asignado valor va a devolver undefined.

Para utilizar los métodos del objeto se utiliza el nombre del objeto seguido de punto, el nombre del método y paréntesis. Similar al uso de las funciones.

mi_curso.duracion()

this

Esta palabra se utiliza para hacer referencia al objeto creado.

En el ejemplo anterior, cuando creamos el objeto mi_curso y asignamos valores a las propiedades “nombre”, “inicio”, “termino” this hace referencia al objeto “mi_curso”. Si creamos otro objeto llamado “otro_curso” this va a hacer referencia a “otro_curso”

// Incluir la clase Curso()

var mi_curso = new Curso()
mi_curso.nombre = "js"
mi_curso.inicio = new Date(2014, 01, 01)
mi_curso.termino = new Date(2014, 03, 01)

var otro_curso = new Curso()
otro_curso.nombre = "js2"
otro_curso.inicio = new Date(2014, 03, 01)
otro_curso.termino = new Date(2014, 06, 01)

mi_curso.duracion()
//=> "59 dias"
otro_curso.duracion()
//=> "90.95833333333333 dias"

Si las funciones no están relacionadas directamente al objeto this se va a salir de contexto porque no va a estar asociado al objeto (va a asociar this al objeto de la ventana).

var Curso = function () {
  this.nombre 
  this.inicio
  this.termino
  this.duracion = duracion
  this.referencia = referencia

  function duracion() {  
    return Math.abs((this.termino.getTime() - this.inicio.getTime())/ 86400000) + " dias"
  }
  
  function referencia() {
    /*
      Mostramos el valor que tiene this cuando la función está asociada a la clase
      this se refiere al objeto
    */
    console.log( "Valor de this desde un método asociado a la clase")
    console.log( this )
    /*
      Mandamos llamar la función "sin_referencia"
      Esta función no está asociada a la clase aunque se encuentra definida dentro de esta.
    */
    sin_referencia()
  }

  function sin_referencia() {
    /*
    Esta función no tiene la palabra this por lo tanto no está asociada al objeto creado
    pero se asocia al objeto de la ventana. 
    */
    console.log( "Valor de this desde una función que no está asociada a la clase")
    console.log( this )
  }

  
}
var mi_curso = new Curso()
mi_curso.nombre = "js"
mi_curso.inicio = new Date(2014, 01, 01)
mi_curso.termino = new Date(2014, 03, 01)
mi_curso.referencia()

/*
Valor de this desde un método asociado a la clase:

Curso {duracion: function, referencia: function, nombre: "js", inicio: Sat Feb 01 2014 00:00:00 GMT-0600 (CST), termino: Tue Apr 01 2014 00:00:00 GMT-0600 (CST)}

Valor de this desde una función que no está asociada a la clase:

Window {top: Window, window: Window, location: Location, external: Object, chrome: Object…}
 
*/

Aunque parece complicado – sobre todo tener en mente el alcance de this – este tipo de programación ayuda a dar contexto a las variables – utilizadas como atributos – y a las funciones – utilizadas como métodos – no está de más reescribir algún código existente (que tenga variables y funciones) dentro de una clase.

Una vez que funcione lo que sigue es utilizar la clase en otros proyectos.