以下內容為學習記錄，可以參考 MDN 原文。

環境

• vscode 1.46
• Microsoft Edge 83

概念

在JavaScript中另一個基本概念是函式, 它允許你在一個程式碼塊中儲存一段用於處理單任務的程式碼，
然後在任何你需要的時候用一個簡短的命令來呼叫，而不是把相同的程式碼寫很多次。

瀏覽器內建函式

avaScript有許多內建的函式，可以讓您做很多有用的事情，而無需自己編寫所有的程式碼。
事實上,許多呼叫（執行或者執行的專業詞語）瀏覽器內建函式時呼叫的程式碼並不是使用JavaScript來編寫，
大多數呼叫瀏覽器後臺的函式的程式碼，是使用像C++這樣更低階的系統語言編寫的，而不是像JavaScript這樣的web程式語言。

請記住，這些內建瀏覽器函式不是核心JavaScript語言的一部分——被定義為瀏覽器API的一部分，
它建立在預設語言之上，以提供更多的功能（請參閱本課程的早期部分以獲得更多的描述）。
我們將在以後的模組中更詳細地使用瀏覽器API。

函式與方法

程式設計師把函式稱為物件方法（method）的一部分，你還不必瞭解JavaScript中已建構的物件在更深層次上是如何運作的。
在我們繼續前進之前，我們需要澄清一些有關方法和函式概念之間可能存在的誤會，
當你在網路上瀏覽相關資訊的時候，你很可能會碰上這兩個術語。

到目前為止我們所使用的內建程式碼同屬於這兩種形式：函式和方法。
你可以在 這裡 檢視內建函式，內建物件以及其相關方法的完整列表。

嚴格說來，內建瀏覽器函式並不是函式——它們是方法。
這聽起來有點可怕和令人困惑，但不要擔心,函式和方法在很大程度上是可互換的，至少在我們的學習階段是這樣的。

二者區別在於方法是在物件內定義的函式。
瀏覽器內建函式（方法）和變數（稱為屬性）儲存在結構化物件內，以使程式碼更加高效，易於處理。

自定義函式

function draw() {
  ctx.clearRect(0,0,WIDTH,HEIGHT);
  for (var i = 0; i < 100; i++) {
    ctx.beginPath();
    ctx.fillStyle = 'rgba(255,0,0,0.5)';
    ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math.PI);
    ctx.fill();
  }
}
 

呼叫函式

使用括號來呼叫函式。

function myFunction() {
  alert('hello');
}

myFunction()
// calls the function once

匿名函式

var myButton = document.querySelector('button');

myButton.onclick = function() {
  alert('hello');
}

函式引數

一些函式需要在呼叫它們時指定引數 ——這些引數值需要放在函式括號內，才能正確地完成其工作。

var myArray = ['I', 'love', 'chocolate', 'frogs'];
var madeAString = myArray.join(' ');
// returns 'I love chocolate frogs'
var madeAString = myArray.join();
// returns 'I,love,chocolate,frogs'

函式作用域和衝突

我們來談一談 scope 即作用域，這是處理函式時一個非常重要的概念。
當你建立一個函式時，函式內定義的變數和其他東西都在它們自己的單獨的範圍內,
意味著它們被鎖在自己獨立的隔間中, 不能被函式外的程式碼訪問。

所有函式的最外層被稱為全域性作用域。在全域性作用域內定義的值可以在任意地方訪問。

JavaScript 由於各種原因而建立，但主要是由於安全性和組織性。
有時您不希望變數可以在程式碼中的任何地方訪問，您從其他地方呼叫的外部指令碼可能會開始搞亂您的程式碼並導致問題，
因為它們恰好與程式碼的其他部分使用了相同的變數名稱，造成衝突。這可能是惡意的，或者是偶然的。

<!-- Excerpt from my HTML -->
<script src="first.js"></script>
<script src="second.js"></script>
<script>
  greeting();
</script>
// first.js
var name = 'Chris';
function greeting() {
  alert('Hello ' + name + ': welcome to our company.');
}
// second.js
var name = 'Zaptec';
function greeting() {
  alert('Our company is called ' + name + '.');
}