学弟的一张图,让我重学了一遍函数声明和函数表达式!

简介: 首先我们要知道,当函数声明与变量命名冲突的时候,要保持着**函数声明优先的原则**

前言

今天下午,在我们微信群里,学弟突然发出来这样一个图:
image.png

我点开一看,这不是函数声明跟函数表达式的知识点吗?前一阵子还看过相关文章。

看了几眼,我说到:第一个输出应该是最后的函数声明

然后呢? 没有然后了,真的,犹豫代表着此时的我不会。

看来卷的还不够!

先贴上答案,如果你跟我一样犹豫不决,不知道结果,那么跟我一起再次学习一遍吧。

image.png

开始复习

首先,确定问题:函数表达式和函数声明的区别,以及困扰住我们的优先问题

函数声明和函数表达式的区别

函数声明

首先我们要知道,当函数声明与变量命名冲突的时候,要保持着函数声明优先的原则

fn();
function fn () {
    console.log(‘fn’);
}
var fn = 2;

例如这样,不会报错,会输出fn。

如果你不知道为什么调用函数可以在函数声明之前,看这里

是因为javascript代码是一段一段预载的,在一段代码预载完成后,会把函数声明提前到代码段的前面执行,以便在代码段的任何地方调用,所以前面的代码无错

那么,多个同名的函数声明,会如何呢?我们接着来看一下

fn();
function fn () {
    console.log(‘1’);
}
function fn () {
    console.log(‘2’);
}

输出结果为2。这是因为有多个函数声明的时候,是由最后的函数声明来替代前面的

这也是我上文中读了几眼代码直接说第一个输出为最后的函数声明的原因!

函数表达式

fn();
var fn = function () {
    console.log('fn');
}

有用过的同学可能看到这里,说我知道,完后写出了上面这段代码,但其实这段代码是不对的,会爆出fn is not a function这个错误。

这是什么原因呢?这其实就是函数声明和函数表达式的区别之一

因为函数表达式相当于把一个函数当做值,赋予一个变量,而这个变量在未声明的时候,是不能使用的

正确的函数表达式:

var fn = function () {
    console.log('fn');
}
fn();

复习回来,再战!

先把代码贴出来方便阅读:

// 下面的代码输出什么
function method(foo){
    console.log(foo)
    var foo = 'A'
    var foo = function () {
        console.log('B')
    }
    foo()
    function foo() {
        console.log('C')
    }
    foo()
}
var foo = 1
method(foo)

经过了上面的复习,我们知道,JavaScript会将函数声明提前,所以我们来整理一下这段代码:

function method(foo){
    function foo() {
        console.log('C')
    }
    console.log(foo)
    var foo = 'A'
    var foo = function () {
        console.log('B')
    }
    foo()
    foo()
}
var foo = 1
method(foo)

现在,再利用我们刚刚学的知识,来分析打印的都是什么数据:

首先,第一个打印的是我们输出C的foo函数,第二个和第三个调用foo函数的时候,函数表达式的变量已经声明了!所以函数发生了覆盖,现在的foo函数已经是输出B的foo函数了。

现在让我们来整理一下结果:

function foo() {
    console.log('C')
}
B
B

你学会了吗?没学会快去看看相关知识点!

最后

但是犹豫就是不会,不能拿曾经学过当做借口,把遇到的每一个自己不会的问题弄懂,才能逐渐让自己变得更强!

相关文章
|
5月前
|
IDE PHP 开发工具
JetBrains PhpStorm 2025.1 发布 - 高效智能的 PHP IDE
JetBrains PhpStorm 2025.1 (macOS, Linux, Windows) - 高效智能的 PHP IDE
159 1
|
算法 计算机视觉 网络架构
YOLOv7 | 模型结构与正负样本分配解析
YOLOv7 | 模型结构与正负样本分配解析
2005 0
YOLOv7 | 模型结构与正负样本分配解析
|
7月前
|
存储 缓存 自然语言处理
智能客服进阶:基于DeepSeek与PHP的多轮对话与上下文管理
本文基于前文构建的DeepSeek和PHP智能客服系统,深入探讨了多轮对话与上下文管理的实现。通过维护会话状态(如使用PHP的`$_SESSION`),系统能记住对话历史,提供连贯的回答。具体案例展示了如何处理书籍推荐及后续查询,如“这本书的作者是谁”。此外,还介绍了优化方向,包括实体识别、对话策略调整和持久化存储,以提升智能客服的复杂需求处理能力。
|
6月前
|
前端开发 JavaScript API
如何快速学习React?
如何快速学习React?
179 1
|
9月前
|
机器学习/深度学习 人工智能 安全
并非只有AI-2025年工作技能报告
全球最大的在线学习平台Coursera发布《2025年工作技能报告》,报告基于500万企业学习者和7,000多家机构的数据分析,揭示了2025年全球劳动力所需的关键技能趋势。报告强调,随着GenAI的快速发展,相关技能的课程注册量同比增长了866%,显示出对AI能力的需求激增。
592 9
|
DataWorks 关系型数据库 MySQL
DataWorks实时数据导入:如何实现源源不断的数据流?
【8月更文挑战第22天】在数据处理领域,高效实时传输至关重要。阿里云DataWorks提供全面的数据集成服务,支持多种数据导入方式,尤其实时导入功能因高效处理能力备受欢迎。通过创建数据源与数据集,并配置实时同步任务,可实现数据从MySQL等源到DataWorks数据仓库的快速准确流入。此流程不仅提升了数据处理效率,也确保了数据实时性和准确性,为企业决策提供强有力的支持。
209 1
|
Go 数据库 数据安全/隐私保护
Navicat 16.2安装和试用教程详解
Navicat 16.2安装和试用教程详解
423 0
|
资源调度 JavaScript API
nest.js + sms 实现短信验证码登录
本文介绍了在Nest.js框架中集成短信验证码登录的实现方案,详细阐述了使用阿里云短信服务的配置流程、资质申请、短信模板设置,并提供了API调用示例和工程代码的运行步骤。
nest.js + sms 实现短信验证码登录
|
运维 API Apache
《Saltstack:自动化运维的瑞士军刀,让IT管理变得简单而强大》
【8月更文挑战第13天】面对服务器数量激增和网络复杂化,传统手动运维已难以应对。自动化运维工具Saltstack(简称Salt),基于Python开源,采用C/S架构,由Master和Minion构成,实现任务分发与执行。Salt具备配置管理、远程执行及云管理等功能。通过声明式状态文件,可确保系统符合预期配置;远程执行简化批量任务处理;集成云服务API实现资源动态管理。Salt以高效灵活的方式助力IT基础设施管理,成为现代运维不可或缺的利器。
285 1
|
Java API 对象存储
对象存储OSS产品常见问题之使用Spring Cloud Alibaba情况下文档添加水印如何解决
对象存储OSS是基于互联网的数据存储服务模式,让用户可以安全、可靠地存储大量非结构化数据,如图片、音频、视频、文档等任意类型文件,并通过简单的基于HTTP/HTTPS协议的RESTful API接口进行访问和管理。本帖梳理了用户在实际使用中可能遇到的各种常见问题,涵盖了基础操作、性能优化、安全设置、费用管理、数据备份与恢复、跨区域同步、API接口调用等多个方面。
210 2