javascript核心篇 - 函式 partI

javascript核心篇 - 函式 partI

最近在上六角學院的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; //將接收的參數回傳出去
}

//表達式 data會接收到來自afunction的return
var data = afunction('外部參數');

console.log(data);
//函式的結果: this為window(全域) localVariable為'區域變數'(不變) 回傳:收到了外部參數

當使用function這個詞來宣告函式時,該程式碼就會成為函式,這個函式可以被呼叫,裡面包含程式碼片段,也會有名稱(但不一定,若沒有名稱的話就是匿名函式)

函式陳述式 & 表達式

陳述式

1
2
3
4
5
6
7
8
//有名稱
function functionA(){
//some code...
console.log('陳述式')
console.log(functionA)
}
//呼叫
functionA();


函式有名稱(f functionA)

表達式
在這裡,關鍵詞function後面沒有接名稱,被稱為匿名函式
注意:不是所有表達式宣告的函式都是匿名函式

1
2
3
4
5
6
7
8
9
//有名稱
var functionB = function(){
//some code...
console.log('表達式')
console.log(functionB)
}
//呼叫
functionB();
//anotherFunction是一個變數,它接收的是後面所接函式的參考路徑


函式沒有名稱(f(){})

1
2
3
4
5
6
7
8
9
10
var functionC = function functionD(){
//some code...
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(); //IIFE is not defined

//匿名
(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) //ming is not defined

使用外部變數儲存

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) //a {person:'小花'}
//a b c皆為同一物件

//將全域(window物件)傳入函式, 新增一個全域屬性為person
(function(global){
global.person = '小花'
})(window);

(function(c){
console.log(person)
})()


console.log(person) //小花

*為什麼使用IIFE可以避免汙染全域變數?
IIFE在執行完後就會消失,在其內部所定義的變數也都會消失,就不會汙染到外部的變數

參考

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×