探索 JavaScript 函數作用域的概念和不同類型的 JavaScript 函數-js教程-PHP中文網

首頁

web前端

js教程

探索 JavaScript 函數作用域的概念和不同類型的 JavaScript 函數

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 07, 2023 pm 02:41 PM

探索 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 id="Function-Scope-in-JavaScript">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 id="Function-sSope-in-JavaScript">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中文網其他相關文章！

陳述

本文轉載於：tutorialspoint。如有侵權，請聯絡admin@php.cn刪除

Python vs. JavaScript：社區，圖書館和資源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社區、庫和資源方面的對比各有優劣。 1)Python社區友好，適合初學者，但前端開發資源不如JavaScript豐富。 2)Python在數據科學和機器學習庫方面強大，JavaScript則在前端開發庫和框架上更勝一籌。 3)兩者的學習資源都豐富，但Python適合從官方文檔開始，JavaScript則以MDNWebDocs為佳。選擇應基於項目需求和個人興趣。

從C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

從C/C 轉向JavaScript需要適應動態類型、垃圾回收和異步編程等特點。 1）C/C 是靜態類型語言，需手動管理內存，而JavaScript是動態類型，垃圾回收自動處理。 2）C/C 需編譯成機器碼，JavaScript則為解釋型語言。 3）JavaScript引入閉包、原型鍊和Promise等概念，增強了靈活性和異步編程能力。

JavaScript引擎：比較實施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和執行JavaScript代碼時，效果會有所不同，因為每個引擎的實現原理和優化策略各有差異。 1.詞法分析：將源碼轉換為詞法單元。 2.語法分析：生成抽象語法樹。 3.優化和編譯：通過JIT編譯器生成機器碼。 4.執行：運行機器碼。 V8引擎通過即時編譯和隱藏類優化，SpiderMonkey使用類型推斷系統，導致在相同代碼上的性能表現不同。

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。