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