ก่อนที่จะพูดถึงวิธีการ bind () ลองมาดูคำถาม:
var altwrite = document.write;
altwrite ("สวัสดี");
// 1. มีปัญหาอะไรกับรหัสข้างต้น?
// 2. การดำเนินการที่ถูกต้องเป็นอย่างไร
// 3. วิธีการใช้วิธีการ bind ()
สำหรับคำถามข้างต้นคำตอบนั้นไม่ยากเกินไป จุดทดสอบหลักคือปัญหาที่ชี้ให้เห็นโดยสิ่งนี้ ฟังก์ชั่น altwrite () เปลี่ยนจุดนี้เป็นวัตถุทั่วโลกหรือหน้าต่างทำให้เกิดการโทรผิดปกติในระหว่างการดำเนินการ ทางออกที่ถูกต้องคือการใช้วิธีการ bind ():
altwrite.bind (เอกสาร) ("สวัสดี")
แน่นอนคุณสามารถใช้วิธีการโทร ():
altwrite.call (เอกสาร, "สวัสดี")
จุดเน้นของบทความนี้คือการหารือเกี่ยวกับการใช้วิธีการ BIND () ในฉบับที่สาม ก่อนที่เราจะเริ่มพูดคุยเกี่ยวกับการใช้งานของ BIND () ลองมาดูวิธีการใช้วิธี BIND ():
ฟังก์ชันผูก
วิธีที่ง่ายที่สุดในการใช้ bind () คือการสร้างฟังก์ชั่นเพื่อให้ฟังก์ชั่นมีค่าเท่ากันไม่ว่าจะเรียกว่า ข้อผิดพลาดทั่วไปเป็นเหมือนตัวอย่างข้างต้นการใช้วิธีการออกจากวัตถุจากนั้นเรียกมันและต้องการสิ่งนี้เพื่อชี้ไปที่วัตถุดั้งเดิม หากไม่มีการรักษาพิเศษวัตถุดั้งเดิมจะหายไป การใช้วิธีการ bind () สามารถแก้ปัญหานี้ได้อย่างสวยงาม:
this.num = 9; var mymodule = {num: 81, getNum: function () {return this.num; }}; module.getNum (); // 81var getNum = module.getNum; getNum (); // 9 เนื่องจากในตัวอย่างนี้ "นี่" ชี้ไปที่วัตถุทั่วโลก // สร้างฟังก์ชั่นที่ถูกผูกไว้กับโมดูล var boundgetNum = getNum.bind (โมดูล); BoundgetNum (); // 81ฟังก์ชั่นบางส่วน
ฟังก์ชั่นบางส่วนเรียกอีกอย่างว่าแอปพลิเคชันบางส่วน นี่คือส่วนของคำจำกัดความเกี่ยวกับฟังก์ชั่นบางส่วน:
แอปพลิเคชันบางส่วนสามารถอธิบายได้ว่าเป็นฟังก์ชั่นที่ยอมรับข้อโต้แย้งจำนวนหนึ่งค่าที่มีผลผูกพันกับหนึ่งหรือมากกว่าของอาร์กิวเมนต์เหล่านั้นและการคืนฟังก์ชั่นใหม่ที่ยอมรับอาร์กิวเมนต์ที่เหลืออยู่
นี่เป็นคุณสมบัติที่ดี การใช้ bind () เราตั้งค่าพารามิเตอร์ที่กำหนดไว้ล่วงหน้าของฟังก์ชันแล้วส่งผ่านพารามิเตอร์อื่น ๆ เมื่อโทร:
รายการฟังก์ชัน () {return array.prototype.slice.call (อาร์กิวเมนต์);} var list1 = รายการ (1, 2, 3); // [1, 2, 3] // พารามิเตอร์ที่กำหนดไว้ล่วงหน้า 37VAR ชั้นนำที่สามสิบสามสิบ = list.bind (ไม่ได้กำหนด, 37); var list2 = ชั้นนำที่สาม // [37] var list3 = ชั้นนำที่สามสิบเซเวนลิสต์ (1, 2, 3); // [37, 1, 2, 3]ใช้กับ setTimeout
โดยทั่วไปการตั้งถิ่นฐาน () นี้ชี้ไปที่หน้าต่างหรือวัตถุทั่วโลก เมื่อใช้เมธอดคลาสสิ่งนี้จำเป็นต้องชี้ไปที่อินสแตนซ์ของคลาสคุณสามารถใช้ bind () เพื่อผูกสิ่งนี้กับฟังก์ชันการเรียกกลับเพื่อจัดการอินสแตนซ์
ฟังก์ชั่น Bloomer () {this.petalcount = math.ceil (math.random () * 12) + 1;} // เรียกฟังก์ชั่น declare bloomer.prototype.bloom = function () {window.settimeout (this.declare.bind (this), 1000);}; this.petalcount + 'Petal!');};หมายเหตุ: วิธีการข้างต้นยังสามารถใช้สำหรับฟังก์ชั่นการจัดการเหตุการณ์และวิธีการ setInterval
ผูกฟังก์ชันเป็นตัวสร้าง
ฟังก์ชั่นการผูกยังเหมาะสำหรับการใช้ตัวดำเนินการใหม่เพื่อสร้างอินสแตนซ์ของฟังก์ชั่นวัตถุประสงค์ เมื่อใช้ฟังก์ชั่นการเชื่อมโยงเพื่อสร้างอินสแตนซ์หมายเหตุ: สิ่งนี้จะถูกละเว้น แต่พารามิเตอร์ที่ผ่านจะยังคงมีอยู่
จุดฟังก์ชัน (x, y) {this.x = x; this.y = y;} point.prototype.toString = function () {return.x + ',' + this.y; }; var p = จุดใหม่ (1, 2); p.tostring (); // '1,2'var emportObj = {}; var yaxispoint = point.bind (emportObj, 0/*x*/); // ตัวอย่างในการใช้งานไม่ได้รับการสนับสนุน // รองรับการผูกดั้งเดิม: var yaxispoint = point.bind (null, 0/*x*/); var axispoint = new yaxispoint (5); Axispoint.tostring (); // '0,5'axispoint อินสแตนซ์ของจุด; // true axispoint อินสแตนซ์ของ yaxispoint; // TRUE New Point (17, 42) อินสแตนซ์ของ Yaxispoint; // จริงในตัวอย่างด้านบน Point และ Yaxispoint Share Prototypes ดังนั้นจึงเป็นจริงเมื่อตัดสินโดยใช้ตัวดำเนินการอินสแตนซ์ของตัวดำเนินการ
ทางลัด
bind () ยังสามารถสร้างทางลัดสำหรับฟังก์ชั่นที่ต้องการค่าเฉพาะของสิ่งนี้
ตัวอย่างเช่นในการแปลงวัตถุอาร์เรย์ของคลาสเป็นอาร์เรย์จริงตัวอย่างที่เป็นไปได้มีดังนี้:
var slice = array.prototype.slice; // ... slice.call (อาร์กิวเมนต์);
หากคุณใช้ bind () สถานการณ์จะง่ายขึ้น:
var unboundslice = array.prototype.slice; var slice = function.prototype.call.bind (unboundslice); // ... slice (อาร์กิวเมนต์);
ทำให้สำเร็จ
ในส่วนข้างต้นคุณจะเห็นว่า bind () มีสถานการณ์การใช้งานมากมาย แต่ฟังก์ชัน bind () ถูกเพิ่มในรุ่นที่ห้าของ ECMA-262; มันอาจไม่ทำงานบนเบราว์เซอร์ทั้งหมด สิ่งนี้ต้องการให้เราใช้ฟังก์ชั่น BIND () ด้วยตนเอง
ก่อนอื่นเราสามารถใช้วิธีการ bind () โดยการระบุขอบเขตไปยังฟังก์ชันวัตถุประสงค์:
function.prototype.bind = ฟังก์ชั่น (บริบท) {self = this; // บันทึกสิ่งนี้นั่นคือฟังก์ชั่นวัตถุประสงค์ที่เรียกใช้วิธีการผูกกลับฟังก์ชัน () {return self.apply (บริบท, อาร์กิวเมนต์); -เมื่อพิจารณาถึงการแกงกะหรี่ของฟังก์ชั่นเราสามารถสร้างการผูกที่แข็งแกร่งยิ่งขึ้น ():
function.prototype.bind = ฟังก์ชั่น (บริบท) {var args = array.prototype.slice.call (อาร์กิวเมนต์, 1), self = this; return function () {var innerargs = array.prototype.slice.call (อาร์กิวเมนต์); var finalArgs = args.concat (innerargs); คืนค่า self.apply (บริบท, finalargs); -เวลานี้วิธีการ bind () สามารถผูกวัตถุและยังรองรับพารามิเตอร์ที่ผ่านระหว่างการผูก
ดำเนินการต่อฟังก์ชัน JavaScript สามารถใช้เป็นตัวสร้าง เมื่อมีการเรียกฟังก์ชั่นที่ถูกผูกไว้ด้วยวิธีนี้สถานการณ์จะบอบบางมากขึ้นและจำเป็นต้องมีส่วนร่วมในการผ่านห่วงโซ่ต้นแบบ:
function.prototype.bind = ฟังก์ชั่น (บริบท) {var args = array.prototype.slice (อาร์กิวเมนต์, 1), f = function () {}, self = this, bound = function () {var innerargs = array.prototype.slice.call (อาร์กิวเมนต์); var finalArgs = args.concat (innerargs); Return Self.apply ((อินสแตนซ์นี้ f? this: บริบท), finalargs); - f.prototype = self.prototype; bound.prototype = new f (); กลับมาผูกพัน;};นี่คือการใช้งานของ BIND () ในหนังสือ "JavaScript Web Application": โดยการตั้งค่าตัวสร้างรีเลย์ F ฟังก์ชั่นที่ถูกผูกไว้จะอยู่ในห่วงโซ่ต้นแบบเดียวกันกับฟังก์ชั่นการเรียกใช้ฟังก์ชั่น BIND () ใช้ตัวดำเนินการใหม่เพื่อเรียกใช้ฟังก์ชันที่ถูกผูกไว้และวัตถุที่ส่งคืนยังสามารถใช้อินสแตนซ์ได้ตามปกติ ดังนั้นนี่คือการใช้งานที่เข้มงวดที่สุดของการผูก ()
เพื่อที่จะสนับสนุนฟังก์ชั่น bind () ในเบราว์เซอร์คุณจะต้องแก้ไขฟังก์ชันข้างต้นเล็กน้อย:
function.prototype.bind = function (othis) {ถ้า (typeof this! == "function") {โยน typeerror ใหม่ ("function.prototype.bind - สิ่งที่พยายามจะถูกผูกไว้คือไม่เรียกได้"); } var aargs = array.prototype.slice.call (อาร์กิวเมนต์, 1), ftobind = this, fnop = function () {}, fbound = function () {return ftobind.apply - fnop.prototype = this.prototype; fbound.prototype = new fnop (); กลับ fbound; -การวิเคราะห์สั้น ๆ ข้างต้นเกี่ยวกับการใช้และการใช้วิธีการ BIND () ใน JavaScript เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่ามันจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น