JavaScriptの 'bind'メソッドの使用

Question

JavaScriptでのbind()の使用は何ですか？

Answer 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

1st（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関数bind をチェックしてください。

更新：ECMAScript 2015では=>関数のサポートが追加されました。 =>関数はよりコンパクトで、thisポインタを定義範囲から変更しないので、bind()を頻繁に使用する必要はないかもしれません。たとえば、最初の例のButtonに対する関数でDOMイベントへのclickコールバックを接続するには、次のようにします。

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

Answer 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

Answer 3

バインド 許可 -

• "this"の値を特定のオブジェクトに設定します。時々 this が意図したものではないので、これはとても役に立ちます。
• メソッドを再利用する
• 関数をカレーする

たとえば、毎月のクラブ料金を差し引く機能があります。

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

では、この機能を別のクラブ会員に再利用したいと思います。毎月の会費は会員によって異なりますのでご注意ください。

Rachelの残高が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関数を、異なる会費を持つ他のメンバーに使用できます。たとえば、Ross Gellerの残高は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

Answer 4

からFunction.prototype.bind()のMDNドキュメント ：

bind（） メソッドは、呼び出されたときにthisキーワードが指定された値に設定された新しい関数を作成します。新しい関数が呼び出されたときに指定された引数の前には一連の引数が続きます。

だから、それはどういう意味ですか？

それでは、このような関数を見てみましょう。

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を渡す必要はありません。

Answer 5

バインドについて理論的にも実際的にも説明します

javaScriptでバインドはメソッドです - Function.prototype.bind。 bindはメソッドです。関数プロトタイプ上で呼び出されます。このメソッドは、本体が呼び出される関数と本体が似ている関数を作成しますが、「this」はbindメソッドに渡される最初のパラメータを表します。その構文は

     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;

Answer 6

変数には、ローカルスコープとグローバルスコープがあります。同じ名前の2つの変数があるとしましょう。 1つはグローバルに定義され、もう1つは関数クロージャの中で定義されており、関数クロージャの中にある変数値を取得したいのです。その場合は、この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(); 

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

Answer 7

概要：

bind()メソッドは、オブジェクトを最初の引数として受け取り、新しい関数を作成します。関数が呼び出されると、関数本体のthisの値は、bind()関数の引数として渡されたオブジェクトになります。

とにかくJSでthisはどのように機能するのか

Javascriptのthisの値は常に、関数が呼び出されるオブジェクトによって異なります。 この値は常に、ドットの左側にあるオブジェクトを参照します。ここから、関数は と呼ばれます。グローバルスコープの場合、これはwindow（またはglobal内のnodeJS）です。 call、apply、およびbindのみがこのバインディングを異なる方法で変更できます。 thisキーワードがどのように機能するのかを示す例を示します。

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

バインドはどのように使用されますか？

thisが参照する場所に固定オブジェクトを用意することで、バインドはthisキーワードの問題を解決するのに役立ちます。例えば：

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'

関数が特定のthis値にバインドされると、それを渡して他のオブジェクトのプロパティにも渡すことができます。 thisの値は変わりません。

Answer 8

Bind（）メソッドは、この値がbind（）に渡された値にバインドされている新しい関数インスタンスを作成します。例えば：

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

ここでは、bind（）を呼び出してオブジェクトoを渡すことによって、sayColor（）からobjectSayColor（）という新しい関数が作成されます。 objectSayColor（）関数は、oと同等のthis値を持っているので、グローバル呼び出しとしてでも、この関数を呼び出すと、ストリング「blue」が表示されます。

リファレンス：Nicholas C. Zakas - WEB開発者のためのプロフェッショナルJAVASCRIPT®

Answer 9

引数を値にバインドして新しい関数を作成する

bindメソッドは、暗黙のthis引数を含む、1つ以上の引数が特定の値にバインドされた別の関数から新しい関数を作成します。

部分的なアプリケーション

これは 部分適用 の例です。通常、値を生成するすべての引数を持つ関数を提供します。これは機能適用として知られています。引数に関数を適用しています。

高階関数（HOF）

部分アプリケーションは、引数の数が少ない新しい関数を生成するので、 高次関数 （HOF）の例です。

複数の引数をバインドする

bindを使用すると、複数の引数を持つ関数を新しい関数に変換できます。

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

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

インスタンスメソッドから静的関数への変換

最も一般的なユースケースでは、1つの引数で呼び出されると、bindメソッドは特定の値にバインドされたthis値を持つ新しい関数を作成します。実際には、これはインスタンスメソッドを静的メソッドに変換します。

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

ステートフルコールバックの実装

次の例は、thisのバインディングを使用すると、オブジェクトメソッドを、オブジェクトの状態を簡単に更新できるコールバックとして機能させる方法を示します。

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 10

前述のように、Function.bind()を使用すると、関数が実行されるコンテキストを指定できます（つまり、thisキーワードによって解決されるオブジェクトを関数の本体に渡すことができます）。

同様のサービスを実行する類似のツールキットAPIメソッドのカップル。

jQuery.proxy（）

Dojo.hitch（）

Answer 11

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

Answer 12

Bind関数は、それが呼び出している関数と同じ関数本体を持つ新しい関数を作成します。これはthis引数を付けて呼び出されます。 ：新しいインスタンスが作成されて最初の初期インスタンスを使わなければならないときはいつでもbind funを使います。bind fun.simplyをオーバーライドすることはできません。それはクラスの初期オブジェクトを格納します。

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