JavaScript 函數(shù)對象與 NFE:你必須知道的秘密武器!

一、函數(shù)對象:不僅僅是代碼塊

在 JavaScript 中,函數(shù)對象繼承自 Object,因此它們擁有所有對象的特性。這意味著:

  • 函數(shù)可以擁有屬性: 你可以像給普通對象添加屬性一樣,給函數(shù)添加屬性。

    function greet(name) {
      console.log(`Hello, ${name}!`);
    }
    
    greet.description = "Greets a person by name.";
    console.log(greet.description); // 輸出: Greets a person by name.
    
  • 函數(shù)可以擁有方法: 函數(shù)對象繼承了一些內(nèi)置方法,例如 call(), apply(), 和 bind()。這些方法允許你控制函數(shù)執(zhí)行時的 this 上下文和參數(shù)。

    function sayHello() {
      console.log(`Hello, ${this.name}!`);
    }
    
    const person = { name: "Alice" };
    sayHello.call(person); // 輸出: Hello, Alice!
    
  • 函數(shù)可以被賦值給變量: 這是函數(shù)作為一等公民的關(guān)鍵特性。你可以將函數(shù)賦值給變量,然后通過變量名來調(diào)用它。

    const myFunc = function() {
      console.log("這是一個函數(shù)變量.");
    };
    
    myFunc(); // 輸出: 這是一個函數(shù)變量.
    
  • 函數(shù)可以作為參數(shù)傳遞給其他函數(shù): 這使得高階函數(shù)(接受函數(shù)作為參數(shù)或返回函數(shù)的函數(shù))成為可能,例如 map(), filter(), 和 reduce()。

    function operate(num1, num2, operation) {
      return operation(num1, num2);
    }
    
    function add(a, b) {
      return a + b;
    }
    
    const result = operate(5, 3, add);
    console.log(result); // 輸出: 8
    

二、NFE (Named Function Expression):命名函數(shù)表達式的威力

NFE 是一種特殊的函數(shù)表達式,它在函數(shù)表達式中給函數(shù)一個名稱。

  • 語法:

    const myFunc = function functionName() {
      // 函數(shù)體
    };
    

    注意:functionName 是 NFE 的名稱。

  • 作用域: NFE 的名稱 functionName 只能在函數(shù)內(nèi)部訪問。 這意味著它不能在函數(shù)外部被調(diào)用或引用。

    const factorial = function fact(n) {
      if (n <= 1) {
        return 1;
      }
      return n * fact(n - 1); // 只能在函數(shù)內(nèi)部使用 'fact'
    };
    
    console.log(factorial(5)); // 輸出: 120
    // console.log(fact(5)); // 報錯: fact is not defined
    
  • 與函數(shù)聲明的區(qū)別: 函數(shù)聲明會被提升,這意味著你可以在聲明之前調(diào)用它們。 NFE 不會被提升,你必須在定義之后才能使用它們。

    // 函數(shù)聲明 (可以正常工作)
    console.log(add(2, 3)); // 輸出: 5
    function add(a, b) {
      return a + b;
    }
    
    // NFE (會報錯)
    // console.log(multiply(2, 3)); // 報錯: Cannot access 'multiply' before initialization
    const multiply = function multiply(a, b) {
      return a * b;
    };
    console.log(multiply(2, 3)); // 輸出: 6
    
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容