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

2020/09/22 17:21 · javascript ·  · 0评论

bind()在JavaScript中有什么

Bind创建一个新函数,this该函数将强制该函数内部成为传递给的参数bind()

这是一个示例,显示了如何使用bind传递具有正确方法的成员方法this

var myButton = {
  content: 'OK',
  click() {
    console.log(this.content + ' clicked');
  }
};

myButton.click();

var looseClick = myButton.click;
looseClick(); // not bound, 'this' is not myButton - it is the globalThis

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 Function绑定以获取更多信息和交互式示例。

更新:ECMAScript 2015添加了对=>功能的支持=>函数更紧凑,并且不会this从其定义范围更改指针,因此您可能不需要bind()经常使用例如,如果您希望Button第一个示例中的函数能够将click回调连接到DOM事件,则以下是实现此目的的所有有效方法:

var myButton = {
  ... // As above
  hookEvent(element) {
    // Use bind() to ensure 'this' is the 'this' inside click()
    element.addEventListener('click', this.click.bind(this));
  }
};

要么:

var myButton = {
  ... // As above
  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() });
  }
};    

要么:

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

最简单的用法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/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

绑定允许-

  • 将“ 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

该MDN文档Function.prototype.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

之所以可行,是因为我们将value绑定this到了object Obj


真正有趣的地方是,您不仅要绑定的值this,而且还要绑定其参数prop

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

我们现在可以这样做:

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

与with不同Obj.log,我们不必传递xy,因为在进行绑定时我们传递了这些值。

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

摘要:

bind()方法将一个对象作为第一个参数,并创建一个新函数。调用函数this时,函数主体中的值将是作为参数传入函数中的对象bind()

this无论如何在JS 工作

thisjavascript中的值始终取决于调用该函数的对象。此值始终是指从何处调用函数的点左侧的对象如果是全球范围,则为window(或globalnodeJS)。只有callapply并且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

绑定如何使用?

绑定可以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将保持不变。

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

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;

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®

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

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>

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

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

jQuery.proxy()

Dojo.hitch()

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

考虑下面列出的简单程序,

//we create object user
let User = { name: 'Justin' };

//a Hello Function is created to Alert the object User 
function Hello() {
  alert(this.name);
}

//since there the value of this is lost we need to bind user to use this keyword
let user = Hello.bind(User);
user();

//we create an instance to refer the this keyword (this.name);

bind函数创建一个新函数,其函数主体与其所调用的函数具有相同的函数主体。使用this参数调用它。为什么我们使用bind fun。:每次创建一个新实例时,我们必须使用第一个初始实例,然后使用bind fun。我们无法覆盖bind fun。它只是存储了该类的初始对象。

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

简单说明:

bind()创建一个新函数,该函数将返回给您一个新引用。

在此关键字之后的参数中,传入要预配置的参数。实际上,它不会立即执行,只是为执行做准备。

您可以根据需要预配置许多参数。

了解绑定的简单示例:

function calculate(operation) {
  if (operation === 'ADD') {
   alert('The Operation is Addition');
  } else if (operation === 'SUBTRACT') {
   alert('The Operation is Subtraction');
  }
}

addBtn.addEventListener('click', calculate.bind(this, 'ADD'));
subtractBtn.addEventListener('click', calculate.bind(this, 'SUBTRACT'));

另一种用法是,您可以将绑定函数作为参数传递给在另一个执行上下文下运行的另一个函数。

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

function somefunction(cb){
  //other code
  cb();
}
somefunction.call({}, cb);

简单的例子

function lol(text) {
    console.log(this.name, text);
}

lol(); // undefined undefined
lol('first'); // undefined first
lol.call({name: 'karl'}); // karl undefined
lol.call({name: 'karl'}, 'second'); // karl second
lol.apply({name: 'meg'}); // meg undefined
lol.apply({name: 'meg'}, ['third']); // meg third
const newLol = lol.bind({name: 'bob'});
newLol(); // bob undefined
newLol('fourth'); // bob fourth

绑定方法

绑定实现可能看起来像这样:

Function.prototype.bind = function () {
  const self = this;
  const args = [...arguments];
  const context = args.shift();

  return function () {
    return self.apply(context, args.concat([...arguments]));
  };
};

bind函数可以接受任意数量的参数并返回一个新函数

新函数将使用JS Function.prototype.apply方法调用原始函数
apply方法将使用传递给目标函数的第一个参数作为其上下文(this),该apply方法的第二个数组参数将是目标函数中其余参数的组合,concat与用于调用return的参数功能(按此顺序)。


一个例子可能看起来像这样:

function Fruit(emoji) {
  this.emoji = emoji;
}

Fruit.prototype.show = function () {
  console.log(this.emoji);
};

const apple = new Fruit('🍎');
const orange = new Fruit('🍊');

apple.show();  // 🍎
orange.show(); // 🍊

const fruit1 = apple.show;
const fruit2 = apple.show.bind();
const fruit3 = apple.show.bind(apple);
const fruit4 = apple.show.bind(orange);

fruit1(); // undefined
fruit2(); // undefined
fruit3(); // 🍎
fruit4(); // 🍊

除了已经说过的bind()方法外,该方法还允许对象从另一个对象借用方法而无需复制该方法。在JavaScript中称为函数借用

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%' 
本文地址:http://javascript.askforanswer.com/javascriptdebangdingfangfayoushenmeyong.html
文章标签: ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!