ในระยะสั้น
สรุป
ในรูปแบบที่ง่ายที่สุดเทคนิคนี้มีจุดมุ่งหมายที่จะตัดรหัสภายในขอบเขตฟังก์ชั่น
ช่วยลดโอกาสในการ:
- การปะทะกับแอปพลิเคชั่น / ไลบรารีอื่น ๆ
- ก่อให้เกิดมลพิษที่เหนือกว่า (มีแนวโน้มมากที่สุดในโลก)
มันไม่ตรวจจับเมื่อเอกสารพร้อม - ไม่ใช่document.onloadหรือwindow.onload
มันเป็นที่รู้จักกันทั่วไปว่าเป็นหรือImmediately Invoked Function Expression (IIFE)Self Executing Anonymous Function
รหัสอธิบาย
var someFunction = function(){ console.log('wagwan!'); };
(function() { /* function scope starts here */
console.log('start of IIFE');
var myNumber = 4; /* number variable declaration */
var myFunction = function(){ /* function variable declaration */
console.log('formidable!');
};
var myObject = { /* object variable declaration */
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
})(); /* function scope ends */
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
ในตัวอย่างข้างต้นตัวแปรใด ๆ ที่กำหนดไว้ในฟังก์ชั่น (เช่นประกาศโดยใช้var) จะเป็น "ส่วนตัว" และสามารถเข้าถึงได้ภายในขอบเขตฟังก์ชั่นเท่านั้น (ตามที่ Vivin Paliath ใส่ไว้) กล่าวอีกนัยหนึ่งตัวแปรเหล่านี้ไม่สามารถมองเห็น / เข้าถึงได้นอกฟังก์ชั่น ดูการสาธิตสด
Javascript มีฟังก์ชันกำหนดขอบเขต "พารามิเตอร์และตัวแปรที่กำหนดในฟังก์ชั่นไม่สามารถมองเห็นได้นอกฟังก์ชั่นและตัวแปรที่กำหนดไว้ที่ใดก็ได้ภายในฟังก์ชั่นสามารถมองเห็นได้ทุกที่ภายในฟังก์ชัน" (จาก "Javascript: The Good Parts")
รายละเอียดเพิ่มเติม
รหัสทางเลือก
ในท้ายที่สุดโค้ดที่โพสต์ก่อนหน้าสามารถทำได้ดังนี้:
var someFunction = function(){ console.log('wagwan!'); };
var myMainFunction = function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
};
myMainFunction(); // I CALL "myMainFunction" FUNCTION HERE
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
ดูการสาธิตสด
ราก
การวนซ้ำ 1
อยู่มาวันหนึ่งบางคนอาจคิดว่า "ต้องมีวิธีที่จะหลีกเลี่ยงการตั้งชื่อ 'myMainFunction' เนื่องจากสิ่งที่เราต้องการคือการดำเนินการทันที
หากคุณกลับไปสู่พื้นฐานคุณจะพบว่า:
expression: สิ่งที่ประเมินค่า กล่าวคือ3+11/xstatement: บรรทัดของโค้ดที่ทำอะไรบางอย่าง แต่มันไม่ได้ประเมินค่า กล่าวคือif(){}
ในทำนองเดียวกันฟังก์ชั่นการแสดงออกประเมินเป็นค่า และสิ่งหนึ่งที่เป็นผล (ฉันสมมติว่า?) คือพวกเขาสามารถเรียกใช้ได้ทันที:
var italianSayinSomething = function(){ console.log('mamamia!'); }();
ดังนั้นตัวอย่างที่ซับซ้อนมากขึ้นของเราจะกลายเป็น:
var someFunction = function(){ console.log('wagwan!'); };
var myMainFunction = function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
}();
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
ดูการสาธิตสด
การวนซ้ำ 2
ขั้นตอนต่อไปคือความคิด "ทำไมมีvar myMainFunction =ถ้าเราไม่แม้แต่ใช้มัน!"
คำตอบนั้นง่าย: ลองลบออกเช่นด้านล่าง:
function(){ console.log('mamamia!'); }();
ดูการสาธิตสด
มันจะไม่ทำงานเพราะ"การประกาศฟังก์ชั่นไม่ได้ invokable"
เคล็ดลับคือว่าโดยการเอาvar myMainFunction =เราเปลี่ยนการแสดงออกของฟังก์ชั่นเป็นประกาศฟังก์ชัน ดูลิงค์ใน "ทรัพยากร" สำหรับรายละเอียดเพิ่มเติมเกี่ยวกับเรื่องนี้
คำถามต่อไปคือ "ทำไมฉันไม่สามารถเก็บมันไว้เป็นนิพจน์ฟังก์ชั่นกับสิ่งอื่นที่ไม่ใช่var myMainFunction =?
คำตอบคือ "คุณทำได้" และมีหลายวิธีที่คุณสามารถทำได้: การเพิ่ม a +, !a -, หรืออาจจะรวมอยู่ในวงเล็บคู่หนึ่ง ตัวอย่างเช่น
(function(){ console.log('mamamia!'); })(); // live demo: jsbin.com/zokuwodoco/1/edit?js,console.
หรือ
+function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wuwipiyazi/1/edit?js,console
หรือ
-function(){ console.log('mamamia!'); }(); // live demo: jsbin.com/wejupaheva/1/edit?js,console
ดังนั้นเมื่อมีการเพิ่มการแก้ไขที่เกี่ยวข้องกับสิ่งที่ครั้งหนึ่งเคยเป็น "รหัสทางเลือก" ของเราเราจะกลับไปที่รหัสเดียวกันกับที่ใช้ในตัวอย่าง "รหัสอธิบาย"
var someFunction = function(){ console.log('wagwan!'); };
(function() {
console.log('start of IIFE');
var myNumber = 4;
var myFunction = function(){ console.log('formidable!'); };
var myObject = {
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
console.log('end of IIFE');
})();
someFunction(); // reachable, hence works: see in the console
myFunction(); // unreachable, will throw an error, see in the console
myObject.anotherFunc(); // unreachable, will throw an error, see in the console
อ่านเพิ่มเติมเกี่ยวกับExpressions vs Statements:
Demystifying Scopes
สิ่งหนึ่งที่อาจสงสัยคือ "จะเกิดอะไรขึ้นเมื่อคุณไม่นิยามตัวแปร 'อย่างถูกต้อง' ในฟังก์ชั่น - นั่นคือทำการมอบหมายอย่างง่ายแทน?
(function() {
var myNumber = 4; /* number variable declaration */
var myFunction = function(){ /* function variable declaration */
console.log('formidable!');
};
var myObject = { /* object variable declaration */
anotherNumber : 1001,
anotherFunc : function(){ console.log('formidable!'); }
};
myOtherFunction = function(){ /* oops, an assignment instead of a declaration */
console.log('haha. got ya!');
};
})();
myOtherFunction(); // reachable, hence works: see in the console
window.myOtherFunction(); // works in the browser, myOtherFunction is then in the global scope
myFunction(); // unreachable, will throw an error, see in the console
ดูการสาธิตสด
โดยพื้นฐานแล้วหากตัวแปรที่ไม่ได้ประกาศในขอบเขตปัจจุบันนั้นได้รับการกำหนดค่าดังนั้น "การค้นหาห่วงโซ่ขอบเขตจะเกิดขึ้นจนกว่าจะพบตัวแปรหรือกระทบกับขอบเขตทั่วโลก
เมื่ออยู่ในสภาพแวดล้อมเบราว์เซอร์ (เทียบกับสภาพแวดล้อมเซิร์ฟเวอร์เช่น nodejs) ขอบเขตทั่วโลกจะถูกกำหนดโดยwindowวัตถุ window.myOtherFunction()ดังนั้นเราสามารถทำได้
เคล็ดลับ "แนวทางปฏิบัติที่ดี" ของฉันในหัวข้อนี้คือใช้เสมอvarเมื่อกำหนดสิ่งต่าง ๆ : ไม่ว่าจะเป็นตัวเลขวัตถุหรือฟังก์ชั่น & แม้ในขอบเขตทั่วโลก ทำให้รหัสง่ายขึ้นมาก
บันทึก:
- จาวาสคริปต์ไม่ได้มี
block scope(ปรับปรุง: บล็อกขอบเขตตัวแปรท้องถิ่นเพิ่มเข้ามาในES6 .)
- จาวาสคริปต์มีเพียง
function scope& global scope( windowขอบเขตในสภาพแวดล้อมของเบราว์เซอร์)
อ่านเพิ่มเติมเกี่ยวกับJavascript Scopes:
ทรัพยากร
ขั้นตอนถัดไป
เมื่อคุณได้รับIIFEแนวคิดนี้มันจะนำไปสู่module patternซึ่งมักทำโดยใช้ประโยชน์จากรูปแบบ IIFE นี้ มีความสุข :)