探索 JavaScript 函數作用域的概念和不同類型的 JavaScript 函數
在 JavaScript 中，不同的作用域允許我們從程式碼中的不同位置存取函數和變數。我們將在本教程中了解函數範圍。此外，我們也將探討 JavaScript 中不同類型的函數表達式。
功能範圍
當我們在 JavaScript 中建立新函數時，它也會建立該特定函數的作用域。這意味著無論我們在函數內聲明什麼變數或在其中定義巢狀函數，我們只能在函數區塊內存取它。
如果我們嘗試從函數外部存取函數區塊內部定義的變量，則會出現參考錯誤。
文法
您可以按照下列語法定義函數並了解函數作用域。
function function_name(){
var variable = 10; // variable has a function scope.
}
let variable1 = variable;
// we can't access the variable here as it has a function scope.
在上面的語法中，您可以看到我們無法存取函數外部的變量，因為函數區塊限制了它。
範例 1
在此範例中，我們建立了範例函數並在具有區塊作用域的函數內定義了變數。如果我們嘗試從函數外部存取 Sample() 函數內部定義的變量，JavaScript 會引發參考錯誤。
<html>
<body>
<h2>Function Scope in JavaScript</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
// defining the function
function sample() {
// variables with function scope.
var website = "TutorialsPoint!";
var language = "JavaScript";
output.innerHTML +=
"You are learning the " +
language +
" programming language on " +
website +
" </br>";
}
sample();
// we can't access language and website variables here.
</script>
</body>
</html>
範例 2
我們在本例中的範例函數中定義了 nested_function()。我們無法在 sample() 函數 之外呼叫 nested_funciton()，因為nested_function 在範例函數的範圍內。
<html>
<body>
<h2>Function sSope in JavaScript</h2>
<div id="output"></div>
<script>
let output = document.getElementById("output");
function sample() {
// variables with function scope.
var num = 10;
function nested_function() {
// num variables also can be accessed here as nested_function() is
//inside the scope of sample function
var string = "JavaScript";
output.innerHTML +=
"The value of the num variable is " + num + "<br/>";
output.innerHTML +=
"The value of the string variable is " + string + "</br>";
}
// we can call the nested_function() inside the sample() function only
nested_function();
// we can't access the string variable here as the scope of
//nested_function bounds it
}
sample();
</script>
</body>
</html>
JavaScript 中不同類型的函數
根據函數的定義和聲明，函數有很多種類型，我們在這裡一一學習。
正常功能
普通函數是所有 JavaScript 開發人員普遍使用的函數。我們可以使用函數名稱後面跟著函數關鍵字來定義常規函數。
常規函數保持在函數目前作用域的頂端。這意味著我們可以在定義函數之前呼叫它，但應該在執行後定義它。
文法
依照此語法定義常規函數。
function function_name(){
// function body
}
在上面的語法中，我們使用了 function 關鍵字來定義函數。 ‘function_name’是函數的名稱，我們可以在大括號內寫函數體的程式碼。
函數表達式
函數表達式的工作方式也與普通函數類似。不過，不同之處在於它沒有任何名稱，我們需要將函數表達式儲存在變數中。我們可以使用標識符來呼叫儲存它的函數。
JavaScript 逐步計算函數表達式。因此，它沒有被提升到作用域的頂部，因此我們無法在聲明之前呼叫它。
文法
依照此語法定義函數表達式。
var function_identifier = function () {
// function body
}
function_identifier();
在上面的語法中，我們只使用 function 關鍵字定義了沒有名稱的函數，並將其儲存在 function_identifier 變數中。此外，使用者還可以看到我們如何使用 function_identifier 來呼叫函數表達式。
箭頭函數
箭頭函數是在 2015 年 JavaScript 的最後一個主要修訂版 ES6 中引入的。它是一種較短的語法，用於定義沒有函數名稱的函數。另外，它被稱為表達式和匿名函數，因為它不包含它們的標識。
文法
依照此語法定義箭頭函數。
var function_identifier = (params) => {
// function body
}
function_identifier(arguments);
在上面的語法中，我們將箭頭函數表達式儲存在 function_identifier 中。此外，我們在使用 function_identifier 變數呼叫函數時傳遞了箭頭函數內的參數和參數。
關閉函數
我們可以在 JavaScript 中建立巢狀函數，並且可以使用子函數存取父函數變數。由於子函數包含存取父函數作用域中定義的所有變數的權限，因此我們可以將子函數稱為閉包函數。
文法
function parent() {
// variables of the parent
var child = () => {
// variables of child
// access variables of the parent
};
return child;
}
var child = parent();
child();
在上面的語法中，我們可以在子函數內部存取父函數的所有變量，並且父函數會傳回子函數。因此，我們可以從父函數外部間接呼叫子函數，即使它是在父函數作用域內定義的。
建構子
文法
我們可以使用建構子來建立物件。
function constructor(property){
this.property = property
}
var string = new constructor("value");
在上面的語法中，我們建立了建構函式的物件。
我們透過本教程中的兩個範例了解了巢狀函數的函數作用域如何運作。此外，我們也了解了不同類型的函數。此外，還有一些其他類型的函數，例如遞歸或回調函數，使用者可以在網路上探索。
以上是探索 JavaScript 函數作用域的概念和不同類型的 JavaScript 函數的詳細內容。更多資訊請關注PHP中文網其他相關文章！
熱AI工具
Undresser.AI Undress
人工智慧驅動的應用程序，用於創建逼真的裸體照片
AI Clothes Remover
用於從照片中去除衣服的線上人工智慧工具。
Undress AI Tool
免費脫衣圖片
Clothoff.io
AI脫衣器
AI Hentai Generator
免費產生 AI 無盡。
熱門文章
熱工具
記事本++7.3.1
好用且免費的程式碼編輯器
SublimeText3漢化版
中文版，非常好用
禪工作室 13.0.1
強大的PHP整合開發環境
Dreamweaver CS6
視覺化網頁開發工具
SublimeText3 Mac版
神級程式碼編輯軟體(SublimeText3)
熱門話題
如何在瀏覽器中優化JavaScript代碼以進行性能？
Mar 18, 2025 pm 03:14 PM
本文討論了在瀏覽器中優化JavaScript性能的策略，重點是減少執行時間並最大程度地減少對頁面負載速度的影響。
如何使用瀏覽器開發人員工具有效調試JavaScript代碼？
Mar 18, 2025 pm 03:16 PM
本文討論了使用瀏覽器開發人員工具的有效JavaScript調試，專注於設置斷點，使用控制台和分析性能。
誰得到更多的Python或JavaScript？
Apr 04, 2025 am 12:09 AM
Python和JavaScript開發者的薪資沒有絕對的高低，具體取決於技能和行業需求。 1.Python在數據科學和機器學習領域可能薪資更高。 2.JavaScript在前端和全棧開發中需求大，薪資也可觀。 3.影響因素包括經驗、地理位置、公司規模和特定技能。
如何使用源地圖調試縮小JavaScript代碼？
Mar 18, 2025 pm 03:17 PM
本文說明瞭如何使用源地圖通過將其映射回原始代碼來調試JAVASCRIPT。它討論了啟用源地圖，設置斷點以及使用Chrome DevTools和WebPack之類的工具。
如何使用JavaScript將具有相同ID的數組元素合併到一個對像中？
Apr 04, 2025 pm 05:09 PM
如何在JavaScript中將具有相同ID的數組元素合併到一個對像中？在處理數據時，我們常常會遇到需要將具有相同ID�...
console.log輸出結果差異：兩次調用為何不同？
Apr 04, 2025 pm 05:12 PM
深入探討console.log輸出差異的根源本文將分析一段代碼中console.log函數輸出結果的差異，並解釋其背後的原因。 �...
