函数声明与函数表达式

函数声明

一个标准的函数声明,由关键字function 、函数名、形参和代码块组成。

有名字的函数又叫具名函数

举个例子:

function quack(num) {
for (var i = 0; i < num; i++) {console.log("Quack!")}
}
quack(3)

函数表达式

函数没有名称,而且位于一条赋值语句右边,被赋给一个变量。

在语句(如赋值语句)中,以这样的方式使用关键function时,创建的是函数表达式。

没有名称的函数又叫匿名函数

举个例子:

var fly = function(num) {for (var i = 0; i < num; i++) {console.log("Flying!");}
}
fly(3)

下面是一个关于如何区分函数声明和函数表达式的简单提示:

如果语句以function关键字开头,那么它就是一个函数声明,否则就是一个函数表达式。

(当function关键字在表达式中创建一个函数(有或没有名称)时,才是一个函数表达式。)

// 函数声明: 以 `function` 关键字开头
function sumA(a, b) {return a + b;
}// 函数表达式: 不以 `function` 关键字开头
const mySum = (function sumB(a, b) {return a + b;
});// 函数表达式: 不以 `function` 关键字开头
[1, 2, 3].reduce(function sum3(acc, number) { return acc + number 
});// 函数表达式const sum = (function sumB(a, b) {return a + b;
});// 函数表达式
const myObject = {myMethod: function() {return 42;}
};// 函数表达式
const numbers = [4, 1, 6];
numbers.forEach(function callback(number) {console.log(number);// logs 4// logs 1// logs 1
});

在函数表达式中创建的函数有两种:

  1. 如果表达式内的函数没有名称,例如function() {return 42},则这是一个匿名函数表达式;
  2. 如果函数有名字,例如前面例子中的sumBcallback,那么这就是一个命名函数表达式

从更高的角度来看,函数声明对于创建独立的函数很有用,但是函数表达式作为回调很好。

现在,让我们深入了解函数声明和函数表达式的行为。

乍一看,函数声明和函数表达式差别不大,但实际上它们存在根本性差别。

要明白这种差别,首先需要研究一下浏览器在运行阶段如何处理代码。

举个例子,看看浏览器如何分析并执行网页中的代码。

var migrating = true;
var fly = function (num) {for (var i = 0; i < num; i++) {console.log("Flying!")}
}function quack(num) {for (var i = 0; i < num; i++) {console.log("Quack!")}
}if (migrating) {quack(4)fly(4)
}

分析浏览器如何执行代码

第一步:分析函数声明

在分析网页期间(执行任何代码之前),浏览器查找函数声明。找到函数声明时,浏览器创建相应的函数,并将得到的函数引用赋给与函数同名的变量。

第二步:浏览器执行代码

处理所有的函数声明后,浏览器回到代码开头,开始按从头到尾的顺序执行代码。

 

第三步:继续执行

处理完变量fly后,浏览器继续往下执行。接下来的语句是函数quack的声明,因为已经处理过了,所以浏览器跳过声明,接着执行后面的条件语句。

小结一下,浏览器的执行过程:

  1. 首先扫描代码,查找函数声明
  2. 分析函数声明(存储该函数,并创建一个与函数同名变量来存储指向该函数的引用)
  3. 处理完所有函数声明后,浏览器从头开始执行代码(按顺序处理各种函数变量)
  4. 碰到函数表达式时,同函数声明,需存储该函数,并将指向该函数的引用赋给表达式左边的变量

结论:函数声明与函数表达式的区别

函数声明函数表达式
1函数声明是完整的语句函数表达式只是语句的一部分
2函数命名时,创建一个与函数同名的变量,并让它指向函数函数命名时,通常不给函数指定名称,因此需要在代码中将函数赋给一个变量,或以其他方式使用函数表达式
3可以出现在代码的任何地方,函数声明创建的函数都是自己定义的,这被称为提升(hoisting)函数表达式创建的函数要等到它执行后才被定义
4函数将在执行代码前创建,即使未调用,也占用内存空间函数将在运行阶段执行代码时临时创建,调用完,立即释放,所以更节省内存空间

讲了这么多,相信你对函数声明与函数表达式已经有了一定的了解,来做个题目试试水吧~

