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

我将从理论上和实践上解释bind

javascript中的bind是一种方法--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;

bind（）的最简单用法是生成一个函数，无论它是如何被调用的。

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

有关详细信息，请参阅MDN Web Docs上的此链接：

函数.product.bind（）

通过将参数绑定到值来创建新函数

bind方法从另一个函数创建一个新函数，其中一个或多个参数绑定到特定值，包括隐式this参数。

局部应用

这是部分应用的示例。通常，我们提供一个函数及其所有参数，这些参数会产生一个值。这就是所谓的函数应用程序。我们正在将函数应用于其参数。

高阶函数（HOF）

部分应用程序是高阶函数（HOF）的一个例子，因为它生成了一个新函数，但参数数量较少。

绑定多个参数

可以使用bind将具有多个参数的函数转换为新函数。

函数乘法（x，y）{返回x*y；}让multiplyBy10=multiply.bind（null，10）；控制台日志（multiplyBy10（5））；

从实例方法转换为静态函数

在最常见的用例中，当使用一个参数调用时，bind方法将创建一个新函数，该函数将此值绑定到特定值。实际上，这将实例方法转换为静态方法。

函数乘数（因子）｛this.factor=系数；}Multiplier.prototype.multiply=函数（x）｛返回this.factor*x；}函数ApplyFunction（func，value）{返回func（值）；}var mul=新乘数（5）；//生成垃圾（NaN），因为将“undefined”乘以10console.log（ApplyFunction（多个，10））；//产生预期结果：50console.log（ApplyFunction（多乘绑定（多），10））；

实现有状态回调

以下示例显示了如何使用this的绑定使对象方法充当回调，从而可以轻松更新对象的状态。

函数ButtonPressedLogger（）{此计数=0；this.onPressed=函数（）{这个.计数++；console.log（“按下按钮”+this.count+“次数”）；}for（let d of document.getElementsByTagName（“button”））d.onclick=this.onPressed.bind（this）；}new ButtonPressedLogger（）；<button>按我</button><button>不按我</button>

我没有读过上面的代码，但我学到了一些简单的东西，所以我想在这里分享一下bind方法，我们可以将它用作任何普通方法。

<pre> note: do not use arrow function it will show error undefined  </pre>

让solarSystem={太阳：“红色”，moon：“白色”，sunmoon:函数（）{let dayNight=this.sun+'是太阳的颜色，在白天呈现，'+this.moon+'是月亮的颜色，晚上呈现'；返回日夜间；}}让工作=功能（工作，睡眠）{console.log（this.sunmoon（））；//访问solatSystem直到现在都显示错误undefine suncommon，因为我们无法直接访问我们使用的.bind（）console.log（'我在'+work+'中工作，在'+sleep中睡眠）；}let outPut=work.bind（solarSystem）；outPut（“日”，“夜”）

bind（）方法创建一个新函数，当调用该函数时，将其this关键字设置为所提供的值，并在调用新函数时提供的任何参数之前设置一个给定的参数序列。

第一部分的示例

使用St8从反应包中抓取

import { useState } from "react"

function st8() {
    switch(arguments.length) {
        case 0: return this[0]
        case 1: return void this[1](arguments[0])
        default: throw new Error("Expected 0 or 1 arguments")
    }
}


function useSt8(initial) {
    // this in st8 will be something like [state, setSatate]
    return st8.bind(useState(initial))
}

// usage
function Counter() {
  const count = useSt8(0);
  return (
    <>
      Count: {count()}
      <button onClick={() => count(0)}>Reset</button>
      <button onClick={() => count(prevCount => prevCount + 1)}>inc</button>
    </>
  );
}

第二部分的示例

const add = (a, b) => a+b

someThis = this
// new function with this value equal to someThis
add5 = add.bind(someThis, 5) 
add5(10) // 15

// we don't use this in add decelartion so this will work too.
add10 = add.bind(null, 10) 
add10(5) // 15