sirve - Uso del método ''bind'' de JavaScript

javascript bind this to function call

Question

¿Cuál es el uso de bind() en JavaScript?

Answer 1

Creando una nueva función vinculando argumentos a valores

El método de vinculación crea una nueva función a partir de otra función con uno o más argumentos vinculados a valores específicos, incluido el argumento implícito.

Solicitud parcial

Este es un ejemplo de aplicación parcial . Normalmente suministramos una función con todos sus argumentos que producen un valor. Esto se conoce como aplicación de función. Estamos aplicando la función a sus argumentos.

Una función de orden superior (HOF)

La aplicación parcial es un ejemplo de una función de orden superior (HOF) porque produce una nueva función con un número menor de argumentos.

Vincular múltiples argumentos

Puede usar el bind para transformar funciones con múltiples argumentos en nuevas funciones.

function multiply(x, y) { 
    return x * y; 
}

let multiplyBy10 = multiply.bind(null, 10);
console.log(multiplyBy10(5));

Conversión del método de instancia a función estática

En el caso de uso más común, cuando se llama con un argumento, el método de bind creará una nueva función que tiene this valor vinculado a un valor específico. En efecto, esto transforma un método de instancia en un método estático.

function Multiplier(factor) { 
    this.factor = factor;
}

Multiplier.prototype.multiply = function(x) { 
    return this.factor * x; 
}

function ApplyFunction(func, value) {
    return func(value);
}

var mul = new Multiplier(5);

// Produces garbage (NaN) because multiplying "undefined" by 10
console.log(ApplyFunction(mul.multiply, 10));

// Produces expected result: 50
console.log(ApplyFunction(mul.multiply.bind(mul), 10));

Implementando un CallBack con Estado

El siguiente ejemplo muestra cómo usar el enlace de this puede permitir que un método de objeto actúe como una devolución de llamada que puede actualizar fácilmente el estado de un objeto.

function ButtonPressedLogger()
{
   this.count = 0;
   this.onPressed = function() {
      this.count++;
      console.log("pressed a button " + this.count + " times");
   }
   for (let d of document.getElementsByTagName("button"))
      d.onclick = this.onPressed.bind(this);
}

new ButtonPressedLogger();      

<button>press me</button>
<button>no press me</button>

Answer 2

Resumen:

El método bind() toma un objeto como primer argumento y crea una nueva función. Cuando se invoca la función, el valor de this en el cuerpo de la función será el objeto que se pasó como un argumento en la función bind() .

¿Cómo funciona this en JS de todos modos

El valor de this en javascript depende siempre de a qué objeto se llama la función. El valor de esto siempre se refiere al objeto a la izquierda del punto desde donde se llama la función . En el caso del alcance global, esta es la window (o global en nodeJS ). Solo call , apply y bind puede alterar este enlace de manera diferente. Aquí hay un ejemplo para mostrar cómo funciona esta palabra clave:

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

¿Cómo se usa el enlace?

Bind puede ayudar a superar las dificultades con this palabra clave al tener un objeto fijo al que se referirá. Por ejemplo:

var name = ''globalName'';

const obj = {
  name: ''myName'',
  sayName: function () { console.log(this.name);}
}

const say = obj.sayName; // we are merely storing the function the value of this isn''t magically transferred

say(); // now because this function is executed in global scope this will refer to the global var

const boundSay = obj.sayName.bind(obj); // now the value of this is bound to the obj object

boundSay();  // Now this will refer to the name in the obj object: ''myName''

Una vez que la función está vinculada a un determinado valor, podemos pasarla e incluso ponerla en propiedades en otros objetos. El valor de this seguirá siendo el mismo.

Answer 3

Bind crea una nueva función que tendrá this conjunto en el primer parámetro pasado a bind() .

Aquí hay un ejemplo que muestra cómo usar bind para pasar un método miembro alrededor que tiene el correcto this :

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 se imprime:

OK clicked
undefined clicked
OK clicked

También puede agregar parámetros adicionales después del primer parámetro ( this ) y el bind pasará esos valores a la función original. Cualquier parámetro adicional que luego pase a la función enlazada se pasará después de los parámetros enlazados:

// Example showing binding some parameters
var sum = function(a, b) {
  return a + b;
};

var add5 = sum.bind(null, 5);
console.log(add5(10));

Que se imprime:

15

Echa un vistazo a la función JavaScript para obtener más información y ejemplos interactivos.

Actualización: ECMAScript 2015 agrega soporte para las funciones => . => funciones son más compactas y no cambian this puntero de su ámbito de definición, por lo que es posible que no necesite usar bind() tanta frecuencia. Por ejemplo, si deseaba que una función en el Button del primer ejemplo conectara la devolución de llamada de click a un evento DOM, las siguientes son formas válidas de hacerlo:

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

