博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
函数声明和函数表达式
阅读量:6281 次
发布时间:2019-06-22

本文共 1469 字,大约阅读时间需要 4 分钟。

前言

因为前一段时间经人推荐去看了周爱民老师关于的视频,里面有关于js引擎是如何解析javascript语句的讲解,推荐有需要的朋友可以去看一下。其中有一段是在讲解关于函数声明和运算的例子(但是解释会和视频里不一致,视频里的解释有误导性,要感谢最光阴的指点):

下面三个式子分别代表什么意思,会执行什么:

1.  function () {

}();

2. function () {

}(1);

3.( function () {

})(1);

答案是:

1. 会显示语法错误

原因:因为语法规定,函数声明是必须有函数名称的,如果没有函数名称则是函数表达式。而表达式语句是不能以function作为开头的,所以会报语法错误。

具体解释可以参见下面两幅图片:

这幅图的意思是,函数声明是必须有函数名称的。函数表达式则不需要有函数名称。因此,匿名函数是函数表达式。

这幅图的意思是,表达式语句不能以function,class的关键字开头。

因此,因为匿名函数是函数表达式,函数表达式不能以function开头,上面的语句会报语法错误。

2. 会显示语法错误

原因:原因同上。

但如果把函数修改一下。如下图。

function A() {}(1);

此时浏览器会显示1。

此时,括号前面的是一组函数声明。因此不会报语法错误。此语句会分两部分解析:首先会将函数funciton A(){}作为函数声明处理,不会有任何返回值。处理过后,再进行括号运算符操作,因为运算符内有个数字1,因此直接输出1这个数字。

3. 会将括号内的1作为参数传递进匿名函数中执行

原因:因为匿名函数前有(,因此不会产生语法错误。此语句也是会分两部分执行;首先第一个圆括号作为运算符,里面的函数作为运算元会返回一个函数;因为前一个返回的是一个函数,因此函数后面跟着的这个括号可以视作为函数执行语句,而里面的参数1则作为函数的形参传递。

之所以会想把这个例子放在这里,是因为我之前并没有仔细的研究过这个问题,现在看到了就记录下来。

由此可以看到函数声明的形式是:

function A() { ...}

包含函数表达式的赋值语句是:

var A = function () {};

两者的异同或者说解析方式的异同:

1. 函数声明和函数表达式都会涉及到变量提升

变量提升即:当浏览器对js进行解析的时候,都会先将函数声明或变量声明做一个预处理,即把它们提前到当前函数的最开头进行定义。

因为函数表达式在js解析的时候是分两步进行执行的,第一步将变量进行声明,第二步对变量赋值。因此在执行第一步的时候会涉及到变量声明提升。

2. 函数声明是全部函数体提前;函数表达式是只对变量本身提前,函数体会在执行的时候再赋值。

举例说明:

var getName = function () { alert (1);};function getName() { alert (2);}
 
getName();//问此处会执行什么?

在js解析的时候实际是这样的:

var getName ;function getName() { alert (2);}getName = function () { alert (1);};

因此getName()会返回1,因为函数声明提前了,因此,在最后执行期间赋值操作遍成为最后定义getName的方法,和最开始定义函数的顺序不太一致。

转载于:https://www.cnblogs.com/Candybunny/p/5406475.html

你可能感兴趣的文章
Vue------第二天(计算属性、侦听器、绑定Class、绑定Style)
查看>>
dojo.mixin(混合进)、dojo.extend、dojo.declare
查看>>
Python 数据类型
查看>>
iOS--环信集成并修改头像和昵称(需要自己的服务器)
查看>>
PHP版微信权限验证配置,音频文件下载,FFmpeg转码,上传OSS和删除转存服务器本地文件...
查看>>
教程前言 - 回归宣言
查看>>
PHP 7.1是否支持操作符重载?
查看>>
Vue.js 中v-for和v-if一起使用,来判断select中的option为选中项
查看>>
Java中AES加密解密以及签名校验
查看>>
定义内部类 继承 AsyncTask 来实现异步网络请求
查看>>
VC中怎么读取.txt文件
查看>>
如何清理mac系统垃圾
查看>>
企业中最佳虚拟机软件应用程序—Parallels Deskto
查看>>
Nginx配置文件详细说明
查看>>
怎么用Navicat Premium图标编辑器创建表
查看>>
Spring配置文件(2)配置方式
查看>>
MariaDB/Mysql 批量插入 批量更新
查看>>
ItelliJ IDEA开发工具使用—创建一个web项目
查看>>
solr-4.10.4部署到tomcat6
查看>>
切片键(Shard Keys)
查看>>