Function.prototype.bind()

Sintaxis

fun.bind(thisArg[, arg1[, arg2[, ...]]])

Parametros

thisArg

Es un valor que ser enviado a la funcin destino cuando se llame a la funcin de enlace. Este valor ser ignorado si la funcin de enlace es construida usando el operador new.

arg1, arg2, ...

Son los argumentos que se enviarn adems de los provistos a la funcin de enlace cuando se invoque la funcin destino.

Valor de retorno

Una copia de la funcin entregada con el valor especificado this y los argumentos iniciales.

Descripcin

La funcin bind() crea una nueva funcin (funcin ligada) con el mismo cuerpo (propiedad interna call en trminos de ECMAScript 5) como la funcin que ser llamada (la funcin objetivo de la funcin ligada) con la referencia this asociada al primer argumento de bind(), el cual no podr ser sobreescrito. bind() tambin acepta parmetros predeterminados que antecedern al resto de los parmetros especficos cuando la funcin objetivo sea llamada. Una funcin ligada tambin puede ser construda utilizando el operador new: al hacerlo, actuar como si en su lugar hubiera sido construda la funcin objetivo.

En este ltimo caso, el parmetro correspondiente para this ser ignorado, aunque los parmetros predeterminados que antecedern al resto s sern provistos para la funcin emulada.

Ejemplos

Ejemplo: Crear una funcin ligada

El uso ms simple de bind() es hacer que una funcin que, sin importar cmo es llamada, siempre apunte al mismo objeto con la referencia this. Un error comn para nuevos programadores de JavaScript es que obtienen una referencia a un mtodo de un objeto, posteriormente ejecutan ese mtodo desde la referencia externa y esperan que la referencia de this siga apuntando al objeto original de donde se obtuvo el mtodo (v.g. cuando se usa ese mtodo en un callback). Sin el debido cuidado, el objeto original es comnmente perdido. Creando una funcin ligada desde la funcin empleando el objeto original, resuelve limpiamente este problema:

this.x = 9;
var module = {
  x: 81,
  getX: function () {
    return this.x;
  },
};

module.getX(); // 81

var getX = module.getX;
getX(); // 9, porque en este caso, "this" apunta al objeto global

// Crear una nueva funcin con 'this' asociado al objeto original 'module'
var boundGetX = getX.bind(module);
boundGetX(); // 81

Ejemplo: Funciones Parciales

El siguiente uso simple de bind() es definir una funcin con argumentos predeterminados que precedern a los argumentos finales de la funcin ligada. Estos argumentos iniciales (en caso de haberlos) se definen a continuacin de lo que ser la referencia de this y son entonces enviados como argumentos de la funcin objetivo, seguidos por los argumentos enviados a la funcin ligada cada vez que dicha funcin sea llamada.

function list() {
  return Array.prototype.slice.call(arguments);
}

var list1 = list(1, 2, 3); // [1, 2, 3]

// Crear funcion (sin referencia this) con argumento inicial predeterminado
var leadingThirtysevenList = list.bind(undefined, 37);

var list2 = leadingThirtysevenList(); // [37]
var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]

Ejemplo: Con setTimeout

De manera predeterminada, dentro de window.setTimeout(), la palabra reservada this ser setteada al objeto window (o a global). Cuando se est trabajando con mtodos de clase que requieran que this se refiera a instancias de clase, usted puede explcitamente ligar this a la funcin callback para mantener la referencia de la instancia.

function LateBloomer() {
  this.petalCount = Math.ceil(Math.random() * 12) + 1;
}

// Declare bloom after a delay of 1 second
LateBloomer.prototype.bloom = function () {
  window.setTimeout(this.declare.bind(this), 1000);
};

LateBloomer.prototype.declare = function () {
  console.log("I am a beautiful flower with " + this.petalCount + " petals!");
};

Ejemplo: Funciones ligadas usadas como constructores

Las funciones ligadas son automticamente adecuadas para usarse con el operador new para construir nuevas instancias creadas por la funcin objetivo. Cuando una funcin ligada es utilizada para construir un valor, el parmetro enviado para reemplazar la referencia this es ignorado. De cualquier forma, los argumentos iniciales s son tomados en consideracin y antecedern a los parmetros que se enven al constructor:

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return this.x + "," + this.y;
};

var p = new Point(1, 2);
p.toString(); // '1,2'

var emptyObj = {};
var YAxisPoint = Point.bind(emptyObj, 0 /*x*/);
// not supported in the polyfill below,
// works fine with native bind:
var YAxisPoint = Point.bind(null, 0 /*x*/);

var axisPoint = new YAxisPoint(5);
axisPoint.toString(); // '0,5'

