最近在上六角學院的js核心篇,將筆記整理出來跟大家分享。
什麼是函式?
函式本身是物件下的子類別,跟物件有區別。
函式可以被呼叫,裡面包含程式碼的片段而不是屬性和值
1 2 3 4 5 6 7 8 9 10 11 12 13 14
|
function afunction(param){ var localVariable = '區域變數' console.log(this, localVariable)
return '收到了' + param; }
var data = afunction('外部參數');
console.log(data);
|
當使用function這個詞來宣告函式時,該程式碼就會成為函式,這個函式可以被呼叫,裡面包含程式碼片段,也會有名稱(但不一定,若沒有名稱的話就是匿名函式)
函式陳述式 & 表達式
陳述式
1 2 3 4 5 6 7 8
| function functionA(){ console.log('陳述式') console.log(functionA) }
functionA();
|
函式有名稱(f functionA)
表達式
在這裡,關鍵詞function後面沒有接名稱,被稱為匿名函式
注意:不是所有表達式宣告的函式都是匿名函式
1 2 3 4 5 6 7 8 9
| var functionB = function(){ console.log('表達式') console.log(functionB) }
functionB();
|
函式沒有名稱(f(){})
1 2 3 4 5 6 7 8 9 10
| var functionC = function functionD(){ console.log(functionC, functionD) } functionC()
var d = function(){ return 'cde'; }
|
執行結果:兩者呈現的函式名稱都是functionD
立即函式 IIFE
IIFE: Immediately Invoked Function Expression
立即呼叫的函式表達式
也被稱為會自我呼叫的匿名函式
以小括號包住一個函式的陳述式,宣告完就會立即執行,無法在函式外被再次執行
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16
| (function IIFE(){ console.log('do something') }());
IIFE();
(function (){ console.log('do something') }());
(function (){ console.log('do something') })();
|
立即函式的用法
因為
1 2 3 4 5 6
| (function(){ var ming = '小明' console.log(ming) })()
console.log(ming)
|
使用外部變數儲存
1 2 3 4 5 6 7
| var position = (function(where){ console.log(where) return where; })('小明在這')
console.log(position)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
| var a = {};
(function(b){ b.person = '小花' })(a);
(function(c){ console.log(c.person) })(a)
console.log(a)
(function(global){ global.person = '小花' })(window);
(function(c){ console.log(person) })()
console.log(person)
|
*為什麼使用IIFE可以避免汙染全域變數?
IIFE在執行完後就會消失,在其內部所定義的變數也都會消失,就不會汙染到外部的變數
參考