miércoles, 27 de mayo de 2020

Clases en javascript

Clases en javascript

Se introdujeron en ECMAScript 2015 conocido como ES6, estan basadas en la herencia de prototipos de javascript, para definir la clase Persona tenemos dos formas:

Mediante function:

 function Persona() { }

Mediante class:

 class Persona() {}

 

function  Persona(dni,persona){

   this.dni = dni;

   tnis.nombre = nombre;

}

Class Persona(){

  constructor(dni,nombre){

    this.dni = dni;

    tnis.nombre = nombre;

  }

} 

El constructor es un método de clase que es llamado en el momento de la creación de la instancia del objeto, en la función los datos pasados a la función sirven como constructor.

var persona = new Persona(‘001’,”Juan”);

Las propiedades de la clase

Para trabajar con propiedades dentro de una clase utilizamos la palabra reservada this donde este se refiere al objeto Persona

function Persona(primerNombre) {

  this.primerNombre = primerNombre; 

}

Los metodos de la clase

Para añadir métodos en las funciones usamos prototipos:

Persona.prototype.setNombre = function(nombre) { 

   this.primerNombre = nombre;

};

Persona.prototype.getNombre = function() { 

   return this.primerNombre;

};

Para añadir metodos en las clases usamos los metodos de la siguiente manera:

class Persona {

    constructor(dni, nombre) {

        this.dni = dni;

        this.nombre = nombre;

    }

 

    //añadiendo métodos a la clase

    getNombre() {

        return this.nombre;

    }

    setNombre(nombre){

        this.nombre=nombre;

    }

}

Instancias de la clase 

Para crear dos instancias de una clase

var persona1 = new Persona();

var persona2 = new Persona();

 

Metodos estaticos de una clase

Para usar un metodo de la clase Persona debemos crear un objeto de la clase Persona con new, en el cual creamos una instancia de la clase, pero para crear un metodo estatico no hace falta crear el objeto se puede ejecutar directamente sobre la clase.

class Persona {

    constructor(dni, nombre) {

        this.dni = dni;

        this.nombre = nombre;

    }

 

static nacionalidadPersona(){

       return “Española”

}

 

    // añadiendo métodos a la clase

    getNombre() {

        return this.nombre;

    }

    setNombre(nombre){

        this.nombre=nombre;

    }

}

Persona.nacionalidadPersona();

 

Herencia

La herencia en javascript esta basada en prototipos en vez de clases.

Para hacer la herencia usamos la siguiente instrucción:

util.inherits(constructor,superconstructor);

Por ejemplo si tenemos la clase animal con la propiedad nombre y sus métodos get y set correspondientes y una clase gato que es una clase derivada de animal:

var util=require('util');

var Animal = function () {

    this.nombre='';   

};

Animal.prototype.getNombre = function() {

    return this.nombre;

}  

Animal.prototype.setNombre = function(nombre) {

    this.nombre=nombre;

}  

 

Definicion de la clase gato:

var Gato = function(){

}

util.inherits(Gato,Animal);

 

Uso de la clase de gato:

var gato = new Gato();

gato.setNombre('gato');

console.log(gato.getNombre());

  

Prototipos

La POO de JavaScript se encuentra basada en prototipos y no en clases

Los prototipos son objetos que pueden tener funciones y métodos y pueden ser utiliados por otros objetos para la herencia. Siguiendo estas reglas nosotros podemos aplicar los siguientes conceptos de la Orientación a Objetos:

  • Herencia
  • Encapsulamiento
  • Abstracción
  • Polimorfismo

Consideremos la siguiente función  Animal:

 function Animal(nombre, edad) {

        this.nombre = nombre;

        this.edad = edad;

        this.dormir = function () {

            console.log('Estoy durmiendo');

        }

    }

 Y dos instancias de la funcion:

var perro = new Animal(‘cuco’,6);

var gato = new Animal(‘micho’,1);

Por cada instancia se esta generando el método dormir, sucede porque cuando instanciamos una objeto estamos usando una función constructora, que genera el método dormir y las propiedades nombre y edad.

Ya sabemos que cada instancia tiene un prototipo

Si sacamos la función dormir fuera de la función constructora y después la asignamos al prototipo:

 var inicia = function () {

function Animal(nombre, edad) {

        this.nombre = nombre;

        this.edad = edad;        

    }

    Animal.prototype.dormir = function(){

           console.log('Estoy durmiendo');

    }

    var perro = new Animal('cuco',6);

    var gato = new Animal('micho',1);

}

inicia(); 

 

El método no se está agregando a cada instancia sino que usa el prototipo

Object.create

 

Crea un nuevo objeto, utilizando un objeto existente como el prototipo del nuevo objeto creado.

var inicia = function(){

    function Animal(nombre,edad){

        this.nombre = nombre;

        this.edad = edad;

        this.dormir = function(){

            console.log('He dormido');

        }

      }

      var cuco = new Animal('Cuco',6);

      let nuevoAnimal = Object.create(cuco); 

    console.log(nuevoAnimal.nombre);   

}

inicia();

La propiedad dormir y los atributos edad y nombre pasan al prototipo del nuevo objeto

Closure

Un closure es una función que es libre de variables, esto quiere decir que las variables de la función padre funcionan, pero el closure no tiene variables propias.

function padre() {

  var a = 1;

  function closure() {

    console.log(a);

  }

  closure();

}

padre();

La función padre() crea una variable local y una función closure(). Esta función interna es un closure y solo está disponible dentro de padre(). A diferencia de padre() esta función no tiene variables locales y usa las declaradas dentro de padre().

Se usan para encapsular el estado de un objeto o de función

Si tenemos el objeto Persona:

var Persona = function() {

  var sThis = this;

  this.datosPersona = {

  dni : '',

  nombre :  '',

  apellidos : ''  

}

var getDni=function() {

    return sThis.datosPersona .dni;

}

var getNombre=function() {

    return sThis.datosPersona .nombre;

}

var getApellidos=function() {

    return  sThis.datosPersona .apellidos;

}

var setDni= function (dni) {

    sThis.datosPersona .dni = dni;

}

var setNombre = function (nombre) {

    sThis.datosPersona .nombre = nombre;

}

var setApellidos = function (apellidos) {

    sThis.datosPersona .apellidos = apellidos;

}

  return {

    getDni : getDni,

    getNombre : getNombre,

    getApellidos : getApellidos,    

    setDni : setDni,

    setNombre : setNombre,

    setApellidos : setApellidos

    }

}

 

Var  persona = new Persona();

 

El objeto que obtenemos no es el objeto Persona sino el JSON devuelto en el return,  la variable sThis tiene un alcance en el contexto de ejecución mientras que this tiene un alcance global

Stampit

Sirve para encapsular objetos ligeros, donde ejecutaremos la función stampit y a ella insertamos la Clase, en el método enclose() y crearemos un nuevo objeto mediante el método create();

var Persona = function () {

    var objetoPersona = stampit();

    var Clase = function () {

        var dni = '';

        var nombre = '';

        var apellidos = '';

        this.getDni = function () {

            return dni;

        }

        this.getNombre = function () {

            return nombre;

        }

        this.getApellidos = function () {

            return apellidos;

        }

        this.setDni = function (dniPersona) {

            dni = dniPersona;

        }

        this.setNombre = function (nombrePersona) {

            nombre = nombrePersona;

        }

        this.setApellidos = function (apellidosPersona) {

            apellidos = apellidosPersona;

        }

        objetoPersona.enclose(Clase);

        return objetoPersona.create();

    }

}

 

No hay comentarios:

Publicar un comentario