ไวยากรณ์ JavaScript / jQuery นี้ทำงานอย่างไร: (ฟังก์ชั่น (หน้าต่าง, ไม่ได้กำหนด) {}) (หน้าต่าง)

คุณเคยดูที่ซอร์สโค้ดjQuery 1.4และสังเกตว่ามันถูกห่อหุ้มด้วยวิธีดังต่อไปนี้:

(function( window, undefined ) {

  //All the JQuery code here 
  ...

})(window);

ฉันได้อ่านบทความเกี่ยวกับการตั้งชื่อJavaScriptและอีกชื่อหนึ่งเรียกว่า " คู่ที่สำคัญของ Parens " เพื่อให้ฉันรู้เกี่ยวกับสิ่งที่เกิดขึ้นที่นี่

แต่ฉันไม่เคยเห็นรูปแบบนี้มาก่อน อะไรคือสิ่งที่undefinedทำมี? และทำไมwindowต้องผ่านไปแล้วจึงปรากฏตัวที่จุดสิ้นสุดอีกครั้ง?

undefined = "new value";ไม่ได้กำหนดเป็นตัวแปรตามปกติและสามารถเปลี่ยนแปลงได้เพียงกับ ดังนั้น jQuery จึงสร้างตัวแปร "undefined" แบบโลคอลที่ไม่ได้กำหนดจริงๆ

ตัวแปรหน้าต่างถูกสร้างขึ้นแบบโลคัลด้วยเหตุผลด้านประสิทธิภาพ เนื่องจากเมื่อ JavaScript ค้นหาตัวแปรมันจะผ่านตัวแปรในเครื่องก่อนจนกว่าจะพบชื่อตัวแปร เมื่อไม่พบ JavaScript จะผ่านขอบเขตถัดไปเป็นต้นจนกว่าจะกรองตัวแปรทั่วโลก ดังนั้นหากตัวแปรหน้าต่างถูกสร้างขึ้นแบบท้องถิ่น JavaScript สามารถค้นหาได้เร็วขึ้น ข้อมูลเพิ่มเติม: เร่งความเร็ว JavaScript ของคุณ - Nicholas C. Zakas

ไม่ได้กำหนด

โดยการประกาศundefinedเป็นอาร์กิวเมนต์ แต่ไม่เคยส่งค่าไปยังมันเพื่อให้แน่ใจว่ามันจะไม่ได้กำหนดเสมอเพราะมันเป็นเพียงตัวแปรในขอบเขตทั่วโลกที่สามารถเขียนทับ นี่a === undefinedเป็นทางเลือกที่ปลอดภัยtypeof a == 'undefined'ซึ่งช่วยประหยัดอักขระได้ไม่กี่ตัว นอกจากนี้ยังทำให้โค้ดเป็นมิตรกับตัว Minifier มากขึ้นเช่นundefinedสามารถย่อให้สั้นลงได้uซึ่งช่วยประหยัดอักขระได้อีกไม่กี่ตัว

หน้าต่าง

ผ่านwindowเป็นอาร์กิวเมนต์พร้อมสำเนาอยู่ในขอบเขตท้องถิ่นซึ่งมีผลต่อประสิทธิภาพการทำงาน: http://jsperf.com/short-scope การเข้าถึงทั้งหมดwindowจะต้องเดินทางน้อยกว่าหนึ่งระดับของขอบเขตขอบเขต เช่นเดียวกับundefinedการทำสำเนาโลคอลอีกครั้งช่วยลดการทำลายให้มากขึ้น

sidenote:

แม้ว่าสิ่งนี้อาจไม่ได้เป็นความตั้งใจของผู้พัฒนา jQuery แต่การส่งผ่านwindowจะช่วยให้ห้องสมุดสามารถรวมเข้ากับสภาพแวดล้อม Javascript ทางฝั่งเซิร์ฟเวอร์ได้ง่ายขึ้นเช่นnode.jsซึ่งไม่มีwindowวัตถุระดับโลก ในสถานการณ์เช่นนี้จำเป็นต้องเปลี่ยนเพียงหนึ่งบรรทัดเพื่อแทนที่windowวัตถุด้วยอีกบรรทัดหนึ่ง ในกรณีของ jQuery windowวัตถุจำลองสามารถสร้างและส่งผ่านเพื่อวัตถุประสงค์ในการขูด HTML (ไลบรารีเช่นjsdomสามารถทำได้)

