探索 JavaScript 函數作用域的概念和不同類型的 JavaScript 函數
- WBOY轉載
- 2023-09-07 14:41:021098瀏覽
在 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中文網其他相關文章！