在 JavaScript 中，不同的作用域允許我們從代碼中的不同位置訪問函數(shù)和變量。我們將在本教程中了解函數(shù)范圍。此外，我們還將探討 JavaScript 中不同類型的函數(shù)表達式。
功能范圍
當我們在 JavaScript 中創(chuàng)建一個新函數(shù)時，它還會創(chuàng)建該特定函數(shù)的作用域。這意味著無論我們在函數(shù)內聲明什么變量或在其中定義嵌套函數(shù)，我們只能在函數(shù)塊內訪問它。
如果我們嘗試從函數(shù)外部訪問函數(shù)塊內部定義的變量，則會出現(xiàn)引用錯誤。
語法
您可以按照以下語法來定義函數(shù)并了解函數(shù)作用域。
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.
登錄后復制
在上面的語法中，您可以看到我們無法訪問函數(shù)外部的變量，因為函數(shù)塊限制了它。
示例 1
在此示例中，我們創(chuàng)建了示例函數(shù)并在具有塊作用域的函數(shù)內定義了變量。如果我們嘗試從函數(shù)外部訪問 Sample() 函數(shù)內部定義的變量，JavaScript 會引發(fā)引用錯誤。
<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
我們在本例中的示例函數(shù)中定義了 nested_function()。我們無法在 sample() 函數(shù) 之外調用 nested_funciton()，因為nested_function 在示例函數(shù)的范圍內。
<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 中不同類型的函數(shù)
根據(jù)函數(shù)的定義和聲明，函數(shù)有很多種類型，我們在這里一一學習。
正常功能
普通函數(shù)是所有 JavaScript 開發(fā)人員普遍使用的函數(shù)。我們可以使用函數(shù)名稱后跟函數(shù)關鍵字來定義常規(guī)函數(shù)。
常規(guī)函數(shù)保持在函數(shù)當前作用域的頂部。這意味著我們可以在定義函數(shù)之前調用它，但應該在執(zhí)行之后定義它。
語法
按照此語法定義常規(guī)函數(shù)。
function function_name(){
// function body
}
登錄后復制
在上面的語法中，我們使用了 function 關鍵字來定義函數(shù)。 ‘function_name’是函數(shù)的名稱，我們可以在大括號內編寫函數(shù)體的代碼。
函數(shù)表達式
函數(shù)表達式的工作方式也與普通函數(shù)類似。不過，不同之處在于它沒有任何名稱，我們需要將函數(shù)表達式存儲在變量中。我們可以使用標識符來調用存儲它的函數(shù)。
JavaScript 逐步計算函數(shù)表達式。因此，它沒有被提升到作用域的頂部，因此我們無法在聲明之前調用它。
語法
按照此語法定義函數(shù)表達式。
var function_identifier = function () {
// function body
}
function_identifier();
登錄后復制
在上面的語法中，我們僅使用 function 關鍵字定義了沒有名稱的函數(shù)，并將其存儲在 function_identifier 變量中。此外，用戶還可以看到我們如何使用 function_identifier 來調用函數(shù)表達式。
箭頭函數(shù)
箭頭函數(shù)是在 2015 年 JavaScript 的最后一個主要修訂版 ES6 中引入的。它是一種較短的語法，用于定義沒有函數(shù)名稱的函數(shù)。另外，它被稱為表達式和匿名函數(shù)，因為它不包含它們的標識。
語法
按照此語法定義箭頭函數(shù)。
var function_identifier = (params) => {
// function body
}
function_identifier(arguments);
登錄后復制
在上面的語法中，我們將箭頭函數(shù)表達式存儲在 function_identifier 中。此外，我們在使用 function_identifier 變量調用函數(shù)時傳遞了箭頭函數(shù)內的參數(shù)和參數(shù)。
關閉函數(shù)
我們可以在 JavaScript 中創(chuàng)建嵌套函數(shù)，并可以使用子函數(shù)訪問父函數(shù)變量。由于子函數(shù)包含訪問父函數(shù)作用域中定義的所有變量的權限，因此我們可以將子函數(shù)稱為閉包函數(shù)。
語法
function parent() {
// variables of the parent
var child = () => {
// variables of child
// access variables of the parent
};
return child;
}
var child = parent();
child();
登錄后復制
在上面的語法中，我們可以在子函數(shù)內部訪問父函數(shù)的所有變量，并且父函數(shù)返回子函數(shù)。因此，我們可以從父函數(shù)外部間接調用子函數(shù)，即使它是在父函數(shù)作用域內定義的。
構造函數(shù)
語法
我們可以使用構造函數(shù)來創(chuàng)建對象。
function constructor(property){
this.property = property
}
var string = new constructor("value");
登錄后復制
在上面的語法中，我們創(chuàng)建了構造函數(shù)的對象。
我們通過本教程中的兩個示例了解了嵌套函數(shù)的函數(shù)作用域如何工作。此外，我們還了解了不同類型的函數(shù)。此外，還有一些其他類型的函數(shù)，例如遞歸或回調函數(shù)，用戶可以在互聯(lián)網(wǎng)上探索。
以上就是探索 JavaScript 函數(shù)作用域的概念和不同類型的 JavaScript 函數(shù)的詳細內容，更多請關注www.92cms.cn其它相關文章！
