Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

Javascript: ¿Cómo crear nuestros propios métodos de extensión?
Actualizado el 18 Diciembre, 2015 y leído 2,116 veces
Calificación: Sin calificar 10

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

Anexsoft

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 es null o no se ha escrito nada.

String.prototype.isEmptyOrNull = function() {
    if(this === null) return true;
    if(this.trim().length === 0) return true;
    return false;
};
console.log('Hola mundo'.isEmptyOrNull()); // 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;
}
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.

¡Adquiera ya!

  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#
  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.