มันเป็นฟังก์ชั่นการแสดงออกมันหมายถึงการเรียกใช้ฟังก์ชั่นการแสดงออกทันที (IIFE) IIFE เป็นเพียงฟังก์ชั่นที่ถูกเรียกใช้งานหลังจากสร้าง ดังนั้นเมื่อติดตั้งฟังก์ชั่นที่ต้องรอจนกว่าจะมีการเรียกใช้งาน IIFE จะถูกดำเนินการทันที ลองสร้าง IIFE ด้วยตัวอย่าง สมมติว่าเรามีฟังก์ชั่นการเพิ่มซึ่งใช้จำนวนเต็มสองจำนวนเป็น args และส่งคืนผลรวมกันทำให้การเพิ่มฟังก์ชั่นเป็น IIFE
ขั้นตอนที่ 1: กำหนดฟังก์ชั่น
function add (a, b){
return a+b;
}
add(5,5);
ขั้นที่ 2: เรียกใช้ฟังก์ชั่นโดยใส่คำสั่ง functtion ทั้งหมดไว้ในวงเล็บ
(function add (a, b){
return a+b;
})
//add(5,5);
ขั้นตอนที่ 3: การเรียกใช้ฟังก์ชันทันทีเพียงลบข้อความ 'เพิ่ม' ออกจากการโทร
(function add (a, b){
return a+b;
})(5,5);
เหตุผลหลักในการใช้ IFFE คือการรักษาขอบเขตส่วนตัวภายในฟังก์ชั่นของคุณ ภายในโค้ดจาวาสคริปต์ที่คุณต้องการให้แน่ใจว่าคุณไม่ได้แทนที่ตัวแปรทั่วโลก บางครั้งคุณอาจกำหนดตัวแปรที่แทนที่ตัวแปรส่วนกลางโดยไม่ตั้งใจได้ ลองเป็นตัวอย่าง สมมติว่าเรามีไฟล์ html ที่ชื่อว่า iffe.html และรหัสในส่วนของแท็ก body คือ -
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
ดีรหัสข้างต้นจะดำเนินการกับคำถามใด ๆ ตอนนี้สมมติว่าคุณตัดสินใจตัวแปรชื่อเอกสารโดยไม่ตั้งใจหรือเจตนา
<body>
<div id = 'demo'></div>
<script>
document.getElementById("demo").innerHTML = "Hello JavaScript!";
const document = "hi there";
console.log(document);
</script>
</body>
คุณจะสิ้นสุดในSyntaxError : การประกาศเอกสารคุณสมบัติโกลบอลที่ไม่สามารถกำหนดค่าได้
แต่ถ้าความปรารถนาของคุณคือการลบ documet ชื่อตัวแปรคุณสามารถทำได้โดยใช้ IFFE
<body>
<div id = 'demo'></div>
<script>
(function(){
const document = "hi there";
this.document.getElementById("demo").innerHTML = "Hello JavaScript!";
console.log(document);
})();
document.getElementById("demo").innerHTML = "Hello JavaScript!";
</script>
</body>
เอาท์พุท:
ลองอีกตัวอย่างหนึ่งสมมุติว่าเรามีวัตถุเครื่องคิดเลขเช่นร้อง -
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
</script>
</body>
มันใช้งานได้อย่างมีเสน่ห์ถ้าเราบังเอิญกำหนดค่าของวัตถุเครื่องคิดเลขอีกครั้ง
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
console.log(calculator.add(5,10));
calculator = "scientific calculator";
console.log(calculator.mul(5,5));
</script>
</body>
ใช่คุณจะลงเอยด้วย TypeError: calculator.mul ไม่ใช่ฟังก์ชัน iffe.html
แต่ด้วยความช่วยเหลือของ IFFE เราสามารถสร้างขอบเขตส่วนตัวที่เราสามารถสร้างเครื่องคิดเลขชื่อตัวแปรอื่น ๆ และใช้มันได้
<body>
<script>
var calculator = {
add:function(a,b){
return a+b;
},
mul:function(a,b){
return a*b;
}
}
var cal = (function(){
var calculator = {
sub:function(a,b){
return a-b;
},
div:function(a,b){
return a/b;
}
}
console.log(this.calculator.mul(5,10));
console.log(calculator.sub(10,5));
return calculator;
})();
console.log(calculator.add(5,10));
console.log(cal.div(10,5));
</script>
</body>
เอาท์พุท:
