O métodobind() cria uma nova função que, quando chamada, tem sua palavra-chavethis definida com o valor fornecido, com uma sequência determinada de argumentos precedendo quaisquer outros que sejam fornecidos quando a nova função é chamada.

Experimente

const module = {  x: 42,  getX: function () {    return this.x;  },};const unboundGetX = module.getX;console.log(unboundGetX()); // The function gets invoked at the global scope// Expected output: undefinedconst boundGetX = unboundGetX.bind(module);console.log(boundGetX());// Expected output: 42

Sintaxe

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

Parâmetros

thisArg

O valor a ser passado como parâmetrothis para a função de destino quando a função vinculada é chamada. O valor é ignorado se a função ligada é construída usando o operadornew.

arg1, arg2, ...

Argumentos que precedem outros argumentos fornecidos para a função vinculada ao invocar a função de destino.

Valor de retorno

Uma cópia da função fornecida com o valorthis especificado e argumentos iniciais.

Descrição

A funçãobind() cria uma novafunção vinculada (bound function). Uma função vinculada é umobjeto de função exótico (termo daECMAScript 2015) que encapsula o objeto de função original. Chamar uma função vinculada geralmente resulta na execução de suafunção encapsulada.

Uma função vinculada tem as seguintes propriedades internas:

• [[BoundTargetFunction]] - o objeto de função encapsulado;
• [[BoundThis]] - o valor que sempre é passado comothis quando se chama a função encapsulada;
• [[BoundArguments]] - uma lista de valores cujos elementos são usados como os primeiros argumentos para qualquer chamada da função encapsulada;
• [[Call]] - executa código associado com este objeto. Invocado através de uma expressão de chamada de função. Os argumentos para o método interno são um valorthis e uma lista contendo os argumentos passados para a função por uma expressão de chamada.

Quando a função vinculada é chamada, ela chama seu método interno[[Call]] na[[BoundTargetFunction]], na formaCall(boundThis, args), ondeboundThis é[[BoundThis]] eargs é[[BoundArguments]] seguido pelos argumentos passados pela chamada de função.

Uma função vinculada também pode ser construída usando-se o operadornew; ao fazê-lo, o resultado é o mesmo que seria se a função alvo tivesse sido construída. O valor dethis fornecido é ignorado, porém os argumentos precedentes são fornecidos à função emulada.

Exemplos

Criando uma função vinculada

O uso mais simples debind() é fazer com que uma função que, independentemente da chamada, é chamada com um determinado valorthis. Um erro comum para programadores JavaScript novatos é extrair um método de um objeto e, em seguida, chamar essa função e esperar que ele use o objeto original como o seuthis (por exemplo, usando esse método num código baseado emcallback). Sem a devida atenção, no entanto, o objeto original é normalmente perdido. Criar uma função vinculada a partir da função, usando o objeto original, resolve perfeitamente esse problema:

this.x = 9; //this aqui se refere ao objeto global "window" do navegadorvar module = {  x: 81,  getX: function () {    return this.x;  },};module.getX(); // 81var retrieveX = module.getX;retrieveX();// retorna 9 - a função foi invocada no escopo global// Criando uma nova função com 'this' vinculada ao módulo// Programadores novatos podem confundir a variável x// global com a propriedade x do módulovar boundGetX = retrieveX.bind(module);boundGetX(); // 81

Funções parcialmente aplicadas

O próximo uso mais simples debind() é criar uma função com argumentos iniciais pré-especificados. Esses argumentos (caso existam) acompanham o valorthis fornecido e então são inseridos no início dos argumentos passados para a função alvo, seguidos pelos argumentos passados para a função vinculada, sempre que a função vinculada é chamada.

function list() {  return Array.prototype.slice.call(arguments);}var list1 = list(1, 2, 3); // [1, 2, 3]// Cria uma função com um argumento principal predefinidovar leadingThirtysevenList = list.bind(null, 37);var list2 = leadingThirtysevenList();// [37]var list3 = leadingThirtysevenList(1, 2, 3);// [37, 1, 2, 3]

ComsetTimeout

Por padrão, dentro dewindow.setTimeout() a palavra-chavethis vai ser definida com o objetowindow (ou com o objetoglobal). Ao trabalhar com métodos de classes que requerem quethis se refira à instâncias de classes, você pode vincularthis explicitamente à função decallback, de modo a manter a instância.

function LateBloomer() {  this.petalCount = Math.ceil(Math.random() * 12) + 1;}// Declarar bloom depois de um intervalo de 1 segundoLateBloomer.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!");};var flower = new LateBloomer();flower.bloom();// depois de 1 segundo, ativa o método 'declare'

