คำนำ
ผ่านวิธีการโทร (), ใช้ () และ bind () เราสามารถยืมวิธีการจากวัตถุอื่น ๆ ได้อย่างง่ายดายโดยไม่ต้องสืบทอดจากวัตถุเหล่านี้
วิธีการยืมใน JavaScript
ใน JavaScript ฟังก์ชั่นหรือวิธีการของวัตถุอื่น ๆ บางครั้งสามารถนำกลับมาใช้ใหม่ได้ไม่จำเป็นต้องกำหนดไว้ในวัตถุหรือบนต้นแบบ ผ่านวิธีการโทร (), ใช้ () และ bind () เราสามารถยืมวิธีการจากวัตถุอื่นได้อย่างง่ายดายโดยไม่ต้องสืบทอด นี่เป็นวิธีการทั่วไปที่ใช้โดยนักพัฒนา JavaScript มืออาชีพ
วิธีต้นแบบ
ใน JavaScript ยกเว้นชนิดข้อมูลดั้งเดิมที่ไม่สามารถเปลี่ยนแปลงได้เช่นสตริงตัวเลขและบูลีนข้อมูลเกือบทั้งหมดเป็นวัตถุ อาร์เรย์เป็นวัตถุที่เหมาะสมสำหรับการสำรวจและแปลงลำดับที่สั่งซื้อ ต้นแบบของมันมีวิธีการใช้งานง่ายเช่นชิ้นเข้าร่วมผลักและป๊อป
ตัวอย่างทั่วไปคือเมื่อทั้งวัตถุและอาร์เรย์เป็นโครงสร้างข้อมูลของประเภทรายการวัตถุสามารถ "ยืม" ได้จากอาร์เรย์ วิธีที่พบบ่อยที่สุดในการยืมคือ Array.prototype.slice
ฟังก์ชั่น myfunc () {// ข้อผิดพลาดอาร์กิวเมนต์เป็นอาร์เรย์เหมือนวัตถุไม่ใช่อาร์เรย์อาร์เรย์จริง sort (); // "ยืม" เมธอดอาร์เรย์ชิ้นส่วนจากต้นแบบซึ่งใช้อาร์เรย์เช่นวัตถุ (คีย์: ค่า) // และส่งคืนอาร์เรย์จริง var args = array.prototype.slice.call (อาร์กิวเมนต์); // args ตอนนี้เป็นอาร์เรย์จริงดังนั้นสามารถใช้วิธีการเรียงลำดับ () จาก array args.sort (); } myfunc ('กล้วย', 'เชอร์รี่', 'แอปเปิ้ล');วิธีการกู้ยืมใช้งานได้เนื่องจากวิธีการโทรและใช้อนุญาตให้ใช้ฟังก์ชั่นการโทรในบริบทที่แตกต่างกันซึ่งเป็นวิธีที่ดีในการใช้ฟังก์ชั่นที่มีอยู่ซ้ำโดยไม่ต้องสืบทอดวัตถุอื่น ในความเป็นจริงอาร์เรย์กำหนดวิธีการทั่วไปหลายอย่างในต้นแบบเช่นการเข้าร่วมและกรอง:
// ใช้สตริง "abc" และผลิต "a | b | carray.prototype.join.call ('abc', '|'); // ใช้สตริงและลบทั้งหมดที่ไม่ใช่ vowelsarray.prototype.filter.call ('abcdefghijk' ! == -1;}). เข้าร่วม (''); จะเห็นได้ว่าไม่เพียง แต่วัตถุสามารถยืมวิธีการอาร์เรย์ แต่ยังรวมถึงสตริงด้วย แต่เนื่องจากวิธีการทั่วไปถูกกำหนดไว้ในต้นแบบคุณต้องใช้ String.prototype หรือ Array.prototype ทุกครั้งที่คุณต้องการยืมวิธีการ การเขียนแบบนี้เป็นคำอื่นมากและในไม่ช้าก็จะน่ารำคาญ วิธีที่มีประสิทธิภาพมากขึ้นคือการใช้ตัวอักษรเพื่อให้บรรลุวัตถุประสงค์เดียวกัน
ใช้วิธีการกู้ยืมตามตัวอักษร
ตัวอักษรเป็นโครงสร้างไวยากรณ์ที่เป็นไปตามกฎ JavaScript, MDN อธิบายเช่นนี้:
ใน JavaScript การใช้ตัวอักษรสามารถแสดงค่าได้ พวกเขาเป็นค่าคงที่ทั้งตัวแปรหรือให้อย่างแท้จริงในสคริปต์
ตัวอักษรสามารถย่อเป็นต้นแบบ:
[] .Slice.CALL (อาร์กิวเมนต์); []. Join.CALL ('ABC', '|'); ''. touppercase.call (['ตัวพิมพ์เล็ก', 'คำ', 'in', 'a', 'ประโยค']). แยก (',');สิ่งนี้ดูเหมือนจะไม่ถูกต้อง แต่ก็ยังน่าเกลียดนิดหน่อยที่จะต้องใช้งานโดยตรงกับ [] และ "" เพื่อยืมวิธีการ คุณสามารถใช้ตัวแปรเพื่อบันทึกการอ้างอิงถึงตัวอักษรและวิธีการซึ่งทำให้ง่ายต่อการเขียน:
var slice = [] .slice; slice.call (อาร์กิวเมนต์); var join = [] .oin; join.call ('abc', '|'); var touppercase = '' .touppercase; touppercase.call (['ตัวพิมพ์เล็ก', 'คำ', 'in', 'a', 'ประโยค']). แยก (',');ด้วยการอ้างอิงถึงวิธีการยืมเราสามารถโทรด้วยการโทร () ได้อย่างง่ายดายซึ่งสามารถนำรหัสกลับมาใช้ใหม่ได้ ปฏิบัติตามหลักการของการลดความซ้ำซ้อนมาดูกันว่าเราสามารถยืมวิธีการโดยไม่ต้องเขียน () หรือสมัคร () ทุกครั้งที่เราโทร:
var slice = function.prototype.call.bind (array.prototype.slice); slice (อาร์กิวเมนต์); var inon = function.prototype.call.bind (array.prototype.join); เข้าร่วม ('abc', '|'); var touppercase = function.prototype.call.bind (string.prototype.touppercase); touppercase (['ตัวพิมพ์เล็ก', 'คำ', 'in', 'a', 'ประโยค']). แยก (','); อย่างที่คุณเห็นตอนนี้คุณสามารถใช้ Function.prototype.call.bind เพื่อเชื่อมโยงวิธีการ "ยืม" แบบคงที่จากต้นแบบที่แตกต่างกัน แต่ประโยค var slice = Function.prototype.call.bind(Array.prototype.slice) ใช้งานได้จริงได้อย่างไร?
ทำความเข้าใจฟังก์ชั่น. prototype.call.bind
Function.prototype.call.bind อาจดูซับซ้อนเล็กน้อยเมื่อมองแวบแรก แต่ก็มีประโยชน์มากที่จะเข้าใจวิธีการทำงาน
Function.prototype.call เป็นข้อมูลอ้างอิงที่ "เรียก" ฟังก์ชั่นและจะตั้งค่า "นี้" สำหรับใช้ในฟังก์ชั่น
โปรดทราบว่า "ผูก" ส่งคืนฟังก์ชั่นใหม่ด้วยค่า "นี้" ดังนั้น "สิ่งนี้" ของฟังก์ชั่นใหม่ที่ส่งคืนโดย .bind(Array.prototype.slice) เป็นฟังก์ชัน array.prototype.slice เสมอ
เพื่อสรุป ฟังก์ชั่นใหม่เรียกใช้ฟังก์ชัน "การโทร" และ "สิ่งนี้" คือฟังก์ชั่น "Slice" Calling Slice () จะชี้ไปที่วิธีการที่ผ่านการรับรองก่อนหน้านี้
วิธีการปรับแต่งวัตถุ
การสืบทอดนั้นยอดเยี่ยม แต่นักพัฒนามักจะใช้เมื่อพวกเขาต้องการนำคุณสมบัติทั่วไปมาใช้ใหม่ระหว่างวัตถุหรือโมดูล ไม่จำเป็นต้องใช้การสืบทอดเพื่อนำรหัสกลับมาใช้ใหม่เนื่องจากวิธีการกู้ยืมอย่างง่ายอาจมีความซับซ้อนในกรณีส่วนใหญ่
เราพูดถึงวิธีการกู้ยืมแบบดั้งเดิมมาก่อน แต่การยืมวิธีการใด ๆ ก็โอเค ตัวอย่างเช่นรหัสต่อไปนี้สามารถคำนวณคะแนนผู้เล่นของเกมคะแนน:
var scorecalculator = {getSum: function (ผลลัพธ์) {var score = 0; สำหรับ (var i = 0, len = results.length; i <len; i ++) {คะแนน = คะแนน+ผลลัพธ์ [i]; } คะแนนคืน; }, getScore: function () {return scorecalculator.getsum (this.results) / this.handicap; - var player1 = {ผลลัพธ์: [69, 50, 76], แต้มต่อ: 8}; var player2 = {ผลลัพธ์: [23, 4, 58], แต้มต่อ: 5}; คะแนน var = function.prototype.call.bind (scorecalculator.getScore); // คะแนน: 24.375console.log ('คะแนน:' + คะแนน (ผู้เล่น 1)); // คะแนน: 17console.log ('คะแนน:' + คะแนน (player2));แม้ว่าตัวอย่างข้างต้นจะทื่อมาก แต่ก็เห็นได้ว่าเช่นเดียวกับวิธีการดั้งเดิม แต่วิธีการที่ผู้ใช้กำหนดสามารถยืมได้อย่างง่ายดาย
สรุป
การโทรผูกและใช้สามารถเปลี่ยนวิธีการเรียกใช้ฟังก์ชันและมักจะใช้เมื่อยืมฟังก์ชั่น นักพัฒนาส่วนใหญ่คุ้นเคยกับวิธีการยืมพื้นเมือง แต่ไม่ค่อยยืมวิธีการที่กำหนดเอง
ในช่วงไม่กี่ปีที่ผ่านมาการเขียนโปรแกรมฟังก์ชั่นของ JavaScript ได้รับการพัฒนาอย่างดี วิธีใช้ function.prototype.call.bind เพื่อยืมวิธีการที่สะดวกยิ่งขึ้น? คาดว่าหัวข้อดังกล่าวจะกลายเป็นเรื่องธรรมดามากขึ้นเรื่อย ๆ
ข้างต้นเป็นบทสรุปของวิธีการกู้ยืมในจาวาสคริปต์ ฉันหวังว่ามันจะเป็นประโยชน์สำหรับทุกคนที่จะเข้าใจวิธีการกู้ยืมในจาวาสคริปต์