【JavaScript】函数声明和函数表达式的区别

文章目录

    • 一、函数声明
      • 1. 定义方式
      • 2. 作用域提升(Hoisting)
      • 3. 块级作用域
    • 二、函数表达式
      • 1. 定义方式
      • 2. 作用域提升(Hoisting)
      • 3. 自引用
    • 三、其他区别
      • 1. 函数名
      • 2. 可读性和代码组织
      • 3. 使用场景
    • 四、总结
      • 函数声明
      • 函数表达式

在JavaScript中,函数是核心组成部分,而定义函数的方法主要有两种:函数声明和函数表达式。虽然这两种方式在功能上类似,但它们在语法、作用域提升(hoisting)、使用场景等方面存在显著区别。下面我们将深入探讨这两种定义方式的不同之处。

一、函数声明

1. 定义方式

函数声明使用function关键字直接定义一个函数。函数声明必须包含函数名,并且函数名可以在代码的其他地方引用和调用。

function greet() {return 'Hello, world!';
}

函数声明的语法简单明了,定义后可以在整个作用域中引用。

2. 作用域提升(Hoisting)

函数声明会被提升到当前作用域的顶部。这意味着无论函数声明在代码中出现的位置,你都可以在声明之前调用它。

console.log(greet()); // 输出:Hello, world!function greet() {return 'Hello, world!';
}

在上述示例中,即使在函数声明之前调用greet,代码仍能正常运行。

3. 块级作用域

函数声明在块级作用域(如iffor语句中)内部也会被提升到该块的顶部:

if (true) {function greet() {return 'Hello, world!';}
}console.log(greet()); // 在严格模式下,这会导致错误

在非严格模式下,上面的代码可能会正常工作,但在严格模式下会抛出错误。因此,在块级作用域中使用函数声明时需谨慎。

二、函数表达式

1. 定义方式

函数表达式也使用function关键字定义一个函数,但该函数被赋值给一个变量。函数表达式可以是匿名的,也可以具名。

// 匿名函数表达式
const greet = function() {return 'Hello, world!';
};// 具名函数表达式
const greet = function greetFunction() {return 'Hello, world!';
};

函数表达式的定义方式允许将函数作为一个值赋给变量,提供了更大的灵活性。

2. 作用域提升(Hoisting)

函数表达式不会被提升,这意味着你必须在定义函数表达式之后才能调用它。

console.log(greet()); // 报错:greet is not definedconst greet = function() {return 'Hello, world!';
};

在上述示例中,若在函数表达式定义之前调用greet,将会抛出错误,因为此时greet尚未定义。

3. 自引用

具名函数表达式在函数内部可以通过函数名进行自引用,这在递归调用时特别有用。

const factorial = function factorial(n) {if (n <= 1) return 1;return n * factorial(n - 1);
};console.log(factorial(5)); // 输出:120

具名函数表达式提供了在递归函数内部自我引用的能力,使代码更具可读性和可维护性。

三、其他区别

1. 函数名

函数声明必须有函数名,而函数表达式可以是匿名的。具名函数表达式在调试时提供更有用的错误信息,但在大多数情况下,匿名函数表达式更常见。

2. 可读性和代码组织

函数声明通常用于定义主要功能或模块,因其语法直观,且可以在代码的任何地方调用。函数表达式则更常用于回调函数或立即调用的函数表达式(IIFE),因为它们更灵活。

// 立即调用的函数表达式(IIFE)
(function() {console.log('This is an IIFE');
})();

立即调用的函数表达式(IIFE)用于创建独立的作用域,避免污染全局命名空间。

3. 使用场景

函数声明适合定义独立的、可复用的函数,而函数表达式则更适合传递给其他函数作为参数或定义对象的方法。

// 使用函数表达式作为回调函数
setTimeout(function() {console.log('Hello after 1 second');
}, 1000);// 作为对象的方法
const person = {name: 'Alice',greet: function() {console.log('Hello, ' + this.name);}
};
person.greet(); // 输出:Hello, Alice

函数表达式通常用于回调函数和对象方法,使代码更模块化和灵活。

四、总结

函数声明

  • 定义方式:使用function关键字直接定义一个命名函数。
  • 作用域提升:函数声明会被提升到当前作用域的顶部。
  • 使用场景:适合定义主要功能或模块,代码清晰直观。