อื่น ๆ undefinedได้อธิบาย undefinedเปรียบเสมือนตัวแปรโกลบอลที่สามารถนิยามใหม่เป็นค่าใดก็ได้ เทคนิคนี้เพื่อป้องกันการตรวจสอบที่ไม่ได้กำหนดทั้งหมดหากผู้อื่นเขียนว่าundefined = 10อยู่ที่ไหนสักแห่ง ข้อโต้แย้งที่ไม่เคยผ่านการรับประกันได้ว่าจะจริงundefinedโดยไม่คำนึงถึงความคุ้มค่าของตัวแปร undefined

สามารถแสดงเหตุผลของการผ่านหน้าต่างด้วยตัวอย่างต่อไปนี้

(function() {
   console.log(window);
   ...
   ...
   ...
   var window = 10;
})();

บันทึกของคอนโซลคืออะไร คุณค่าของwindowวัตถุใช่มั้ย ไม่ถูกต้อง! 10? ไม่ถูกต้อง! undefinedมันบันทึก Javascript interpreter (หรือคอมไพเลอร์ JIT) เขียนใหม่ด้วยวิธีนี้ -

(function() {
   var window; //and every other var in this function

   console.log(window);
   ...
   ...
   ...
   window = 10;

})();

อย่างไรก็ตามหากคุณได้รับwindowตัวแปรเป็นอาร์กิวเมนต์ไม่มี var และดังนั้นจึงไม่น่าประหลาดใจ

ฉันไม่รู้ว่า jQuery กำลังทำอยู่หรือไม่ แต่ถ้าคุณนิยามwindowตัวแปรท้องถิ่นที่ใดก็ได้ในหน้าที่การใช้งานของคุณไม่ว่าจะด้วยเหตุผลใดก็ตามคุณควรยืมจากขอบเขตทั่วโลก

windowถูกส่งผ่านเช่นนั้นในกรณีที่มีคนตัดสินใจที่จะกำหนดวัตถุหน้าต่างใน IE ฉันถือว่าเหมือนกันundefinedในกรณีที่มันได้รับมอบหมายอีกครั้งในภายหลัง

ด้านบนของwindowสคริปต์นั้นเป็นเพียงการตั้งชื่ออาร์กิวเมนต์ "window" ซึ่งเป็นอาร์กิวเมนต์ที่มากกว่าที่windowอ้างอิงระดับโลกและรหัสที่ใช้ในการปิดนี้ windowในตอนท้ายที่เป็นจริงระบุสิ่งที่จะผ่านสำหรับอาร์กิวเมนต์แรกในกรณีนี้ความหมายในปัจจุบันของwindow... ความหวังคือการที่คุณยังไม่ได้เมาขึ้นwindowก่อนที่เกิดขึ้น

นี้อาจจะเป็นเรื่องง่ายที่จะคิดว่าด้วยการแสดงกรณีทั่วไปที่ใช้ใน jQuery ปลั๊กอิน.noConflict()จัดการดังนั้นส่วนใหญ่ของรหัสที่คุณยังคงสามารถใช้$ถึงแม้ว่ามันจะหมายถึงสิ่งอื่น ๆกว่าjQueryนอกขอบเขตนี้:

(function($) {
  //inside here, $ == jQuery, it was passed as the first argument
})(jQuery);

ทดสอบด้วยการซ้ำ 1000000 การโลคัลไลซ์ชนิดนี้ไม่มีผลกับประสิทธิภาพ ไม่แม้แต่วินาทีเดียวในการทำซ้ำ 1000000 นี่มันไร้ประโยชน์จริงๆ