Uso do método JavaScript ‘bind’

Qual é o uso de bind() em JavaScript?

Bind cria uma nova function que terá this conjunto para o primeiro parâmetro passado para bind() .

Aqui está um exemplo que mostra como usar o bind para passar um método de membro em volta que tenha o correto:

 var Button = function(content) { this.content = content; }; Button.prototype.click = function() { console.log(this.content + ' clicked'); }; var myButton = new Button('OK'); myButton.click(); var looseClick = myButton.click; looseClick(); // not bound, 'this' is not myButton - it is the global object var boundClick = myButton.click.bind(myButton); boundClick(); // bound, 'this' is myButton 

Que imprime:

 OK clicked undefined clicked OK clicked 

Você também pode adicionar parâmetros extras após o primeiro parâmetro (1st) e o bind irá passar esses valores para a function original. Quaisquer parâmetros adicionais que você passar posteriormente para a function ligada serão passados ​​após os parâmetros associados:

 // Example showing binding some parameters var sum = function(a, b) { return a + b; }; var add5 = sum.bind(null, 5); console.log(add5(10)); 

Que imprime:

 15 

Confira o JavaScript Function bind para mais informações e exemplos interativos.

Atualização: ECMAScript 2015 adiciona suporte para funções => . => funções são mais compactas e não alteram o ponteiro do escopo de definição, portanto, você pode não precisar usar bind() com tanta freqüência. Por exemplo, se você quisesse uma function no Button do primeiro exemplo para conectar o retorno de chamada de click a um evento DOM, a seguir estão todas as formas válidas de fazer isso:

 Button.prototype.hookEvent(element) { // Use bind() to ensure 'this' is the 'this' inside click() element.addEventListener('click', this.click.bind(this)); }; 

Ou:

 Button.prototype.hookEvent(element) { // Use a new variable for 'this' since 'this' inside the function // will not be the 'this' inside hookEvent() var me = this; element.addEventListener('click', function() { me.click() }); } 

Ou:

 Button.prototype.hookEvent(element) { // => functions do not change 'this', so you can use it directly element.addEventListener('click', () => this.click()); } 

bind-

  • defina o valor de “this” para um object específico. Isso se torna muito útil, pois às vezes isso não é o que se pretende.
  • methods de reutilização
  • curry uma function

Por exemplo, você tem uma function para deduzir as taxas mensais do clube

 function getMonthlyFee(fee){ var remaining = this.total - fee; this.total = remaining; return this.name +' remaining balance:'+remaining; } 

Agora você deseja reutilizar essa function para um membro do clube diferente. Note que a taxa mensal irá variar de membro para membro.

Vamos imaginar que Rachel tenha um saldo de 500 e uma taxa de adesão mensal de 90.

 var rachel = {name:'Rachel Green', total:500}; 

Agora, crie uma function que possa ser usada novamente para deduzir a taxa da conta dela todos os meses

 //bind var getRachelFee = getMonthlyFee.bind(rachel, 90); //deduct getRachelFee();//Rachel Green remaining balance:410 getRachelFee();//Rachel Green remaining balance:320 

Agora, a mesma function getMonthlyFee pode ser usada para outro membro com uma taxa de associação diferente. Por exemplo, Ross Geller tem um saldo de 250 e uma taxa mensal de 25

 var ross = {name:'Ross Geller', total:250}; //bind var getRossFee = getMonthlyFee.bind(ross, 25); //deduct getRossFee(); //Ross Geller remaining balance:225 getRossFee(); //Ross Geller remaining balance:200 

O uso mais simples de bind () é fazer uma function que, não importa como seja chamada, é chamada com um determinado valor.

 x = 9; var module = { x: 81, getX: function () { return this.x; } }; module.getX(); // 81 var getX = module.getX; getX(); // 9, because in this case, "this" refers to the global object // create a new function with 'this' bound to module var boundGetX = getX.bind(module); boundGetX(); // 81 

Por favor, consulte este link para mais informações

https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Dos documentos do MDN em Function.prototype.bind() :

O método bind () cria uma nova function que, quando chamada, tem sua palavra-chave this definida como o valor fornecido, com uma determinada sequência de argumentos precedendo qualquer fornecida quando a nova function é chamada.

Então, o que isso significa?!

Bem, vamos pegar uma function que se parece com isso:

 var logProp = function(prop) { console.log(this[prop]); }; 

Agora, vamos pegar um object assim:

 var Obj = { x : 5, y : 10 }; 

Podemos vincular nossa function ao nosso object assim:

 Obj.log = logProp.bind(Obj); 

Agora, podemos executar o Obj.log em qualquer lugar do nosso código:

 Obj.log('x'); // Output : 5 Obj.log('y'); // Output : 10 

Isso funciona, porque ligamos o valor this ao nosso object Obj .


Onde realmente fica interessante, é quando você não apenas vincula um valor para this , mas também para seu argumento prop :

 Obj.logX = logProp.bind(Obj, 'x'); Obj.logY = logProp.bind(Obj, 'y'); 

Agora podemos fazer isso:

 Obj.logX(); // Output : 5 Obj.logY(); // Output : 10 

Ao contrário do Obj.log , não precisamos passar x ou y , porque passamos esses valores quando fizemos a binding.

Vou explicar ligamento teoricamente, bem como praticamente

bind em javascript é um método – Function.prototype.bind. bind é um método. É chamado em protótipo de function. Esse método cria uma function cujo corpo é semelhante à function na qual ele é chamado, mas o ‘this’ refere-se ao primeiro parâmetro passado para o método bind. Sua syntax é

  var bindedFunc = Func.bind(thisObj,optionsArg1,optionalArg2,optionalArg3,...); 

Exemplo:–

  var checkRange = function(value){ if(typeof value !== "number"){ return false; } else { return value >= this.minimum && value <= this.maximum; } } var range = {minimum:10,maximum:20}; var boundedFunc = checkRange.bind(range); //bounded Function. this refers to range var result = boundedFunc(15); //passing value console.log(result) // will give true; 

O método bind () cria uma nova instância de function cujo valor é ligado ao valor que foi passado para bind (). Por exemplo:

  window.color = "red"; var o = { color: "blue" }; function sayColor(){ alert(this.color); } var objectSayColor = sayColor.bind(o); objectSayColor(); //blue 

Aqui, uma nova function chamada objectSayColor () é criada a partir de sayColor () chamando bind () e passando o object o. A function objectSayColor () tem este valor equivalente a o, então chamar a function, mesmo como uma chamada global, resulta na string “azul” sendo exibida.

Referência: Nicholas C. Zakas – PROFISSIONAL JAVASCRIPT® PARA DESENVOLVEDORES WEB

Criando uma nova function ao vincular argumentos a valores

O método bind cria uma nova function a partir de outra function com um ou mais argumentos ligados a valores específicos, incluindo o implícito this argumento.

Aplicação Parcial

Este é um exemplo de aplicação parcial . Normalmente nós fornecemos uma function com todos os seus argumentos, o que produz um valor. Isso é conhecido como aplicativo de function. Estamos aplicando a function aos seus argumentos.

Uma function de ordem superior (HOF)

A aplicação parcial é um exemplo de uma function de ordem superior (HOF) porque gera uma nova function com um número menor de argumentos.

Encadeando vários argumentos

Você pode usar bind para transformar funções com vários argumentos em novas funções.

 function multiply(x, y) { return x * y; } let multiplyBy10 = multiply.bind(null, 10); console.log(multiplyBy10(5)); 

Variáveis ​​tem escopos locais e globais, suponha que se temos duas variables ​​com o mesmo nome, uma é definida globalmente e outra é definida dentro de um fechamento de function e queremos chamar esse valor de variável que está dentro do fechamento da function, então usamos este método bind. Por favor, veja o exemplo simples abaixo:

  var x = 9; // this refers to global "window" object here in the browser var person = { x: 81, getX: function() { return this.x; } }; var y = person.getX; // It will return 9, because it will call global value of x(var x=9). var x2 = y.bind(person); // It will return 81, because it will call local value of x, which is defined in the object called person(x=81). document.getElementById("demo1").innerHTML = y(); document.getElementById("demo2").innerHTML = x2(); 
    

0

0

Como mencionado, Function.bind() permite que você especifique o contexto no qual a function será executada (isto é, permite que você passe a qual object a palavra this chave this resolverá no corpo da function).

Um par de methods de API de kit de ferramentas análogos que executam um serviço semelhante:

jQuery.proxy ()

Dojo.hitch ()

 /** * Bind is a method inherited from Function.prototype same like call and apply * It basically helps to bind a function to an object's context during initialisation * * */ window.myname = "Jineesh"; var foo = function(){ return this.myname; }; //IE < 8 has issues with this, supported in ecmascript 5 var obj = { myname : "John", fn:foo.bind(window)// binds to window object }; console.log( obj.fn() ); // Returns Jineesh 

A function de binding cria uma nova function com o mesmo corpo de function que a function que está chamando. É chamada com o argumento this .why nós usamos bind fun. : quando toda vez que uma nova instância é criada e temos que usar a primeira instância inicial, usamos o bind fun. Não podemos sobrescrever o bind bind.simplesmente ele armazena o object inicial da class.

setInterval (this.animate_to.bind (this), 1000 / this.difference);

para iniciantes em Javascript com fundo OOP como eu, eu achei que essa é a explicação mais fácil de entender,

https://www.youtube.com/watch?v=GhbhD1HR5vk

Você pode pular para 5:00, mas eu recomendo vê-lo desde o começo.

bind é uma function que está disponível no protótipo de script java, como o nome sugere bind é usado para vincular sua chamada de function ao contexto com o qual você está lidando, por exemplo:

  var rateOfInterest='4%'; var axisBank= { rateOfInterest:'10%', getRateOfInterest:function() { return this.rateOfInterest; } } axisBank.getRateOfInterest() //'10%' let knowAxisBankInterest=axisBank.getRateOfInterest // when you want to assign the function call to a varaible we use this syntax knowAxisBankInterest(); // you will get output as '4%' here by default the function is called wrt global context let knowExactAxisBankInterest=knowAxisBankInterest.bind(axisBank); //so here we need bind function call to its local context knowExactAxisBankInterest() // '10%' 

Resumo:

O método bind() pega um object como primeiro argumento e cria uma nova function. Quando a function é chamada, o valor this no corpo da function será o object que foi passado como um argumento na function bind() .

Como this funciona no JS?

O valor this em javascript é dependente sempre depende de qual object a function é chamada. O valor disso sempre se refere ao object à esquerda do ponto de onde a function é chamada . No caso do escopo global, isso é window (ou global no nodeJS ). Apenas call , apply e bind pode alterar a vinculação de forma diferente. Aqui está um exemplo para mostrar como a palavra-chave this funciona:

 let obj = { prop1: 1, func: function () { console.log(this); } } obj.func(); // obj left of the dot so this refers to obj const customFunc = obj.func; // we store the function in the customFunc obj customFunc(); // now the object left of the dot is window, // customFunc() is shorthand for window.customFunc() // Therefore window will be logged