資料結構
網路
關係型資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法學研究探索 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 函式並在其中定義了具有塊作用域的變數。如果我們嘗試從函式外部訪問在 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
在這個示例中，我們在 sample 函式內部定義了 nested_function()。我們不能在 sample() 函式外部呼叫 nested_funciton()，因為 nested_function 位於 sample 函式的作用域內。
<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 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");
在上述語法中，我們建立了建構函式的物件。
在本教程中，我們透過兩個示例學習了巢狀函式的函式作用域是如何工作的。此外，我們還學習了不同型別的函式。此外，還有一些其他型別的函式，例如遞迴函式或回撥函式，使用者可以在網際網路上探索。
708 次瀏覽
