在 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 函數的詳細內容，更多請關注www.92cms.cn其它相關文章！
