Какая польза от JavaScript-метода bind?

Какое использование bind() в JavaScript?

ОТВЕТЫ

Ответ 1

Bind создает новую функцию, которая будет иметь this набор для первого параметра, переданного bind().

Вот пример, который показывает, как использовать bind передать метод члена, вокруг которого имеет правильное 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

Что печатает:

OK clicked
undefined clicked
OK clicked

Вы также можете добавить дополнительные параметры после 1-го (this) параметра, и bind передаст эти значения исходной функции. Любые дополнительные параметры, которые вы позже передадите связанной функции, будут переданы после связанных параметров:

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

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

Что печатает:

15

Ознакомьтесь со ссылкой на функцию JavaScript для получения дополнительной информации и интерактивных примеров.

Обновление: ECMAScript 2015 добавляет поддержку функций =>. => более компактны и не изменяют this указатель из их определяющей области, поэтому вам может не понадобиться использовать bind() так часто. Например, если вы хотите, чтобы функция на Button из первого примера подключала обратный вызов click к событию DOM, все это допустимые способы:

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

Или:

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

Или:

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

Ответ 2

Самое простое использование bind() - создать функцию, которая, независимо от того, как она вызывается, вызывается с определенным значением this.

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

Пожалуйста, обратитесь по этой ссылке для получения дополнительной информации

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

Ответ 3

bind allows-

  • установите значение "this" для определенного объекта. Это становится очень полезным, поскольку иногда это не то, что предназначено.
  • методы повторного использования
  • выполнить функцию

Например, у вас есть функция для вычета ежемесячных клубных сборов

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

Теперь вы хотите повторно использовать эту функцию для другого члена клуба. Обратите внимание, что ежемесячная плата будет варьироваться от участника к участнику.

Представьте себе, что у Рейчел есть баланс 500, а ежемесячный членский взнос - 90.

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

Теперь создайте функцию, которую можно использовать снова и снова, чтобы вычитать комиссионные с ее счета каждый месяц

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

Теперь же функция getMonthlyFee может использоваться для другого участника с другим членским взносом. Например, Росс Геллер имеет баланс 250 и ежемесячную плату в размере 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

Ответ 4

Из документов MDN в Function.prototype.bind():

Метод bind() создает новую функцию, которая при вызове имеет свою это ключевое слово установлено на предоставленное значение, с заданной последовательностью аргументы, предшествующие любому, предоставленному при вызове новой функции.

Итак, что это значит?!

Ну, возьмем функцию, которая выглядит так:

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

Теперь возьмем объект, который выглядит так:

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

Мы можем привязать нашу функцию к нашему объекту следующим образом:

Obj.log = logProp.bind(Obj);

Теперь мы можем запустить Obj.log в любом месте нашего кода:

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

Это работает, потому что мы привязали значение this к нашему объекту Obj.

Если это действительно интересно, это когда вы не только привязываете значение для this, но также и к его аргументу prop:

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

Теперь мы можем сделать это:

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

В отличие от Obj.log нам не нужно передавать x или y, потому что мы передали эти значения, когда сделали нашу привязку.

Ответ 5

Переменные имеют локальные и глобальные области применения. Предположим, у нас есть две переменные с одинаковым именем. Один определяется глобально, а другой определяется внутри замыкания функции, и мы хотим получить значение переменной, которое находится внутри замыкания функции. В этом случае мы используем этот метод bind(). Пожалуйста, смотрите простой пример ниже:

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();
<p id="demo1">0</p>
<p id="demo2">0</p>

Ответ 6

Резюме:

Метод bind() принимает объект в качестве первого аргумента и создает новую функцию. Когда функция вызывается, значение this в теле функции будет объектом, который был передан как аргумент в функции bind().

Как this работает в JS в любом случае

Значение this в javascript зависит всегда зависит от того, на какой объект вызывается функция. Значение этого всегда относится к объекту слева от точки, из которой вызывается функция. В случае глобальной видимости это window (или global в nodeJS). Только call, apply и bind могут изменить эту привязку по-разному. Вот пример, показывающий, как работает это ключевое слово:

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

Ответ 7

Я объясню теорему связывания теоретически, а также практически

bind в javascript - это метод - Function.prototype.bind. bind - это метод. Он называется прототипом функции. Этот метод создает функцию, тело которой аналогично функции, на которой она вызывается, но 'this' относится к первому параметру, переданному методу связывания. Его синтаксис

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

Пример: -

  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;

Ответ 8

Создание новой функции путем привязки аргументов к значениям

Метод bind создает новую функцию из другой функции с одним или несколькими аргументами, привязанными к определенным значениям, включая неявный аргумент this.

Частичное приложение

Это пример частичного приложения. Обычно мы предоставляем функцию со всеми ее аргументами, которая дает значение. Это называется функцией приложения. Мы применяем функцию к ее аргументам.

Функция более высокого порядка (HOF)

Частичное приложение является примером функции более высокого порядка (HOF), поскольку она дает новую функцию с меньшим количеством аргументов.

Связывание нескольких аргументов

Вы можете использовать bind для преобразования функций с несколькими аргументами в новые функции.

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

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

Ответ 9

Метод bind() создает новый экземпляр функции, значение которого привязано к значению, которое было передано в bind(). Например:

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

Здесь новая функция, называемая objectSayColor(), создается из sayColor(), вызывая bind() и проходящую в объекте o. Функция objectSayColor() имеет это значение, эквивалентное o, поэтому вызов функции, даже в качестве глобального вызова, приводит к отображению строки "синий".

Справка: Николай К. Закас - ПРОФЕССИОНАЛЬНЫЙ JAVASCRIPT® ДЛЯ ВЕБ-РАЗРАБОТЧИКОВ

Ответ 10

Как уже упоминалось, Function.bind() позволяет указать контекст, который будет выполнять функция (т.е. Позволяет передать объект, к которому this ключевое слово будет разрешено в теле функции.

Пара аналогичных методов API инструментария, которые выполняют аналогичную службу:

jQuery.proxy()

Dojo.hitch()

Ответ 11

/**
 * Bind is a method inherited from Function.prototype same like call and apply
 * It basically helps to bind a function to an object 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

Ответ 12

Функция bind создает новую функцию с тем же телом функции, что и вызываемая функция. Она вызывается с аргументом this. Почему мы используем привязку fun. : когда каждый раз создается новый экземпляр, и мы должны использовать первый начальный экземпляр, мы используем привязку fun. Мы не можем переопределить привязку fun. просто она хранит начальный объект класса.

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

Ответ 13

для начинающих Javascript с фоном OOP, как и я, я нашел, что это простое объяснение, чтобы понять,

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

Вы можете прыгать до 5:00, но я бы рекомендовал посмотреть его с самого начала.

Ответ 14

bind - это функция, которая доступна в прототипе Java-скрипта, поскольку имя предлагаемого bind используется для привязки вызова функции к контексту, в зависимости от того, что вы имеете в виду, например:

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