การใช้งานbind()ใน JavaScript คืออะไร?

ผูกสร้างฟังก์ชั่นใหม่ที่จะบังคับให้ภายในฟังก์ชั่นที่จะพารามิเตอร์ที่ส่งผ่านไปthisbind()

นี่คือตัวอย่างที่แสดงวิธีใช้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

ลองฟังก์ชั่นจาวาสคริปต์เพื่อดูข้อมูลเพิ่มเติมและตัวอย่างแบบอินเทอร์แอคทีฟ

อัปเดต: 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/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind

ผูกช่วยให้ -

• ตั้งค่า "นี้" เป็นวัตถุที่เฉพาะเจาะจง สิ่งนี้จะมีประโยชน์มากเพราะบางครั้งสิ่งนี้ไม่ได้มีเจตนา
• วิธีการใช้ซ้ำ
• ฟังก์ชั่นแกง

ตัวอย่างเช่นคุณมีฟังก์ชั่นที่จะหักค่าธรรมเนียมสโมสรรายเดือน

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

นี้ทำงานได้เพราะเราผูกพันค่าของกับวัตถุของเราthisObj

ที่ ๆ มันน่าสนใจมาก ๆ ก็คือเมื่อคุณไม่เพียง แต่ผูกค่าสำหรับ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เพราะเราผ่านค่าเหล่านั้นเมื่อเราผูกพันของเรา

ตัวแปรมีขอบเขตท้องถิ่นและระดับโลก สมมุติว่าเรามีตัวแปรสองตัวที่มีชื่อเหมือนกัน หนึ่งคือกำหนดทั่วโลกและอื่น ๆ ที่กำหนดไว้ในฟังก์ชั่นการปิดและเราต้องการที่จะได้รับค่าตัวแปรซึ่งอยู่ในฟังก์ชั่นปิด ในกรณีนี้เราใช้เมธอด 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 อยู่แล้ว

ค่าของthisในจาวาสคริปต์นั้นขึ้นอยู่กับสิ่งที่เรียกว่าฟังก์ชั่น ค่านี้มักจะหมายถึงวัตถุที่ด้านซ้ายของจุดจากที่เป็นฟังก์ชั่นที่เรียกว่า ในกรณีของขอบเขตส่วนกลางนี้คือ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

การผูกใช้อย่างไร?

ผูกสามารถช่วยในการเอาชนะปัญหาด้วย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 เป็นวิธีการ - Function.prototype.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;

วิธีการผูก () สร้างตัวอย่างฟังก์ชั่นใหม่ที่มีค่านี้ถูกผูกไว้กับค่าที่ถูกส่งผ่านไปยังผูก () ตัวอย่างเช่น:

   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 ดังนั้นการเรียกฟังก์ชั่นแม้จะเป็นการโทรทั่วโลกส่งผลให้เกิดสตริง "สีน้ำเงิน"

การอ้างอิง: Nicholas C. Zakas - 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

พิจารณา Simple Program ด้านล่างนี้

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

ฟังก์ชั่นผูกสร้างฟังก์ชั่นใหม่ที่มีร่างกายฟังก์ชั่นเช่นเดียวกับฟังก์ชั่นที่มันกำลังเรียกมันถูกเรียกด้วยอาร์กิวเมนต์นี้ทำไมเราใช้ผูกสนุก : เมื่อทุกครั้งที่มีการสร้างอินสแตนซ์ใหม่และเราต้องใช้อินสแตนซ์เริ่มต้นแรกจากนั้นเราใช้การเชื่อมสนุก

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

การใช้งานอื่นคือคุณสามารถส่งผ่านฟังก์ชัน binded เป็นอาร์กิวเมนต์ไปยังฟังก์ชันอื่นซึ่งทำงานภายใต้บริบทการดำเนินการอื่น

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

ฟังก์ชั่นการผูกสามารถใช้จำนวนของการขัดแย้งใด ๆ และกลับมาเป็นฟังก์ชั่นใหม่

ฟังก์ชั่นใหม่จะเรียกใช้ฟังก์ชั่นดั้งเดิมโดยใช้Function.prototype.applyวิธีการJS วิธีการจะใช้อาร์กิวเมนต์แรกส่งไปยังฟังก์ชันเป้าหมายเป็นบริบท ( ) และอาร์กิวเมนต์อาร์เรย์ที่สองของวิธีการที่จะมีการรวมกันของส่วนที่เหลือของข้อโต้แย้งจากฟังก์ชั่นเป้าหมายที่ concat มีข้อโต้แย้งที่ใช้ในการเรียกผลตอบแทน ฟังก์ชั่น (ในลำดับที่) ตัวอย่างสามารถมีลักษณะดังนี้:
applythisapply

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(); // 🍊

คำอธิบายง่ายๆ:

ผูก ()สร้างฟังก์ชั่นใหม่การอ้างอิงใหม่ที่ฟังก์ชั่นจะกลับมาให้คุณ

ในพารามิเตอร์หลังคีย์เวิร์ดนี้คุณจะผ่านพารามิเตอร์ที่คุณต้องการกำหนดค่าล่วงหน้า ที่จริงแล้วมันไม่ได้ดำเนินการทันทีเพียงแค่เตรียมการสำหรับการดำเนินการ

คุณสามารถกำหนดค่าพารามิเตอร์ล่วงหน้าได้มากเท่าที่คุณต้องการ

ตัวอย่างง่าย ๆ ที่จะเข้าใจการโยง:

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

bind เป็นฟังก์ชั่นที่มีอยู่ในจาวาสคริปต์ต้นแบบเนื่องจากชื่อแนะนำ 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%'