阅读以下代码,从上到下依次说出执行结果:

// 从上到下依次说出执行结果
var foo = function () {console.log("foo1")
}
foo()var foo = function () {console.log("foo2")
}
foo()function foo() {console.log("foo1")
}
foo()function foo() {console.log("foo2")
}
foo()

具体答案,见下篇文章解答吧~

引用文章:

一个例子讲清楚函数声明和函数表达式 - 知乎

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

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

相关文章

skywalking告警qq邮箱发送

首先开启发送接收qq邮箱的权限 开启之后&#xff0c;会让你发送信息&#xff0c;按着一系列操作&#xff0c;获得password &#xff08;授权码&#xff08;例如&#xff0c;qq开启SMTP授权码&#xff0c;qq授权码16位&#xff09;&#xff09; <!-- mail邮箱-->…

传智杯-题目1

运气 一&#xff1a;对于每一的1到6都进行枚举&#xff0c;进行递归操作 二&#xff1a;如果位数到了指定的n的时候&#xff0c;递归的条件&#xff0c;进行判断是否可以整除操作 #include<iostream> #include<algorithm> using namespace std; long long n, k, an…

Java抽象类:类的幕后黑手,提供继承和扩展的框架。

&#x1f451;专栏内容&#xff1a;Java⛪个人主页&#xff1a;子夜的星的主页&#x1f495;座右铭&#xff1a;前路未远&#xff0c;步履不停 目录 一、抽象类的概念二、注意事项三、抽象类的作用 一、抽象类的概念 在面向对象的概念中&#xff0c;所有的对象都是通过类来描绘…

vue3 element plus 表单验证 数组嵌套对象格式验证 动态验证等

基本结构 model 表单数据对象 rules 验证对象 prop model 的键名 <template><el-form ref"ruleFormRef" :model"ruleForm" :rules"rules"><el-form-item label"手机号" prop"mobile"><el-input v-mod…

鸿蒙原生应用/元服务开发-AGC分发如何生成密钥和和证书请求文件

HarmonyOS通过数字证书&#xff08;.cer文件&#xff09;和Profile文件&#xff08;.p7b文件&#xff09;等签名信息来保证应用的完整性&#xff0c;应用如需上架到华为应用市场必须通过签名校验。因此&#xff0c;开发者需要使用发布证书和Profile文件对应用进行签名后才能发布…

互联网程序设计HTML+CSS+JS

一、HTML基础 HTML超文本标记语言。 超文本&#xff1a;链接&#xff1b; 标记&#xff1a;标签&#xff0c;带尖括号的文本。 1、标签结构 标签要成对出现&#xff0c;中间包裹内容&#xff1b; <>里面放英文字母&#xff08;标签名&#xff09;&#xff1b; 结束…

在centos7上源码安装nginx

1. 安装必要的编译工具和依赖项 在编译Nginx之前&#xff0c;你需要安装一些编译工具和依赖项。可以通过以下命令安装&#xff1a; yum install gcc-c pcre-devel zlib-devel make 2. 下载Nginx源代码 从Nginx官网下载最新的源代码。你可以使用wget命令来下载&#xff1a; …

Java 基础学习(三)循环流程控制与数组

1 循环流程控制 1.1 循环流程控制概述 1.1.1 什么是循环流程控制 当一个业务过程需要多次重复执行一个程序单元时&#xff0c;可以使用循环流程控制实现。 Java中包含3种循环结构&#xff1a; 1.2 for循环 1.2.1 for循环基础语法 for循环是最常用的循环流程控制&#xff…

redis运维(二十二)redis 的扩展应用 lua(四)

一 最佳实践 ① 铺垫 最佳实践&#xff1a;1、把redis操作所需的key通过KEYS进行参数传递2、其它的lua脚本所需的参数通过ARGV进行传递. redis lua脚本原理 Redis Lua脚本的执行原理 ② 删除指定的脚本缓存 ③ redis集群模式下使用lua脚本注意事项 1、常见报错现象 C…

『 Linux 』进程优先级

