JavaScript 函数对象与 NFE:你必须知道的秘密武器!

一、函数对象:不仅仅是代码块

在 JavaScript 中,函数对象继承自 Object,因此它们拥有所有对象的特性。这意味着:

  • 函数可以拥有属性: 你可以像给普通对象添加属性一样,给函数添加属性。

    javascript 复制代码
    function greet(name) {
      console.log(`Hello, ${name}!`);
    }
    
    greet.description = "Greets a person by name.";
    console.log(greet.description); // 输出: Greets a person by name.
  • 函数可以拥有方法: 函数对象继承了一些内置方法,例如 call(), apply(), 和 bind()。这些方法允许你控制函数执行时的 this 上下文和参数。

    javascript 复制代码
    function sayHello() {
      console.log(`Hello, ${this.name}!`);
    }
    
    const person = { name: "Alice" };
    sayHello.call(person); // 输出: Hello, Alice!
  • 函数可以被赋值给变量: 这是函数作为一等公民的关键特性。你可以将函数赋值给变量,然后通过变量名来调用它。

    javascript 复制代码
    const myFunc = function() {
      console.log("这是一个函数变量.");
    };
    
    myFunc(); // 输出: 这是一个函数变量.
  • 函数可以作为参数传递给其他函数: 这使得高阶函数(接受函数作为参数或返回函数的函数)成为可能,例如 map(), filter(), 和 reduce()

    javascript 复制代码
    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):命名函数表达式的威力

NFE 是一种特殊的函数表达式,它在函数表达式中给函数一个名称。

  • 语法:

    javascript 复制代码
    const myFunc = function functionName() {
      // 函数体
    };

    注意:functionName 是 NFE 的名称。

  • 作用域: NFE 的名称 functionName 只能在函数内部访问。 这意味着它不能在函数外部被调用或引用。

    javascript 复制代码
    const factorial = function fact(n) {
      if (n <= 1) {
        return 1;
      }
      return n * fact(n - 1); // 只能在函数内部使用 'fact'
    };
    
    console.log(factorial(5)); // 输出: 120
    // console.log(fact(5)); // 报错: fact is not defined
  • 与函数声明的区别: 函数声明会被提升,这意味着你可以在声明之前调用它们。 NFE 不会被提升,你必须在定义之后才能使用它们。

    javascript 复制代码
    // 函数声明 (可以正常工作)
    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
相关推荐
A_nanda20 分钟前
Vue项目升级
前端·vue3·vue2
SuperEugene30 分钟前
Axios 接口请求规范实战:请求参数 / 响应处理 / 异常兜底,避坑中后台 API 调用混乱|API 与异步请求规范篇
开发语言·前端·javascript·vue.js·前端框架·axios
abigale031 小时前
【浏览器 API / 网络请求 / 文件处理】前端文件上传全流程:从基础上传到断点续传
前端·typescript·文件上传·vue cli
子兮曰1 小时前
Bun v1.3.11 官方更新全整理:新增功能、关键修复与升级验证
javascript·node.js·bun
Setsuna_F_Seiei1 小时前
AI 对话应用之页面滚动交互的实现
前端·javascript·ai编程
新缸中之脑2 小时前
追踪来自Agent的Web 流量
前端
wefly20172 小时前
从使用到原理,深度解析m3u8live.cn—— 基于 HLS.js 的 M3U8 在线播放器实现
java·开发语言·前端·javascript·ecmascript·php·m3u8
英俊潇洒美少年3 小时前
vue如何实现react useDeferredvalue和useTransition的效果
前端·vue.js·react.js
kyriewen113 小时前
给浏览器画个圈:CSS contain 如何让页面从“卡成PPT”变“丝滑如德芙”
开发语言·前端·javascript·css·chrome·typescript·ecmascript
英俊潇洒美少年3 小时前
react19和vue3的优缺点 对比
前端·javascript·vue.js·react.js