函数声明与函数表达式

函数声明

一个标准的函数声明,由关键字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.hqwc.cn/news/229118.html

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

相关文章

实战中使用的策略模式,使用@ConditionalOnProperty实现根据环境注册不同的bean

场景复现 举个例子&#xff0c;针对不同的设备的内存的不同加载一些资源的时候需要采取不同的策略&#xff0c;比如&#xff0c;在内存比较大的设备&#xff0c;可以一次性加载&#xff0c;繁殖需要使用懒加载&#xff0c;这个时候我们就可以采用配置文件配置中心去控制了 Cond…

数据结构与算法编程题33

统计二叉树中双分支结点(度为2的结点)个数 #define _CRT_SECURE_NO_WARNINGS#include <iostream> using namespace std;typedef char ElemType; #define ERROR 0 #define OK 1 #define Maxsize 100 #define STR_SIZE 1024typedef struct BiTNode {ElemType data;BiTNode*…

【Java】使用 IDEA 快速生成 SpringBoot 模块

项目目录下新建 module 模块 在 pom.xml 更改为 spring initializr 配置之后的 pom.xml <?xml version"1.0" encoding"UTF-8"?> <project xmlns"http://maven.apache.org/POM/4.0.0" xmlns:xsi"http://www.w3.org/2001/XMLSchem…

面试题:说一下你对 OAuth2 协议原理的理解?

文章目录 OAuth2简介角色流程客服端注册Client Type四种授权模式授权码模式隐藏式密码式凭证式RefreshToken OAuth2简介 OAuth 是一个开放授权协议标准&#xff0c;允许用户授权第三方应用访问他们存储在另外的服务提供者上的信息&#xff0c;而不需要将用户名和密码提供给第三…

HarmonyOS 传感器开发指南

HarmonyOS 系统传感器是应用访问底层硬件传感器的一种设备抽象概念。开发者根据传感器提供的Sensor接口&#xff0c;可以查询设备上的传感器&#xff0c;订阅传感器数据&#xff0c;并根据传感器数据定制相应的算法开发各类应用&#xff0c;比如指南针、运动健康、游戏等。 运作…

vue找依赖包的网址

https://www.npmjs.com/ 浅收藏一下

内衣洗衣机和手洗哪个干净?小型洗衣机质量排名

这两年内衣洗衣机可以称得上较火的小电器&#xff0c;小小的身躯却有大大的能力&#xff0c;一键可以同时启动洗、漂、脱三种全自动为一体化功能&#xff0c;在多功能和性能的提升上&#xff0c;还可以解放我们双手的同时将衣物给清洗干净&#xff0c;让越来越多小伙伴选择一款…

Java零基础——docker篇

1.【熟悉】docker简介 1.1 什么是docker Docker是一个开源项目&#xff0c;诞生于2013年初&#xff0c;最初是dotCloud公司内部的一个业余项目。它基于Google公司推出的Go语言实现。项目后来加入了Linux基金会&#xff0c;遵从了Apache2.0协议&#xff0c;项目代码在GitHub上进…

大数据——一文详解数据仓库概念(数据仓库的分层概念和维度建模详解)

1、ods是什么&#xff1f; ods层最好理解&#xff0c;基本上就是数据从源表拉过来&#xff0c;进行etl&#xff0c;比如MySQL映射到Hive&#xff0c;那么到了Hive里面就是ods层。ods全称是 Operational Data Store&#xff0c;操作数据存储——“面向主题的”&#xff0c;数据…

使用Tensorboard可视化 遇到无法访问此网站

问题&#xff1a; 使用Tensorboard可视化 遇到无法访问此网站 解决方法&#xff1a;后面加上服务器ip[参考] tensorboard --logdir目标目录 --hostxxx.xxx.xxx.xx

Unity针对XBOX,SWITCH,PS5手柄的适配踩坑

前言&#xff1a; 记录一点最近在做手柄适配问题的踩坑。 这里推荐一款Unity做手柄适配的插件->Rewired Rewired官方文档链接Rewired Documentation | Supported Controllers Rewired插件里面有个是Player类&#xff0c;这个类获取到当前玩家的输入设备&#xff0c;输入…

一种方便、优美的使用Python调用fofa API的方法

免责声明&#xff1a;由于传播或利用此文所提供的信息、技术或方法而造成的任何直接或间接的后果及损失&#xff0c;均由使用者本人负责&#xff0c; 文章作者不为此承担任何责任。 学习网络安全的过程中&#xff0c;绕不开fofa搜索&#xff0c;我的需求是使用fofa获取互联网所…