文章目录 什么是优先级Linux下的进程优先级PRI与NI使用top查看进程以及对进程的优先级的修改 进程优先级的其他概念竞争性与独立性并发与并行 什么是优先级 优先级,顾名思义,即在同一环境下不同单位对同一个资源的享有顺序; 一般优先级高的单位将优先占有该资源; 在进程当中进…

Python中如何用栈实现队列

目录 一、引言 二、使用两个栈实现队列 三、性能分析 四、应用场景 五、代码示例 六、优缺点总结 一、引言 队列&#xff08;Queue&#xff09;和栈&#xff08;Stack&#xff09;是计算机科学中常用的数据结构。队列是一种特殊的线性表&#xff0c;只允许在表的前端进行…

Leetcode 380. O(1) 时间插入、删除和获取随机元素

文章目录 题目代码&#xff08;11.28 首刷看解析&#xff09; 题目 Leetcode 380. O(1) 时间插入、删除和获取随机元素 代码&#xff08;11.28 首刷看解析&#xff09; 1.length:表示的是数组的长度 数组 2.length():表示的是字符串的长度 字符串 3.size():表示的是集合中有多…

万宾科技可燃气体监测仪科技作用全览

燃气管网在运行过程中经常会遇到燃气管道泄漏的问题&#xff0c;燃气泄漏甚至会引起爆炸&#xff0c;从而威胁人民的生命和财产安全&#xff0c;因此对燃气管网进行定期巡检是十分必要的工作。但是传统的人工巡检已不能满足城市的需要&#xff0c;除了选择增加巡检人员之外&…

Web UI自动化测试框架

WebUI automation testing framework based on Selenium and unittest. 基于 selenium 和 unittest 的 Web UI自动化测试框架。 特点 提供更加简单API编写自动化测试。提供脚手架&#xff0c;快速生成自动化测试项目。自动生成HTML测试报告生成。自带断言方法&#xff0c;断言…

笔记:Pika Labs 3D 动画生成工具

Pika Labs 一款3D 动画生成工具 本文地址&#xff1a;https://blog.csdn.net/qq_28550263/article/details/134657306 目 录 1. 简介2. 准备2.1 安装 discord2.2 加入 Discord 频道 3. Pika 使用指南2.1 快速开始2.2 从图像到视频2.3 Pika Bot按钮2.4 提示&#xff08;Prompt&a…

面试题:说一下MyBatis动态代理原理?

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 1.MyBatis简介2.使用步骤2.1、引入依赖2.2、配置文件2.3、接口定义2.4、加载执行 3.原理解析 1.MyBatis简介 MyBatis是一个ORM工具&#xff0c;封装了JDBC的操作&a…

Redis 主从架构,Redis 分区,Redis哈希槽的概念,为什么要做Redis分区

文章目录 Redis 主从架构redis replication 的核心机制redis 主从复制的核心原理过程原理Redis集群的主从复制模型是怎样的&#xff1f;生产环境中的 redis 是怎么部署的&#xff1f;机器是什么配置&#xff1f;你往内存里写的是什么数据&#xff1f;说说Redis哈希槽的概念&…

前端入门(四)Ajax、Promise异步、Axios通信、vue-router路由

文章目录 AjaxAjax特点 Promise 异步编程&#xff08;缺&#xff09;Promise基本使用状态 - PromiseState结果 - PromiseResult Axios基本使用 Vue路由 - vue-router单页面Web应用&#xff08;single page web application&#xff0c;SPA&#xff09;vue-router基本使用路由使…

Rabbitmq发送邮件并消费邮件

&#x1f4d1;前言 本文主要是【Rabbitmq】——Rabbitmq发送邮件并消费邮件的文章&#xff0c;如果有什么需要改进的地方还请大佬指出⛺️ &#x1f3ac;作者简介&#xff1a;大家好&#xff0c;我是听风与他&#x1f947; ☁️博客首页&#xff1a;CSDN主页听风与他 &#x1…

【数学】旋转矩阵

参考链接 OpenGL from OpenGL.GL import * from OpenGL.GLUT import * from math import * import numpy as np def draw_axes():glClear(GL_COLOR_BUFFER_BIT)# 绘制坐标轴glColor3f(1.0, 1.0, 1.0) # 设置坐标轴颜色为白色glBegin(GL_LINES)glVertex2f(-1.0, 0.0) # x 轴g…