IIFE
IIFE 立即函式(Immediately-Invoked Function Expression)
特色
- 立即函式可以讓函式在建立後立即執行。
- 無法在函式外被呼叫
寫法
(function(){})()(function(){}());- arrow function:
(()=>{})(); - 具名function:
(function fn1(){})()
例如:
(function fn1(){
num++;
console.log(num);
return num !== 5 ? fn1(num) : console.log('finished!')
})(num = 0)
主要兩點:
- 如果是函式表達式，可直接在其後加
()執行 - 如果是函式宣告，可以通過
()、+、-、void、new等運算子將其轉換為函式表達式，然後再加上()立即執行。
例如:
void function(){}(alert("ok"));
在最後呼叫的"()"傳入需要的引數
使用時機
1.當我們需要寫一個js檔案，並且複用率很高的時候，建議使用。
2.如果宣告的函式只需要呼叫一次，建議使用。
3.獨立模組，這個和第一點差不多。單獨提出來，是想強調一下立即執行函式的好處，開發時，它能做到各模組的低耦合，減少對全域性作用域的汙染
- 使用IIFE，放在內部宣告的變數可以避免汙染全域。
const x = 'global'
(()=>{
const x = 'IIFE';
console.log(x)
})(); // IIFE
console.log(x) // global
- Private Variable and Methods from Closure
const increment = (()=>{
let counter = 0;
console.log(`counter ${counter}`);
const credit = (num) => console.log(`I have ${num} credit(s).`);
return ()=>{conter++; credit(counter)}
})(); // counter 0
increment(); // I have 1 credit(s).
increment(); // I have 2 credit(s).
- The Module Pattern
//建立object
const Score = (()=>{
let count = 0;
return{
current: ()=>{return count},
increment: ()=>{count++},
reset: ()=>{count = 0}
}
})();
Score.increment();
cosole.log(Score.current()) // 1
Score.reset();
cosole.log(Score.current()) // 0
- The Revealing Pattern is a variation of the Module Pattern
const Game = (()=>{
let count = 0;
const current = ()=>{ return `Game score is ${count}.`};
const increment = ()=>{ count ++};
const reset = ()=>{ count = 0};
return{
current: current,
increment: increment,
reset: reset
}
})();
Game.increment();
console.log(Game.current());//1
- Injecting a namespace object
(( namespace )=>{
namespace.count = 0;
namespace.current = function(){ return `App count is ${this.count}`};
//不使用arrow，是因為要運用到this
namespace.increment = function(){ this.count++ };
namespace.reset = function(){
this.count = 0};
})(window.App = windowApp || {});
App.increment();
console.log(App.current())// App count is 1