axisPoint instanceof Point; // true
axisPoint instanceof YAxisPoint; // true
new Point(17, 42) instanceof YAxisPoint; // true

Note que no necesita hacer nada especial para crear una funcin ligada para usarse con new. El razonamiento es que usted no necesita hacer nada especial para crear una funcin ligada para ser llamada planamente, an si usted prefiriera requerir que la funcin ligada sea llamada nicamente utilizando new.

// Ejemplo que puede ser ejecutado directamente en tu consola JavaScript
// ...contina de arriba

// An puede ser invocada como una funcin normal
// (aunque es usualmente indeseable)
YAxisPoint(13);

emptyObj.x + "," + emptyObj.y;
// >  '0,13'

Si desea utilizar una funcin ligada nicamente usando new, o nicamente mediante una llamada directa, la funcin objetivo debe forzar esa restriccin.

Ejemplo: Crear atajos

bind() tambin es til en casos en los que desea crear un atajo para una funcin que requiere una referencia especfica para this.

Tomando Array.prototype.slice, por ejemplo, el cual se deseara utilizar para convertir un objeto tipo array a un arreglo real. Podra crear un atajo como el siguiente:

var slice = Array.prototype.slice;

// ...

slice.call(arguments);

Con bind(), esto puede ser simplificado. En el siguiente fragmento de cdigo, slice es una funcin ligada a la funcin call() de Function, con la referencia this setteada a la funcin slice() de Array. Esto significa que llamadas adicionales a call() pueden omitirse:

// same as "slice" in the previous example
var unboundSlice = Array.prototype.slice;
var slice = Function.prototype.call.bind(unboundSlice);

// ...

slice(arguments);

Polyfill

La funcin bind() fue aadida a la especificacin ECMA-262, 5a edicin; por lo tanto podra no estar presente en todos los navegadores. Usted puede parcialmente simularla al insertar el siguiente cdigo al inicio de sus scripts, permitiendo emplear muchas de las funcionalidades de bind() en implementaciones que no la soportan nativamente.

if (!Function.prototype.bind) {
  Function.prototype.bind = function (oThis) {
    if (typeof this !== "function") {
      // closest thing possible to the ECMAScript 5
      // internal IsCallable function
      throw new TypeError(
        "Function.prototype.bind - what is trying to be bound is not callable",
      );
    }

    var aArgs = Array.prototype.slice.call(arguments, 1),
      fToBind = this,
      fNOP = function () {},
      fBound = function () {
        return fToBind.apply(
          this instanceof fNOP && oThis ? this : oThis,
          aArgs.concat(Array.prototype.slice.call(arguments)),
        );
      };

    fNOP.prototype = this.prototype;
    fBound.prototype = new fNOP();

    return fBound;
  };
}

Algunas de las muchas diferencias (bien podra haber otras, en tanto la siguiente lista no intenta ser exhaustiva) entre este algoritmo y el algoritmo de la especificacin son:

• La implementacin parcial se basa en Array.prototype.slice(), Array.prototype.concat(), Function.prototype.call() y Function.prototype.apply(), mtodos incorporados para tener sus valores originales.
• La implementacin parcial crea funciones que no tienen "poison pills" inmutables caller y las propiedades de los argumentos que lanzan una TypeError sobre get, set, o deletion. (Esto podra ser aadido si la implementacin soportara Object.defineProperty, o parcialmente implementada [sin el comportamiento throw-on-delete] si la implementacin soportara las extensiones Object.prototype.__defineGetter__() y Object.prototype.__defineSetter__() ).
• La implementacin parcial crea funciones que tienen una propiedad prototype. (Las funciones ligadas no tienen ninguna).
• La implementacin parcial crea funciones ligadas cuya propiedad length no coincide con la indicada por ECMA-262: sta crea funciones con longitud 0, mientras que la implementacin completa, dependiendo de la longitud de la funcin objetivo y del nmero de argumentos pre-especificados, podra regresar una longitud mayor a zero.

Si elige usar esta implementacin parcial, no debe de utilizarla en los casos en los que el comportamiento es distinto al de la especificacin ECMA-262, 5th edition! Con un poco de cuidado, de cualquier manera (y tal vez con algunas modificaciones adicionales para adecuarse a sus necesidades especficas), esta implementacin parcial podra ser un puente razonable al momento en que bind() sea ampliamente implementada acorde a a la especificacin.

Por favor checa https://github.com/Raynos/function-bind para ver una solucin ms profunda.

Especificaciones

Compatibilidad con navegadores

Ver tambin

• Function.prototype.apply()
• Function.prototype.call()
• Functions and function scope