javascript- function介紹
function
使用目的：將一段指令包起來，用在解決重複性高的運算
補充：函式
也是物件的一種，雖然我們透過typeof查詢時，會得到"function"結果，但請先記住它仍屬於object一種
- 函式組成
通常一個函式會包含三個部分：
1.函式的名稱 (也可能沒有名稱，若沒有名稱則為匿名函式)
2.括號 ( ) 中的部分，稱為「參數 (arguments) 」，參數與參數之間會用逗號 , 隔開
3.在大括號 { } 內的部分，內含需要重複執行的內容，是函式功能的主要區塊。
- 寫法如下 範例
宣告函式 函式名稱(參數)
function greet(name){
console.log(name+'歡迎光臨!');
console.log('請問你要點些什麼?');
}
執行函式
greet('Andy'); //Andy歡迎光臨!
- function帶參數
//新增一個參數要用一個逗號隔開
function count(oneNum, twoNum) {
var total = (oneNum * 10) + (twoNum * 20)
console.log('總共價錢:' + total + '元');
}
// 執行函式
count(10, 1);
說明：
oneNum這個就是參數
錯誤寫法
function count('oneNum', 'twoNum')
參數補充說明：參數在給值的過程是由左至右的
- 常見定義函式方式有下列幾種
1.函式宣告(Function Declaration)
function 名稱([參數]){
//執行事情
}
function greet(name){
console.log(name+'歡迎光臨!');
}
2.函式運算式(Function Expressions)
透過變數名稱=function([參數]){
//執行事情
}
var greet=function(name){
console.log(name+'歡迎光臨!');
}
3.透過 new Function 關鍵字建立函式
// 透過 new 來建立 Function "物件"
使用時將參數與函式的內容依序傳入 Function，就可以建立一個函式物件了。
像這樣：
var greet= new Function('name', 'console.log(name+"歡迎光臨")');
greet('Andy')//Andy歡迎光臨
備註：實務上因為每次都會進行解析"字串"動作 如：name+"歡迎光臨"，造成運作效能較差，故實務上也較少使用。
介紹完函式後，我們來認識一下全域變數與區域變數的差異吧~~
- 全域變數/區域變數 了解更多
簡言之
function內(函式之內)的稱為區域變數
function外(函式以外)的稱為全域變數
變數的有效範圍 (Scope)
變數有效範圍的最小單位是 "function"， 這個有效範圍我們通常稱它為「Scope」。
我們來看個簡單例子吧，猜猜看，這兩組 console.log() 分別會印出什麼？
答案是 150 與 1。
A：由於函式 doSomeThing() 裡面再次定義了變數 x，所以當我們執行 doSomeThing(50) 時，會將 50 作為參數傳入 doSomeThing() 的 y，那麼 return x + y 的結果自然就是 100 + 50 的 150 了。
那麼下一行再印出的 x 呢？ 為什麼是 1 而不是 100 ？
因為...
「切分變數有效範圍的最小單位是 "function" 」
而function外的var x=1，屬於全域變數，而function內的 var x=100則屬於區域變數，僅能在函式內取用。故答案才會印出1
那麼，如果 function 內部沒有 var x 呢？
很簡單，自己的 function 內如果找不到，就會一層層往外找，直到全域變數為止
接著，如果把function內的var拿掉。這兩組 console.log() 分別會印出什麼？
答案是 150 與 100。
由於在 function 內沒有重新宣告 x 變數，使得 x = 100 跑去變更了外層的同名變數 x：
導致在呼叫 doSomeThing(50) 之後再印出 x 的值自然就變成 100 囉。
接著，我們在試著將doSomeThing(50)跟console.log( x ) 順序對調，猜猜看會發生什麼事呢?
var x = 1;
var doSomeThing = function(y) {
x = 100;
return x + y;
};
console.log( x );
console.log( doSomeThing(50) );
答案：就是1與150搂~
現在我們把 var 加回去，然後在上面加一行 console.log(x) 像這樣：
現在我們已經知道 doSomeThing(50) 與 x 的值是 150 以及 1 了，
那麼要讓各位來猜猜看，在 function 內的 console.log(x) 會出現什麼？
正確答案是 undefined。
雖然我們這次在函式內部有透過 var 對變數 x 來重新做宣告，但是呢，要是不小心在 var 宣告前就使用了這個變數，這時候 JavaScript就會開始尋找變數 x 了，在自己的 scope 找... 啊，找到了！最後就變成這個樣子：
而 JavaScript 的這種特性，我們稱作「變數提升」
接著你可能會想問除了變數以外，函式有沒有提升？
答案是有的，且function提升的優先權比變數高。
- 最後一部分，補充一下函式宣告和函式運算式差異
這兩種定義方式最大的差別在於，透過「函式宣告」方式定義的函式可以在宣告前使用 (函式提升) ：
console.log(square(2)); // 4
function square(number) {
return number * number;
}
而透過「函式運算式」定義的函式則是會出現錯誤：
結論：變數提升的差別在於變數提升只有宣告被提升，而函式的提升則是包括內容完全被提升。
以上內容整理自：
留言
張貼留言