Función bind
bind
es un método sobre el prototipo de todas las funciones en JavaScript. Te permite crear una nueva función a partir de una función existente, cambiar el contexto this
de la nueva función y proporcionar los argumentos con los que deseas que se llame a la nueva función. Los argumentos proporcionados para vincular (bind
) precederán a los argumentos que se pasen a la nueva función cuando se llame.
Usando bind
para cambiar this
en una función
El primer argumento proporcionado para vincular (bind
) es el contexto this
al que estará vinculada la función. Si no deseas cambiar el valor de this
pasa null
como primer argumento.
Tienes la tarea de escribir código para actualizar el número de asistencia a medida que llegan a una conferencia. Creas una página web simple que tiene un botón que, cuando se hace clic, incrementa la propiedad numDeAsistentes
en el objeto de conferencia. Utilizas jQuery para agregar un controlador de clic a tu botón, pero después de hacer clic en el botón, el objeto de la conferencia no ha cambiado. Tu código podría verse así.
var nodevember = {
numDeAsistentes: 0,
incrementoNumDeAsistentes: function() {
this.numDeAsistentes++;
}
// otras propiedades
};
$('.agrega-asistente-btn').on('click', nodevember.incrementoNumDeAsistentes);
Esto es un problema común cuando se trabaja con jQuery y JavaScript. Cuando hace clic en el botón la palabra clave this
en el método que pasó al método on
de jQuery hace referencia al botón y no al objeto de la conferencia. Puedes vincular el contexto this
de tu método para resolver el problema.
var nodevember = {
numDeAsistentes: 0,
incrementoNumDeAsistentes: function() {
this.numDeAsistentes++;
}
// otras propiedades
};
$('.agrega-asistente-btn').on('click', nodevember.incrementoNumDeInvitados.bind(nodevember));
Ahora, cuando se hace clic en el botón, la palabra clave this
hace referencia al objeto nodevember
.
Proporcionar argumentos a una función con bind
Cada argumento que se pase para vincular bind
después del primero precederá a cualquier argumento que se pase cuando se llame a la función. Esto te permite aplicar previamente argumentos a una función. En el siguiente ejemplo, combinaCadenas
toma dos cadenas de texto y las concatena. bind
se usa para crear una función que siempre proporciona "Cool" como la primera cadena de texto.
function combinaCadenas(str1, str2) {
return str1 + " " + str2
}
var makeCool = combinaCadenas.bind(null, "Cool");
makeCool("trick"); // "Cool trick"
La guía de esta referencia tiene más información sobre cómo pueden cambiar las referencias de la palabra clave this
.
Se pueden encontrar más detalles sobre el método de vinculación bind
en los documentos MDN de Mozilla.
Función length
La propiedad length
en el objeto de función contiene el número de argumentos que espera la función cuando se llama.
function noArgs() { }
function oneArg(a) { }
console.log(noArgs.length); // 0
console.log(oneArg.length); // 1
Sintaxis de ES2015
ES2015, o ES6 como se le llama comúnmente, introdujo el operador rest y los parámetros de función predeterminados. Ambas adiciones cambian la forma en que funciona la propiedad de longitud (length
) .
Si se utiliza el operador rest o los parámetros predeterminados en una declaración de función, la propiedad de length
solo incluirá el número de argumentos antes de un operador rest o un parámetro predeterminado.
function conRest(...args) { }
function conArgsYRest(a, b, ...args) { }
function conPredeterminados(a, b = 'Soy el predeterminado') { }
console.log(conRest.length); // 0
console.log(conArgsYRest.length); // 2
console.log(conPredeterminados.length); // 1
Puedes encontrar más información sobre Function.length
en MDN Docs de Mozilla.
Traducido del artículo - function.prototype.bind and function.prototype.length in JavaScript Explained