Javascript: ¿Cómo crear nuestros propios métodos de extensión?

Vamos a extender las funcionalidades de una clase usando la propiedad prototype.

Rodríguez Patiño, Eduardo
2020-11-27 | 4,991 lecturas

Hoy vamos a ver como extender a una clase existente usando prototype.

¿Qué es Prototype?

Seguramente has visto en varios codigo JS algo que haga referencia a prototype y no tienes ni idea que es. Entonces, cada clase tiene una propiedad llamada prototype, mediante está podemos extender funcionalidades. Mas información en Protype by Mozilla.

Ejemplos

Bien vamos a extender las clases bases como Array, String y Number usando Prototype.

isEmptyOrNull (String)

La siguiente extensión lo que hace es verificar si la cadena a comparar esta vacía (no null).

String.prototype.isEmpty = function() {
    if(this.trim().length === 0) return true;
    return false;
};
console.log('Hola mundo'.isEmpty()); // true or false

pad (Number)

Lo que hace es agregar 0 a la izquierda, por ahora lo hemos hecho en duro y agrega 3 ceros a la izquierda dependiendo de la longitud del número que estemos comparando. Podríamos especificar como parámetro de entrada la cantidad de 0 a mostrar.

Number.prototype.pad = function(){
  var pad = '000';
    return (pad + this.toString()).slice(-pad.length);
}
console.log((4).pad()); // 004

where (Array)

Esto es algo más complejo, lo que hacemos aquí es buscar en un array de objetos si alguna de sus propiedades coincide con el valor especificado. Para este mismo ejemplo hemos creado 2 extensiones más:

  • firstOrDefault: devuelve el primer objeto encontrado en el array.
  • lastOrDefault: devuelve el último objeto encontrado en el array.
Array.prototype.where = function(key, value){
  var result = [];
  this.forEach(function(object, index){
    if(object[key].toLowerCase().indexOf(value.toLowerCase()) > -1){
        result.push(object);
    }
  })
  return result;
}

Array.prototype.firstOrDefault = function(){
    return this.length > 0 ? this[0] : null;
}

Array.prototype.lastOrDefault = function(){
    return this.length > 0 ? this[this.length - 1] : null;
}</pre>

<pre class="javascript " data-pbcklang="javascript" data-pbcktabsize="4">
var users = [
    { Nombre: 'Eduardo Rodriguez', Edad: 26 },
  { Nombre: 'Victor Raul', Edad: 30 },
  { Nombre: 'Jose Pardo', Edad: 45 },
  { Nombre: 'Eduardo Merina', Edad: 54 },
];

console.log(
    users.where('Nombre', 'Eduardo').lastOrDefault()
);

// Object { Nombre="Eduardo Merina",  Edad=54}

Intenten crear sus propias extensiones, por ejemplo podemos usar la clase Object para crear una extensión a los objetos que creemos.

Las clases más comunes para extender tenemos a:

  • String
  • Number
  • Array
  • Object

Si tuvieran dudas me dejan un comentario y les reponderé lo más pronto posible.