函数表达式

  • 定义方式:使用function关键字定义一个函数并将其赋值给变量,可以是匿名函数或具名函数。
  • 作用域提升:不会被提升,必须在定义之后调用。
  • 使用场景:适合作为回调函数、立即调用的函数表达式或对象的方法,灵活性高。

推荐:

  • JavaScript
  • react
  • vue

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/386919.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【大模型系列】Video-LaVIT(2024.06)

Paper&#xff1a;https://arxiv.org/abs/2402.03161Github&#xff1a;https://video-lavit.github.io/Title&#xff1a;Video-LaVIT: Unified Video-Language Pre-training with Decoupled Visual-Motional TokenizationAuthor&#xff1a;Yang Jin&#xff0c; 北大&#x…

Java面试八股之@Qualifier的作用

Qualifier的作用 Qualifier 是 Spring 框架中的一个非常有用的注解&#xff0c;它主要用于解决在依赖注入过程中出现的歧义问题。当 Spring 容器中有多个相同类型的 Bean 时&#xff0c;Qualifier 可以帮助指明应该使用哪一个具体的 Bean 进行注入。 Qualifier 的作用&#x…

外设购物平台

目 录 一、系统分析 二、系统设计 2.1 系统功能设计 2.2 数据库设计 三、系统实现 3.1 注册功能 3.2 登录功能 3.3 分页查询所有商品信息功能 3.4 分页条件&#xff08;精确、模糊&#xff09;查询商品信息功能 3.5 购物车功能 3.6 订单管理功能 四、项…

【Opencv】模糊

消除噪声 用该像素周围的平均值代替该像素值 4个函数 blur():最经典的 import os import cv2 img cv2.imread(os.path.join(.,dog.jpg)) k_size 7 #窗口大小&#xff0c;数字越大&#xff0c;模糊越强 img_blur cv2.blur(img,(k_size,k_size)) #窗口是正方形&#xff…

云计算实训16——关于web,http协议,https协议,apache,nginx的学习与认知

一、web基本概念和常识 1.Web Web 服务是动态的、可交互的、跨平台的和图形化的为⽤户提供的⼀种在互联⽹上浏览信息的服务。 2.web服务器&#xff08;web server&#xff09; 也称HTTP服务器&#xff08;HTTP server&#xff09;&#xff0c;主要有 Nginx、Apache、Tomcat 等。…

C#使用csvhelper实现csv的操作

新建控制台项目 安装csvhelper 33.0.1 写入csv 新建Foo.cs namespace CsvSut02;public class Foo {public int Id { get; set; }public string Name { get; set; } }批量写入 using System.Globalization; using CsvHelper; using CsvHelper.Configuration;namespace Csv…

[数据集][目标检测]金属罐缺陷检测数据集VOC+YOLO格式8095张4类别

数据集格式&#xff1a;Pascal VOC格式YOLO格式(不包含分割路径的txt文件&#xff0c;仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数)&#xff1a;8095 标注数量(xml文件个数)&#xff1a;8095 标注数量(txt文件个数)&#xff1a;8095 标注…

使用Process Explorer和Dependency Walker排查dll动态库加载失败的问题

目录 1、问题描述 2、如何调试Release版本的代码&#xff1f; 3、使用Process Explorer查看exe主程序加载的dll库列表&#xff0c;发现mediaplay.dll没有加载起来 4、使用Dependency Walker查看rtcmpdll.dll的库依赖关系和接口调用情况&#xff0c;定位问题 4.1、使用Depe…

Javascript面试基础6【每日更新10】

Gulp gulp是前端开发过程中一种基于流的代码构建工具&#xff0c;是自动化项目的构建利器;它不仅能对网站资源进行优化&#xff0c;而且在开发过程中很多重复的任务能够使用正确的工具自动完成 Gulp的核心概念:流 流&#xff0c;简单来说就是建立在面向对象基础上的一种抽象的…

多微信聚合神器:高效沟通,一个界面全搞定!

大家都知道&#xff0c;频繁的来回切换微信&#xff0c;不仅浪费时间&#xff0c;还容易错过重要的信息。 今天&#xff0c;我要向大家推荐一款多微信管理神器——个微管理系统&#xff0c;助你实现统一管理&#xff0c;聚合聊天&#xff0c;让沟通变得更加高效。 1、网页扫码…

