当前位置: 首页 > news >正文

函数声明与函数表达式

函数声明

一个标准的函数声明,由关键字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()

具体答案,见下篇文章解答吧~(函数声明与函数表达式习题-CSDN博客)

引用文章:

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

相关文章:

  • springboot+jsp+java房屋销售出租赁网站的ssm设计与实现7xcvq
  • 深入了解Java8新特性-日期时间API:OffsetDateTime类
  • RocketMQ-快速实战
  • docker-compose;私有镜像仓库harbor搭建;镜像推送到私有仓库harbor
  • 【开源】基于JAVA的大病保险管理系统
  • matlab 混沌动力学行为-分岔图-李雅普指数等
  • 推荐几款python在线学习和电子书网站
  • 带你手搓阻塞队列——自定义实现
  • 【UGUI】Unity教程:实现物品的拖拽功能
  • SpringBoot+mysql+vue实现大学生健康档案管理系统前后端分离
  • MySQL数据库的备份与恢复
  • 腾讯云手动下发指令到设备-用于设备调试
  • 全栈冲刺 之 一天速成MySQL
  • 知乎禁止转载的回答怎么复制做笔记?
  • 恒驰服务 | 华为云云上运维服务offering
  • (ckeditor+ckfinder用法)Jquery,js获取ckeditor值
  • Angular 4.x 动态创建组件
  • HTTP传输编码增加了传输量,只为解决这一个问题 | 实用 HTTP
  • JAVA多线程机制解析-volatilesynchronized
  • React-Native - 收藏集 - 掘金
  • spring + angular 实现导出excel
  • ubuntu 下nginx安装 并支持https协议
  • 案例分享〡三拾众筹持续交付开发流程支撑创新业务
  • 解决jsp引用其他项目时出现的 cannot be resolved to a type错误
  • 前端每日实战:70# 视频演示如何用纯 CSS 创作一只徘徊的果冻怪兽
  • 使用common-codec进行md5加密
  • MPAndroidChart 教程:Y轴 YAxis
  • (2020)Java后端开发----(面试题和笔试题)
  • (8)Linux使用C语言读取proc/stat等cpu使用数据
  • (Note)C++中的继承方式
  • (第27天)Oracle 数据泵转换分区表
  • (七)Java对象在Hibernate持久化层的状态
  • (四)汇编语言——简单程序
  • (原創) 如何解决make kernel时『clock skew detected』的warning? (OS) (Linux)
  • (转)C#开发微信门户及应用(1)--开始使用微信接口
  • (转)EOS中账户、钱包和密钥的关系
  • (转)大道至简,职场上做人做事做管理
  • (转载)hibernate缓存
  • (转载)OpenStack Hacker养成指南
  • (总结)Linux下的暴力密码在线破解工具Hydra详解
  • .Net Core webapi RestFul 统一接口数据返回格式
  • .NET/C# 项目如何优雅地设置条件编译符号?
  • .NET开发不可不知、不可不用的辅助类(三)(报表导出---终结版)
  • .NET设计模式(7):创建型模式专题总结(Creational Pattern)
  • .NET文档生成工具ADB使用图文教程
  • .pub是什么文件_Rust 模块和文件 - 「译」
  • @manytomany 保存后数据被删除_[Windows] 数据恢复软件RStudio v8.14.179675 便携特别版...
  • @ModelAttribute 注解
  • [2013][note]通过石墨烯调谐用于开关、传感的动态可重构Fano超——
  • [Android] Android ActivityManager
  • [hdu2196]Computer树的直径
  • [hive]中的字段的数据类型有哪些
  • [HOW TO]怎么在iPhone程序中实现可多选可搜索按字母排序的联系人选择器
  • [i.MX]飞思卡尔IMX6处理器的GPIO-IOMUX_PAD说明
  • [JS]变量