Funções vinculadas usadas como construtores

Funções vinculadas são automaticamente adequadas para uso com o operadornew para construir novas instâncias criadas pela função alvo. Quando uma função vinculada é usada para construir um valor, othis fornecido é ignorado. Porém, argumentos fornecidos ainda são prefixados à chamada do construtor:

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'// não suportado no polyfill abaixo,// funciona bem com o bind nativo:var YAxisPoint = Point.bind(null, 0 /*x*/);var emptyObj = {};var YAxisPoint = Point.bind(emptyObj, 0 /*x*/);var axisPoint = new YAxisPoint(5);axisPoint.toString(); // '0,5'axisPoint instanceof Point; // trueaxisPoint instanceof YAxisPoint; // truenew Point(17, 42) instanceof YAxisPoint; // true

Note que você não precisa fazer nada de especial para criar uma função vinculada para usar comnew. O corolário é que você não precisa fazer nada de especial para criar uma função vinculada que será chamada de forma clara, mesmo que você preferisse que a função vinculada fosse somente chamada usando-senew.

// Exemplo pode ser executado diretamente no seu console JavaScript// ...continuando o exemplo acima// Ainda pode ser chamada como uma função normal// (apesar de que isso geralmente não é desejado)YAxisPoint(13);emptyObj.x + "," + emptyObj.y;// >  '0,13'

Se você quer suportar o uso de uma função vinculada somente através denew, ou somente a chamando, a função alvo deve impor essa restrição.

Criando atalhos

bind() itambém é útil em casos onde você quer criar um atalho para uma função que requer um valor específico dethis.

Tome por exemploArray.prototype.slice, que você quer usar para converter um objetoarray-like em um vetor verdadeiro. Você poderia criar um atalho assim:

var slice = Array.prototype.slice;// ...slice.apply(arguments);

Combind(), isso pode ser simplificado. No seguinte trecho de código,slice é uma função vinculada à funçãoapply() deFunction.prototype, com o valorthis definido com a funçãoslice() deArray.prototype. Isso significa que chamadas adicionais deapply() podem ser eliminadas:

// mesmo que "slice" no exemplo anteriorvar unboundSlice = Array.prototype.slice;var slice = Function.prototype.apply.bind(unboundSlice);// ...slice(arguments);

Polyfill

A funçãobind é uma adição à ECMA-262, 5ª. edição; como tal, pode não estar presente em todos os navegadores. Você pode contornar isso parcialmente inserindo o seguinte código no começo de seusscripts, permitindo o uso de muita parte da funcionalidade debind() em implementações que não a suportam nativamente.

if (!Function.prototype.bind) {  Function.prototype.bind = function (oThis) {    if (typeof this !== "function") {      // mais próximo possível da função interna      // IsCallable da ECMAScript 5      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 ? this : oThis,          aArgs.concat(Array.prototype.slice.call(arguments)),        );      };    fNOP.prototype = this.prototype;    fBound.prototype = new fNOP();    return fBound;  };}

Algumas das muitas diferenças (é bem possível que haja outras, já que esta lista não pretende seriamente ser completa) entre este algoritmo e o algoritmo especificado são:

• Esta implementação parcial depende dos métodos internosArray.prototype.slice(),Array.prototype.concat(),Function.prototype.call() eFunction.prototype.apply() possuírem seus valores originais.
• Esta implementação parcial cria funções que não tem umcaller imutável como "mecanismo de defesa" e propriedadesarguments que lançam umTypeError ao usarget,set, ou ao deletar. (Isto pode ser adicionado se a implementação suportaObject.defineProperty, ou parcialmente implementado sem um comportamentothrow-on-delete se a implementação suporta as extensõesObject.prototype.__defineGetter__() eObject.prototype.__defineSetter__())
• Esta implementação parcial cria funções que tem uma propriedadeprototype. (Funções vinculadas apropriadas não a tem.)
• Esta implementação parcial cria funções vinculadas cuja propriedadelength não cumpre com a regra da ECMA-262: cria funções com comprimento zero, quando uma implementação completa, dependendo do comprimento da função alvo e do número de argumentos pre-especificados, pode retornar um comprimento não-nulo.

Se você escolher utilizar esta implementação parcial,você não deve confiar em casos onde o comportamento é diferente da ECMA-262, 5ª. edição! Porém, com algum cuidado (e talvez com modificação adicional para atender necessidades específicas), esta implementação parcial pode ser uma ponte razoável para quandobind() for amplamente implementada de acordo com a especificação.

Especificações

Compatibilidade com navegadores

Veja também

• Function.prototype.apply()
• Function.prototype.call()
• Functions