O:

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() });
}

O:

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

Answer 4

Como se mencionó, Function.bind() permite especificar el contexto en el que se ejecutará la función (es decir, le permite pasar a qué objeto se resolverá this palabra clave en el cuerpo de la función).

Un par de métodos análogos de la API del kit de herramientas que realizan un servicio similar:

jQuery.proxy()

Dojo.hitch()

Answer 5

De https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind en Function.prototype.bind() :

El método bind () crea una nueva función que, cuando se le llama, tiene su palabra clave configurada en el valor provisto, con una secuencia dada de argumentos que preceden a todos los proporcionados cuando se llama a la nueva función.

¡¿Entonces que significa eso?!

Bueno, vamos a tomar una función que se parece a esto:

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

Ahora, tomemos un objeto que se ve así:

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

Podemos unir nuestra función a nuestro objeto de esta manera:

Obj.log = logProp.bind(Obj);

Ahora, podemos ejecutar Obj.log en cualquier lugar de nuestro código:

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

Esto funciona, porque vinculamos el valor de this a nuestro objeto Obj .

Donde realmente se pone interesante, es cuando no solo unes un valor para this , sino también por su argumento prop :

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

Ahora podemos hacer esto:

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

A diferencia de Obj.log , no tenemos que pasar x o y , porque pasamos esos valores cuando hicimos nuestro enlace.

Answer 6

El método bind () crea una nueva instancia de función cuyo valor está vinculado al valor que se pasó a bind (). Por ejemplo:

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

Aquí, una nueva función llamada objectSayColor () se crea a partir de sayColor () llamando a bind () y pasando el objeto o. La función objectSayColor () tiene un valor equivalente a o, por lo que llamar a la función, incluso como una llamada global, hace que se muestre la cadena "azul".

Referencia: Nicholas C. Zakas - JAVASCRIPT® PROFESIONAL PARA DESARROLLADORES WEB

Answer 7

El uso más simple de bind() es hacer una función que, sin importar cómo se llame, se llame con un valor particular.

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

Consulte este enlace para más información.

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

Answer 8

Explicaré teóricamente así como prácticamente el enlace.

bind en javascript es un método - Function.prototype.bind. enlazar es un método. Se llama en función prototipo. Este método crea una función cuyo cuerpo es similar a la función en la que se llama, pero ''this'' se refiere al primer parámetro pasado al método de enlace. Su sintaxis es

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

Ejemplo:--

  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;

Answer 9

La función de vinculación crea una nueva función con el mismo cuerpo de función que la función a la que llama. Se llama con este argumento .por qué usamos la diversión de vinculación. : cuando cada vez que se crea una nueva instancia y tenemos que usar la primera instancia inicial, usamos bind fun. No podemos anular el enlace fun.simply almacena el objeto inicial de la clase.

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

Answer 10

Las variables tienen ámbitos locales y globales, supongamos que si tenemos dos variables con el mismo nombre, una se define globalmente y la otra se define dentro del cierre de una función y queremos llamar a ese valor variable que está dentro del cierre de la función, entonces usamos este Método de enlace. Por favor, vea el ejemplo simple a continuación:

   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(); 

<!DOCTYPE html>
<html>
<body>
<p id="demo1">0</p>
<p id="demo2">0</p>
</body>
</html>

Answer 11

bind es una función que está disponible en el prototipo de script java, ya que su nombre sugiere bind se usa para enlazar su llamada de función al contexto con el que esté tratando, por ejemplo:

    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%'' 

Answer 12

para los principiantes de Javascript con un fondo OOP como yo, encontré que esta es la explicación más fácil de entender,

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

Puedes saltar a las 5:00 pero te recomiendo verlo desde el principio.

Answer 13

bind permite

• establezca el valor de "esto" en un objeto específico. Esto se vuelve muy útil ya que a veces this no es lo que se pretende.
• métodos de reutilización
• una función de curry

Por ejemplo, tiene una función para deducir las cuotas mensuales del club

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

Ahora desea reutilizar esta función para un miembro del club diferente. Tenga en cuenta que la cuota mensual variará de un miembro a otro.

Imaginemos que Rachel tiene un saldo de 500 y una cuota mensual de membresía de 90.

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

Ahora, cree una función que se pueda usar una y otra vez para deducir la tarifa de su cuenta cada mes

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

Ahora, la misma función getMonthlyFee podría usarse para otro miembro con una tarifa de membresía diferente. Por ejemplo, Ross Geller tiene un saldo de 250 y una tarifa mensual 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

Answer 14

/**
 * 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