《JavaScript 溫故知新 - 函數》

前言

你們好，我是逗號。祝你們週末愉快。

這段時間咱們團隊內部組織重學 JavaScript 的學習小組，旨在幫助咱們查缺補漏，鞏固本身的基礎。

若是我有哪裏寫的不對很差的地方，歡迎你們指出。

接下來讓咱們一塊兒來複習一下 JavaScript 的一等公民吧！

咱們來先看看今天文章內容的大綱內容：

❝

函數是 JavaScript 中的基本組件之一。 一個函數是 JavaScript 過程， 一組執行任務或計算值的語句。要使用一個函數，你必須將其定義在你但願調用它的做用域內。

❞

1、函數定義

JavaScript 使用關鍵字 function 定義函數。函數能夠經過聲明定義，也能夠是一個表達式。

函數的組成部分依次爲：

• 函數的名稱。
• 函數的參數列表。
• 定義函數的 JavaScript 語句，用大括號 {} 包裹的語句。

1.1 函數聲明

function fn(params) {
 // dosomething } 複製代碼

函數在聲明後不會當即執行，在咱們須要的時候經過 「函數名(參數1, 參數2...)」 的方式調用。

function calcSum(x, y) {
 return x + y; }  // 執行函數體 calcSum(1, 6); // 7 複製代碼

1.2 函數表達式

JavaScript 函數能夠經過一個表達式定義。
函數表達式能夠存儲在變量中，咱們來看看下面這個例子：

var calcSum = function (x, y) { return x + y };
複製代碼

在函數表達式存儲在變量後，變量也能夠做爲一個函數調用：

var calcSum = function (x, y) { return x + y };
var sum = calcSum(1, 6); // 7 複製代碼

上面這個例子其實是一個「匿名函數」（函數沒有名稱）。
函數存儲在變量中，不須要函數名稱，一般經過變量名來調用。

1.3 Function() 構造函數

在上面的例子中，咱們是經過使用 function 關鍵字來建立函數的。 函數一樣能夠經過使用內置的 JavaScript 函數構造器（ Function() ）來定義。

var calcSum = new Function('x', 'y', 'return x + y');
 var sum = calcSum(4, 3); // 7 複製代碼

1.4 函數聲明 VS 函數表達式

1. 在 JavaScript 中，「函數是第一等對象」，由於它不只僅能夠像對象同樣擁有屬性和方法，並且同普通對象不同的是它還能夠被調用執行。函數表達式能更直觀地看出是建立了一個對象。

2. 函數聲明在 JavaScript 解析時，進行「函數提高」，所以在同一個做用域內，函數聲明會被提高到做用域的最前面，該函數均可以進行調用。而函數表達式的值在 JavaScript 「運行時」，就已經被肯定，而且在表達式賦值完成後，該函數才能調用。

3. 函數表達式的使用範圍更廣。JavaScript 規範只是容許它們做爲頂級語句。它們能夠出如今全局代碼中，或者嵌入在其餘函數中，但它們不能出如今「循環、條件判斷、或者 try/catch/finally/switch」 語句中。

4. 函數聲明不能放在 if 語句中，在一些瀏覽器中不管條件爲 false 仍是 true ，函數都會被定義。

咱們來看看當咱們經過函數表達式和函數聲明定義一個「同名的函數」會出現什麼問題：

var showMsg; // undefined 變量提高
showMsg(); // 逗號 函數聲明被提高 var showMsg = function() {  console.log('douhao') } // 函數表達式在這裏開始覆蓋函數聲明的定義 showMsg(); // douhao function showMsg() {  console.log('逗號') } showMsg(); // douhao 這裏執行的結果是函數表達式的值 複製代碼

在咱們平常協做開發中，若是兩我的定義了同名的函數，就可能掉入這樣的 「「致命」陷阱」。出現這個陷阱的本質緣由體如今兩種類型在函數提高和運行時機（「解析時/運行時」）上的差別。

2、變量

1.1 局部變量

若是在函數體中聲明一個變量，那隻會在該函數內部可見，外部是沒法訪問到這個變量的。

function showMsg() {
 let message = "Hello, I'm 逗號"   console.log(message) }  showMsg(); // Hello, I'm 逗號  console.log(message); // Uncaught ReferenceError: message is not defined 複製代碼

1.2 全局變量

函數對外部變量擁有所有的訪問權限。函數也能夠修改外部變量。

let name = "逗號";
 function showName() {  name = "douhao"  console.log('Hello ' + name); }  console.log(name); // 逗號 在函數調用以前  showName(); // Hello douhao  console.log(name); // douhao 在函數調用以後，值被修改了 複製代碼

只有在沒有局部變量的狀況下才會使用全局變量。 若是函數內部聲明瞭同名的變量，那麼函數會 「遮蔽」 全局變量。 例以下面的例子中，函數使用局部變量的 name ，而全局變量被忽略：

let name = '逗號';
 function showName() {  let name = 'douhao';  console.log('Hello ' + name); }  showName(); // Hello douhao  console.log(name); // 逗號 由於函數在內部聲明瞭同名變量，沒有訪問修改到全局變量 複製代碼

1.3 全局變量 VS 局部變量

1. 「局部變量」指只能在當前變量聲明的函數內部調用；「全局變量」是指在整個代碼中均可以調用的變量。

2. 變量聲明須要使用 var 關鍵字聲明，可是在 JavaScript 中能夠不帶 var 「隱式」的聲明一個變量，這種變量會自動被識別爲「全局變量」。

3、函數的構成

3.1 參數

咱們可使用參數（也稱爲 「「函數參數」」 ）來將任意數據傳遞給函數。 在下面的例子中，函數接受兩個參數：name 和 text。

function showMsg(name, text) {
 console.log(name + ': ' + text) }  showMsg('逗號', 'Hello'); // 逗號: Hello 複製代碼

並非函數定義的值咱們都必須傳入，若是未提供參數的話，那麼其默認值則是 undefined 。

3.2 默認值

若是咱們不想傳遞 text ，那麼咱們能夠在聲明函數的時候給它設定一個默認值：

function showMsg(name, text = 'Hello') {
 console.log(name + ': ' + text) }  showMsg('逗號'); // 逗號: Hello 複製代碼

在這裏 'Hello' 是一個字符串，但它能夠是更復雜的表達式，而且只會在缺乏參數時纔會被計算和分配。

3.3 返回值

函數能夠將一個值返回到調用代碼中做爲結果。
最簡單的例子是將兩個值相加的結果返回：

function sum(x, y) {
 return x + y; }  let result = sum(4,3); console.log(result); // 7 複製代碼

指令 return 能夠在函數的任意位置。當執行到達時，函數中止執行，並將值返回給調用代碼。
只使用 return 但沒有返回值也是可行的。但這會致使函數當即退出。
「空值的 return 或沒有 return 的函數返回值爲 undefined」

function doNothing() {}
 console.log(doNothing() === undefined); // true  // ----------------------------------------------------------  function doNothing() { return };  console.log(doNothing() === undefined); // true 複製代碼

3.4 函數的命名

「函數就是行爲」（action），因此它們的名字一般是動詞。它應該簡短且儘量準確地描述函數的做用。這樣閱讀代碼的人就能清楚地知道這個函數的功能。

• show ：開頭的函數一般會顯示某些內容；
• get ：返回一個值；
• calc ：計算某些內容；
• create ：建立某些內容；
• check ：檢查某些內容並返回。
• ......

4、總結

• 定義函數的三種方式：使用關鍵字 function 方式、使用「匿名函數」方式、使用構造函數 Function 方式。

• 做爲參數傳遞給函數的值，會被複制到函數的「局部變量」。

• 函數能夠訪問「全局變量」。但它只能從內到外起做用。函數外部的代碼不能訪問到函數內部的「局部變量」。

• 函數能夠有返回值。也能夠沒有返回值，則返回的結果爲 undefined 。

• 函數名應該清楚的「描述函數的功能」。

參考文章

現代JavaScript教程 - 函數
函數 - JavaScript | MDN
函數聲明VS函數表達式
關於Javascript的函數聲明和函數表達式