6

Una pregunta, de que me sirve externalizar una propiedad, he creado una propiedad total con el metodo get, pero para que es neecsario? Ya que haciendo un metodo lo puedo llamar igual con () y me retornara lo que yo quiera, en lugar de get total() hago total() y ya, no veo mucho la novedad del metodo get

class Factura {
  constructor(divisa, nombre, importe, IVA = importe * .1) {
    this._divisa = divisa;
    this._nombre = nombre;
    this._importe = importe;
    this._IVA = IVA;
  }

  presentacion (){
    return ' La factura ' + this._nombre + ' tiene un importe de ' + this._importe + ' ' + this._divisa + ' y con el IVA, se queda en '
  }
  get total(){
    return this._importe + this._IVA;
  }
  // totalDescuento(){
  //   return this._importe + this._IVA -
  // }
}

let factura1 = new Factura('eur', 'Transportes Chemita', 300);
let factura2 = new Factura('eur', 'Transportes Fran', 600);
let factura3 = new Factura('eur', 'Transportes Ailyn', 900);
let factura4 = new Factura('eur', 'Transportes alvaro', 9000);
let factura5 = new Factura('eur', 'Transportes carlos', 9200);
let factura6 = new Factura('eur', 'Transportes pepito', 9100);

document.write(factura1.presentacion() + factura1.total + ' eur' + '<br>');
document.write(factura2.presentacion() + factura2.total + ' eur' + '<br>');
document.write(factura3.presentacion() + factura3.total + ' eur' + '<br>');
document.write(factura4.presentacion() + factura4.total + ' eur' + '<br>');
document.write(factura5.presentacion() + factura5.total + ' eur' + '<br>');
document.write(factura6.presentacion() + factura6.total + ' eur' + '<br>');

2

2 respuestas 2

2

Básicamente lo que te aportan los métodos get y set es poder establecer lógica a la hora de establecer y recuperar valores de una propiedad manteniendo la sintaxis de propiedades del objeto:

// Para recuperar valor
var valor = instancia.nombrePropiedad;
// Para establecer valor
instancia.nombrePropiedad = valor;

Imagina que tienes un tipo Persona con una propiedad nombreCompleto que devuelve el nombre completo de la persona (nombre + apellidos) y permite igualmente establecer este valor:

class Persona {
  constructor(nombre, apellidos) {
    this.nombre = nombre;
    this.apellidos = apellidos;
  }

  get nombreCompleto(){
    return (this.nombre ? this.nombre + ' ' : '')
      + (this.apellidos ? this.apellidos : '');
  }
  
  set nombreCompleto(value){
    if (typeof value === 'string'){
      var parts = value.split(' ');
      this.nombre = parts[0];
      this.apellidos = parts.slice(1).join(' ');
    }
  }
  
}

var foo = new Persona('Asier', 'Villanueva Rodilla');
console.log(foo, foo.nombreCompleto);
foo.nombreCompleto='Pedro Picapiedra';
console.log(foo, foo.nombreCompleto);

Como ves tanto para recuperar como para establecer el valor se utiliza la sintaxis foo.nombreCompleto.

Hasta ECMAScript 5 tendrías que crear para hacer esto dos métodos: uno para recuperar el valor y otro para establecerlo.

function Persona(nombre, apellidos) {
    this.nombre = nombre;
    this.apellidos = apellidos;
    this.getNombreCompleto = function(){
      return (this.nombre ? this.nombre + ' ' : '')
      + (this.apellidos ? this.apellidos : '');
    }
    this.setNombreCompleto = function(value){
      if (typeof value === 'string'){
        var parts = value.split(' ');
        this.nombre = parts[0];
        this.apellidos = parts.slice(1).join(' ');
      }
    }
}

var foo = new Persona('Asier', 'Villanueva Rodilla');
console.log({nombre: foo.nombre, apellidos: foo.apellidos}, foo.getNombreCompleto());
foo.setNombreCompleto('Pedro Picapiedra');
console.log({nombre: foo.nombre, apellidos: foo.apellidos}, foo.getNombreCompleto());

Aquí utilizarías el método getNombreCompleto para recuperar el valor y el método setNombreCompleto para establecerlo.

De esta forma abstraes los detalles de implementación internos del desarrollador que hace uso del api externa del objeto.

Quizás el caso más práctico sea cuando quieres añadir una validación a una propiedad ya existente. Con el método anterior tendrías que dejar la variable que almacena el valor como privada y crear un método para establecer el valor que realice la validación (como el setNombreCompleto). Esto obligaría a modificar todas las líneas de código que establecieran el valor de esta propiedad. Mediante un método set podrías añadir esa validación interna sin necesidad de cambiar todo el código que hace uso de la api externa.

2
  • En ECMAScript 5.1 se pueden definir getters/setters en un constructor (o "clase"), solo que es necesario utilizar Object.defineProperties. Aquí un ejemplo
    – Marcos
    el 15 ene. 2018 a las 13:49
  • Cierto @Marcos, sí que estaba disponible a través de defineProperties el 15 ene. 2018 a las 14:10
1

Los getter/setters son muy utilizados principalmente por los frameworks y librerias debido que hacen mas fácil el patron Binding o observable donde los setters te permiten intervenir al momento de asignar el valor a la propiedad para realizar otra operación ademas de la asignación:

var persona ={
 nombre: null,
 apellido: null,
 get nombreCompleto(){
   return this.nombre + " " + this.apellido;
 },
 set nombreCompleto(value){
   var data = value.split(' ');
   this.nombre = data[0];
   this.apellido  = data[1];
   alert("se cambio el nombrea a " + this.nombreCompleto);
 }
};


persona.nombreCompleto = "Stack Overflow";

Nota como es posible recibir la notificación de cambio de nombre con una sintaxis limpia y común para todos: persona.nombreCompleto = 'valor'. Y se puede llevar aun mas lejos. Por ejemplo, al momento de asignar un valor a la propiedad nombreCompleto que también se edite un input relacionado a la propiedad:

  var persona ={
     nombre: null,
     apellido: null,
     get nombreCompleto(){
       return this.nombre + " " + this.apellido;
     },
     set nombreCompleto(value){
       var data = value.split(' ');
       this.nombre = data[0];
       this.apellido  = data[1];

       // editamos el valor del input nombre-completo
       document.getElementById("nombre-completo").value = this.nombreCompleto;
     }
    };


    persona.nombreCompleto = "Stack Overflow";
    setTimeout(function(){ 
      persona.nombreCompleto = "Einer Stack"
    }, 1000);
Nombre: <input type="text" id="nombre-completo" />

En cuanto a los setters ya esto serviría para procesar/formatear o limpiar la data antes de retornarla al codigo cliente. En C# los get/set son muy utilizados por WPF por la facilidad que proveen al definir las propiedades.

Pero como siempre se ha dicho, tienes que encontrar el caso correcto para implementar los set/get, de lo contrario, mejor utilizar funciones/propiedades estandares.

2
  • 1
    Casi "clavamos" el ejemplo. Ya es casualidad :D el 15 ene. 2018 a las 13:16
  • @AsierVillanueva Estaba escribiendo lo mismo en tu respuesta haha.
    – Einer
    el 15 ene. 2018 a las 13:17

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.