百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 编程网 > 正文

定义JS函数与函数声明、Function构造函数、函数表达式

yuyutoo 2025-01-16 21:30 1 浏览 0 评论

定义一个JavaScript函数有多种方式,其中function函数声明、Function构造函数创建、函数表达式是3种比较常用的方式,ECMAScript 6标准中又规定了几种新的函数定义方式。在JavaScript中每个函数都是一个Function对象,它不仅能像对象一样拥有属性和方法,而且可以被调用。

1. 函数的定义

1.1 三种函数定义方式

定义一个函数有多种方法:

函数声明 (函数语句)

使用函数声明(函数语名句)定义一个函数语法如下:

function name([param,[, param,[..., param]]]) { statements }

    • name - 函数名

    • param - 传递给函数的参数,最多有255个

    • statements - 函数体

    函数表达式

    函数表达式和函数声明非常类似,不同的是函数表达式可以省略函数名,从而定义一个匿名函数。

    函数表达式语法结构如下:

    function [name]([param1[, param2[, ..., paramN]]]) { statements }

    • name - 函数名。可以省略,省略时即为匿名函数。

    • param - 传递给函数的参数,最多有255个

    • statements - 函数体

    Function构造函数

    也可以使用new操作符通过Function构造函数创建:

    new Function ([arg1[, arg2[, ...argN]],] functionBody)

    • arg1, arg2, ... argN - 函数使用的参数

    • functionBody - 一个表示函数定义的JavaScript语句的字符串。

    1.2 ES6中新增的函数定义方式

    在ES 6(ECMAScript 2015)中新增了“Generator函数”(生成器函数),这种函数同样有三种定义方式:

    生成器函数声明 - function* 语句

    类似与函数声名,只是需要在function关键字后面增加一个"*"号:

    function* name([param[, param[, ...param]]]) {statements }

    生成器函数表达式 - function* 表达式

    同样的,生成器函数也可以使用表达式定义的方式:

    function* [name]([param] [, param] [..., param]) { statements }

    生成器函数构造函数 - GeneratorFunction

    new GeneratorFunction (arg1, arg2, ... argN, functionBody)

    箭头函数-"=>"

    除了生成器函数外,ES6中还新增了一种更简短的函数定义方式-箭头函数:

    ([param] [, param]) => { statements } param => expression

    • param - 函数参数

    • statements 或 expression - 声明多个语句时需要用大括号括起来,而单个表达式则不用。

    2. 函数声明、Function构造函数、函数表达式的比较

    函数声明、Function构造函数、函数表达式几种函数定义示例如下:

    构造函数使用字符串做为函数体,这会阻止JS引擎的语法检查及优化等。因此,不推荐使用这种定义方式。而函数声明与函数表达式非常类似,但还是存在一些差别。这三种方式主要有以下几个方面的差别:

    函数变量可以再赋值

    使用函数声明定义的函数名不能被改变,而使用函数表达式定义的函数变量可以再被赋值。当函数表达式使用函数名时,这个名称只能在函数体内使用,在其它位置使用将会报错:

    var y = function x() {};
    alert(x); // throws an error

    而'new Function'定义时没有函数名,所以也不能在其内部访问。

    函数声名会带来作用域的提升

    函数声名会带来作用域的提升,所在可以在函数声名前使用函数声名中的函数名:


    函数表达式会创建一个闭包,它定义的函数继承了当前的作用域,并不会有作用域的提升:


    而Function构造函数不会继承全局作用哉以外的任何作用域。

    Function构造函数定义的函数会被解析多次

    通过函数表达式定义的函数和通过函数声明定义的函数只会被解析一次。Function构造函数定义的函数确不同,构造函数被调用一次,其中的函数体字符串都要被解析一次。

    虽然函数表达式每次都创建了一个闭包,但函数体不会被重复解析,因此仍然比构造函数定义的函数要快。

    相关推荐

    史上最全的浏览器兼容性问题和解决方案

    微信ID:WEB_wysj(点击关注)◎◎◎◎◎◎◎◎◎一┳═┻︻▄(页底留言开放,欢迎来吐槽)●●●...

    平面设计基础知识_平面设计基础知识实验收获与总结
    平面设计基础知识_平面设计基础知识实验收获与总结

    CSS构造颜色,背景与图像1.使用span更好的控制文本中局部区域的文本:文本;2.使用display属性提供区块转变:display:inline(是内联的...

    2025-02-21 16:01 yuyutoo

    写作排版简单三步就行-工具篇_作文排版模板

    和我们工作中日常word排版内部交流不同,这篇教程介绍的写作排版主要是用于“微信公众号、头条号”网络展示。写作展现的是我的思考,排版是让写作在网格上更好地展现。在写作上花费时间是有累积复利优势的,在排...

    写一个2048的游戏_2048小游戏功能实现

    1.创建HTML文件1.打开一个文本编辑器,例如Notepad++、SublimeText、VisualStudioCode等。2.将以下HTML代码复制并粘贴到文本编辑器中:html...

    今天你穿“短袖”了吗?青岛最高23℃!接下来几天气温更刺激……

      最近的天气暖和得让很多小伙伴们喊“热”!!!  昨天的气温到底升得有多高呢?你家有没有榜上有名?...

    CSS不规则卡片,纯CSS制作优惠券样式,CSS实现锯齿样式

    之前也有写过CSS优惠券样式《CSS3径向渐变实现优惠券波浪造型》,这次再来温习一遍,并且将更为详细的讲解,从布局到具体样式说明,最后定义CSS变量,自定义主题颜色。布局...

    柠檬科技肖勃飞:大数据风控助力信用社会建设

    ...

    你的自我界限够强大吗?_你的自我界限够强大吗英文

    我的结果:A、该设立新的界限...

    行内元素与块级元素,以及区别_行内元素和块级元素有什么区别?

    行内元素与块级元素首先,CSS规范规定,每个元素都有display属性,确定该元素的类型,每个元素都有默认的display值,分别为块级(block)、行内(inline)。块级元素:(以下列举比较常...

    让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华
    让“成都速度”跑得潇潇洒洒,地上地下共享轨交繁华

    去年的两会期间,习近平总书记在参加人大会议四川代表团审议时,对治蜀兴川提出了明确要求,指明了前行方向,并带来了“祝四川人民的生活越来越安逸”的美好祝福。又是一年...

    2025-02-21 16:00 yuyutoo

    今年国家综合性消防救援队伍计划招录消防员15000名

    记者24日从应急管理部获悉,国家综合性消防救援队伍2023年消防员招录工作已正式启动。今年共计划招录消防员15000名,其中高校应届毕业生5000名、退役士兵5000名、社会青年5000名。本次招录的...

    一起盘点最新 Chrome v133 的5大主流特性 ?

    1.CSS的高级attr()方法CSSattr()函数是CSSLevel5中用于检索DOM元素的属性值并将其用于CSS属性值,类似于var()函数替换自定义属性值的方式。...

    竞走团体世锦赛5月太仓举行 世界冠军杨家玉担任形象大使

    style="text-align:center;"data-mce-style="text-align:...

    学物理能做什么?_学物理能做什么 卢昌海

    作者:曹则贤中国科学院物理研究所原标题:《物理学:ASourceofPowerforMan》在2006年中央电视台《对话》栏目的某期节目中,主持人问过我一个的问题:“学物理的人,如果日后不...

    你不知道的关于这只眯眼兔的6个小秘密
    你不知道的关于这只眯眼兔的6个小秘密

    在你们忙着给熊本君做表情包的时候,要知道,最先在网络上引起轰动的可是这只脸上只有两条缝的兔子——兔斯基。今年,它更是迎来了自己的10岁生日。①关于德艺双馨“老艺...

    2025-02-21 16:00 yuyutoo

    取消回复欢迎 发表评论: