ไวยากรณ์ JavaScript มีความยืดหยุ่นและไม่ใช่เรื่องแปลกที่จะมีวิธีการใช้งานห้าหรือหกวิธีสำหรับฟังก์ชั่นเดียวกัน จากนั้นควบคู่ไปกับการสืบทอดต้นแบบต่อต้านมนุษย์และคุณสมบัติแบบอะซิงโครนัสมันทำให้เกิดความสับสนมากขึ้น ฉันมักจะไม่เข้าใจความแตกต่างระหว่างการโทรและสมัครดังนั้นฉันจะบันทึกวันนี้เพื่อหลีกเลี่ยงการลืมอีกครั้ง
ใน JavaScript วิธีการสามารถดำเนินการในวิธีต่อไปนี้:
1.Func () เป็นวิธีการโทรโดยตรงและเป็นเรื่องธรรมดาที่สุดและยังสอดคล้องกับตรรกะการคิดของคนธรรมดา แต่ในบางกรณีมีข้อบกพร่องบางอย่างซึ่งจะอธิบายไว้ด้านล่าง
2. (ฟังก์ชั่น (arg) {}) (หน้าต่าง) การเรียกใช้วิธีที่ไม่ระบุชื่อมีประโยชน์มากกว่าเมื่อสร้างเนมสเปซ พารามิเตอร์ในวงเล็บต่อไปนี้สอดคล้องกับพารามิเตอร์ที่เข้ามาในวิธีที่ไม่ระบุชื่อทีละหนึ่ง
3.func.bind (sth) () Mozilla Manual กล่าวว่าการผูกเป็นคุณสมบัติใหม่ที่เพิ่มเข้ามาใน ECMA-262 รุ่นที่ 5 มันถูกระบุไว้แยกกันว่าเป็นวิธีการเรียกเพราะมันทำขึ้นสำหรับข้อบกพร่องที่ขอบเขตไม่สามารถผูกมัดในการโทรโดยตรง
4.func.call () นี่เป็นวิธีที่สองของการโทร แต่ละวิธีมีวิธีการโทรที่กำหนดไว้ในต้นแบบเพื่อดำเนินการวิธีการปัจจุบัน
5.Func.apply (), พี่ชายฝาแฝดของโทร
func ()
นี่เป็นวิธีการโทรที่พบบ่อยที่สุดและสามารถมองเห็นได้ทุกที่ในภาษาใด ๆ func (x, y) สามารถผ่านในพารามิเตอร์ที่แตกต่างกัน ในบางภาษาเช่น PHP, Java การโทรแบบนี้เพียงพอที่จะแก้ปัญหาทั้งหมด แต่ JavaScript เป็นภาษาที่ใช้งานได้และแนวคิดของการปิดและคำหลักแปลก ๆ นี้กำหนดข้อบกพร่องของวิธีการโทรนี้ สิ่งนี้ควรตีความว่าเป็นขอบเขตของส่วนรหัสปัจจุบันซึ่งจะเปลี่ยนเป็นรหัสที่ดำเนินการกับแฟรกเมนต์ที่แตกต่างกัน อย่างไรก็ตามในบางกรณีเราไม่ต้องการให้มีการเปลี่ยนแปลงเช่นเหตุการณ์ที่ผูกพันกับ DOMs บางตัว แน่นอนเราไม่ต้องการให้สิ่งนี้ถูกถ่ายโอนไปยังวัตถุหน้าต่างเมื่อพวกเขาถูกเรียก แต่บางครั้งนี่เป็นจริงตัวอย่างเช่นรหัสต่อไปนี้
การคัดลอกรหัสมีดังนี้:
var a = {};
var func = function (x) {
console.log (นี่);
-
a.onclick = function () {
var x = 100;
func (x);
-
a.onclick ();
คุณสามารถคิดว่าเป็นลิงค์ในหน้า เนื่องจากเราแค่ต้องการผูกวิธีที่กำหนดไว้กับเหตุการณ์ onclick แทนที่จะเรียกมันทันทีและวิธีนี้มีพารามิเตอร์เราจึงต้องห่อด้วยวิธีที่ไม่ระบุชื่อและส่งผ่านไปยังเหตุการณ์ onclick ของ A สิ่งนี้มีปัญหา สิ่งนี้ใน Func กลายเป็นหน้าต่างวัตถุทั่วโลกเห็นได้ชัดว่าเราไม่ต้องการสิ่งนี้ ในเวลานี้การใช้ func () เป็นวิธีการโทรโดยตรงเป็นไปไม่ได้ดังนั้นเราจึงต้องผูกสิ่งนี้นอก Func กับวิธี Func ดังนั้นจึงมีวิธีการผูกโทรใช้
ผูก
วัตถุประสงค์ของการผูกนั้นง่ายมากโดยส่งคืนวิธีการเดียวกันที่ผูกวัตถุนี้ รหัสข้างต้นสามารถบรรลุวัตถุประสงค์ของการเชื่อมโยงสิ่งนี้กับวัตถุโดยการแก้ไขหนึ่งบรรทัด
การคัดลอกรหัสมีดังนี้:
var a = {};
var func = function (x) {
console.log (นี่);
-
a.onclick = function () {
var x = 100;
func.bind (นี่) (x); // ผูกที่นี่
-
a.onclick ();
ด้วยวิธีนี้เหตุการณ์ onclick นี้จะไม่วิ่งไปรอบ ๆ เหมือนบินไร้หัว
โทรและสมัคร
โทรและสมัครควรพูดคุยกันเพราะพวกเขาคล้ายกันมาก พวกเขาทั้งหมดรองรับพารามิเตอร์หลายพารามิเตอร์และพารามิเตอร์แรกคือวัตถุนี้ที่จะถูกผูกไว้และพารามิเตอร์ที่สองคือความแตกต่าง การโทรใช้พารามิเตอร์อิสระเป็นพารามิเตอร์การเรียกใช้และใช้ใช้อาร์เรย์เป็นพารามิเตอร์การเรียกใช้ บางครั้งเราไม่ต้องการเปลี่ยนวัตถุนี้ แต่เราต้องการผูกมันไว้กับวัตถุอื่น ๆ ในเวลานี้การโทรและการสมัครมีประโยชน์มาก (ไม่ใช่ว่าคุณไม่สามารถใช้การผูกได้ แต่ดูเหมือนว่าการผูกจะปรากฏช้าดังนั้นความเข้ากันได้ของเบราว์เซอร์อาจไม่ดี) ใช้เกาลัด:
การคัดลอกรหัสมีดังนี้:
a = {
func: function () {
this.x += 1;
-
x: 0
-
b = {
A: A,
x: 20
-
สำหรับ (var i = 0; i <10; i ++) {
Bafunc ();
-
console.log (ขวาน);
console.log (bx);
มี X ในวัตถุ A และ B ด้านบน เราหวังว่า FUNC สามารถปรับเปลี่ยน X ที่เกี่ยวข้องในลักษณะเป้าหมายได้ แต่การโทรโดยตรงสามารถแก้ไข X ในขอบเขต Func นั่นคือ AX แก้ไขรหัสเพื่อให้บรรลุวัตถุประสงค์ของการแก้ไข BX
การคัดลอกรหัสมีดังนี้:
a = {
func: function () {
this.x += 1;
-
x: 0
-
b = {
A: A,
x: 20
-
สำหรับ (var i = 0; i <10; i ++) {
bafunc.call (b); // ผูกสิ่งนี้กับ b
-
console.log (ขวาน);
console.log (bx);
เกาลัดนี้ไม่ได้รับการตอบรับที่ดีและเป็นรูปแบบรหัสที่สับสนมากพร้อมกับสถานการณ์ที่ใช้งานได้ แต่ไม่สามารถใช้ได้ทุกที่