基于MindIE实现通义千问Qwen推理加速

一、昇腾开发者平台申请镜像 登录Ascend官网昇腾社区-官网丨昇腾万里 让智能无所不及 二、登录并下载mindie镜像 #登录docker login -u XXX#密码XXX#下载镜像docker pull XXX 三、下载Qwen的镜像 使用wget命令下载Qwen1.5-0.5B-Chat镜像&#xff0c;放在/mnt/Qwen/Qwen1.5-…

【无标题】Git(仓库,分支,分支冲突)

Git 一种分布式版本控制系统&#xff0c;用于跟踪和管理代码的变更 一&#xff0e;Git的主要功能&#xff1a; 二&#xff0e;准备git机器 修改静态ip&#xff0c;主机名 三&#xff0e;git仓库的建立&#xff1a; 1.安装git [rootgit ~]# yum -y install git 2.创建一个…

【策略工厂模式】记录策略工厂模式简单实现

策略工厂模式 1. 需求背景2. 代码实现2.1 定义基类接口2.2 排序策略接口定义2.3 定义抽象类&#xff0c;实现策略接口2.4 具体的排序策略实现类2.5 实现策略工厂类2.6 控制类 3. 启动测试4. 总结 1. 需求背景 现在需要你创建一个策略工厂类&#xff0c;来根据策略实现各种排序…

【JAVA】记录一次前端无能造成的 线上bug

有一个需求是 当方式切换 垫资时 清空 当前所选细单商品 但是前端的奇葩 操作是&#xff0c;只是在页面上清空 细单。 不请求 后台删除 细单 让前端 必须 清空同时 请求后台 删除细单 但是 该前端 技术不行&#xff0c; 嫌麻烦 不做 只好 后台 判断该类型时 进行删除操作…

AutoMQ 开源可观测性方案:夜莺 Flashcat

01 引言 在现代企业中&#xff0c;随着数据处理需求的不断增长&#xff0c;AutoMQ [1] 作为一种高效、低成本的流处理系统&#xff0c;逐渐成为企业实时数据处理的关键组件。然而&#xff0c;随着集群规模的扩大和业务复杂性的增加&#xff0c;确保 AutoMQ 集群的稳定性、高可…

权限管理的概述以及vue开发前端的路由、菜单、按钮权限控制实现方案

1. 权限管理概念 1.1 权限定义 权限管理是确保用户只能访问被授权资源的机制。在计算机系统中&#xff0c;权限通常指对特定数据或功能的访问权。权限的设置和控制对于保护数据安全和系统安全至关重要。 1.2 前端权限控制重要性 前端权限控制是用户与应用交互的第一道防线。…

黑马头条Day12-项目部署_持续集成

一、今日内容介绍 1. 什么是持续集成 持续集成&#xff08;Continuous integration&#xff0c;简称CI&#xff09;&#xff0c;指的是频繁地&#xff08;一天多次&#xff09;将代码集成到主干。 持续集成的组成要素&#xff1a; 一个自动构建过程&#xff0c;从检出代码、…

jdk版本管理利器-sdkman

1.什么是sdkman&#xff1f; sdkman是一个轻量级、支持多平台的开源开发工具管理器&#xff0c;可以通过它安装任意主流发行版本&#xff08;例如OpenJDK、Kona、GraalVM等等&#xff09;的任意版本的JDK。通过下面的命令可以轻易安装sdkman: 2.安装 curl -s "https://…

什么是 5G?

什么是 5G&#xff1f; 5G 是第五代无线蜂窝技术&#xff0c;与以前的网络相比&#xff0c;它提供了更高的上传和下载速度、更一致的连接以及更高的容量。5G 比目前流行的 4G 网络更快、更可靠&#xff0c;并有可能改变我们使用互联网访问应用程序、社交网络和信息的方式。例如…

通过 WSL 2 在Windows 上挂载 Linux 磁盘

原文查看 曾为了传输或者共享不同系统的文件频繁地在 Windows 和 Linux 系统之间切换&#xff0c;效率过低&#xff0c;所以尝试通过 WSL 2 在Windows 上挂载 Linux 磁盘。 先决条件 需要在Windows 10 2004 及更高版本&#xff08;Build 19041 及更高版本&#xff09;或 Win…