JavaScript的“绑定”方法有什么用?

JavaScript

LEY神无

2020-03-11

bind()在JavaScript中有什么

第817篇《JavaScript的“绑定”方法有什么用?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

6个回答
猿路易 2020.03.11

Another usage is that you can pass binded function as an argument to another function which is operating under another execution context.

var name = "sample";
function sample(){
  console.log(this.name);
}
var cb = sample.bind(this);

function somefunction(cb){
  //other code
  cb();
}
somefunction.call({}, cb);
神乐猿 2020.03.11

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()函数的this值等于o,因此调用该函数(即使是全局调用)也将导致显示字符串“ blue”。

参考:Nicholas C. Zakas-Web开发人员的专业JAVASCRIPT®

凯飞云 2020.03.11

如前所述,Function.bind()让您指定函数将在其中执行的上下文(即,它使您可以将this关键字将解析到的对象传递给函数主体。

两种类似的工具包API方法,它们执行类似的服务:

jQuery.proxy()

Dojo.hitch()

ProGO 2020.03.11

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

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

部分申请

这是部分应用的示例通常我们提供一个带有所有参数的函数,该函数产生一个值。这就是所谓的功能应用程序。我们正在将该函数应用于其参数。

高阶函数(HOF)

部分应用程序是高阶函数(HOF)的一个示例,因为它产生的新函数具有较少的参数。

绑定多个参数

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

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

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

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

在最常见的用例中,当使用一个参数调用该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>

樱理查德 2020.03.11

我将在理论上和实践上解释绑定

javascript中的bind是一种方法-Function.prototype.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;
伽罗GreenNear 2020.03.11

变量具有局部和全局范围。假设我们有两个具有相同名称的变量。一个是全局定义的,另一个是在函数闭包内部定义的,我们要获取函数闭包内部的变量值。在这种情况下,我们使用此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>

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android