「这是我参与2022首次更文挑战的第1天,活动详情查看:2022首次更文挑战」。
前言
- 背景
因为最近在倒腾cesium上的某个东西,但是这个东西是原生的写法,不是es6的module方式,导入导出的形式,所以免不了要去看下这个东西(插件)的源码,看看能不能改成 es6的形式,然后看到了(function(){...})()
,如下图
印象中,这个(function(){...})()
还是早期学JS的时候,当时老师是说,把要初始化的东西写在这个函数的{}
中,当时也没多想,老师说就照写,后来接触到了Vue
,感觉Vue的 mounted
极像这个(function(){...})()
,后来用vue
开发了一阵子,或多或少的接触到Vue中引入的第三方库
,也常常看到(function(){...})()
出现在我的视线里。
比如 axios
就是这种(function(){...})()
形式
leaflet
也是:
还有!function
开头的形式:
这次就好好复习下(function(){...})()
开始,立即执行函数
(function(){...})()
是javascript
中立即执行函数的常见写法,它还有一个兄弟:(function(){…}())
初次看到这两种形式的立即执行函数,是不是很容易搞混,其实也很简单,就是看function 关键字前的 '(' , 它的另一半 ')' 。是放在了最末尾,还是没有放在最末尾 区分
看下图。
讲立即执行函数,免不了要讲下这个函数
,是个什么东西, 函数
:
- 函数声明 (可被提升)
- 匿名函数
- 函数表达式 (不可被提升,但是表达式后面可以加括号表示立即调用该函数)
函数声明:
function fnName () {…};
复制代码
使用function
关键字声明
一个函数,再指定一个函数名
、参数列表
和方法体
,叫函数声明。
匿名函数:
function () {...};
复制代码
使用function
关键字声明
一个函数,但未给函数命名
,所以叫匿名函数
,匿名函数属于函数表达式
,匿名函数有很多作用,赋予一个变量则创建函数,赋予一个事件则成为事件处理程序或创建闭包等等。
函数表达式:
var fnName = function () {…};
复制代码
使用function
关键字声明一个函数,但未给函数命名
,最后将匿名函数
赋予一个变量
,叫函数表达式,这是最常见的函数表达式语法形式。
理解立即执行函数
立即执行函数,字面理解,就是要把函数
,立刻马上执行
这又分为
函数声明
类型的 函数执行匿名函数
类型的 函数执行
函数声明
类型的 函数执行
fnName();
function fnName(){ ... }
//正常,因为‘提升’了函数声明,函数调用可在函数声明之前
fnName();
var fnName=function(){ ... }
//报错,变量fnName还未保存对函数的引用,函数调用必须在函数表达式之后
复制代码
解释:
JS中的函数声明提升概念
-
Javascript引擎在解析javascript代码时会函数声明提升(Function declaration Hoisting)当前执行环境(作用域)上的函数声明,而函数表达式必须等到Javascirtp引擎执行到它所在行时,才会从上而下一行一行地解析函数表达式。
-
函数表达式后面可以加括号立即调用该函数,函数声明不可以,只能以fnName()形式调用 。
所以上方的代码 会执行出 注释中的结果。我们看下面控制台实际执行的结果,也可以看出:
匿名函数
类型的 函数执行
// 第一种情况
(function(a){
console.log(a); // chrome浏览器 输出123,使用()运算符 具体控制台打印示例,看下方图片
})(123);
// 第二种情况
(function(a){
console.log(a); // chrome浏览器 输出123,使用()运算符 具体控制台打印示例,看下方图片
}(123));
// 第三种情况
!function(a){
console.log(a); // chrome浏览器 输出123,使用 !运算符 具体控制台打印示例,看下方图片
}(123);
// 第四种情况
+function(a){
console.log(a); // chrome浏览器 输出123,使用 + 运算符 具体控制台打印示例,看下方图片
}(123);
// 第五种情况
-function(a){
console.log(a); // chrome浏览器 输出123,使用 - 运算符 具体控制台打印示例,看下方图片
}(123);
var fn=function(a){
console.log(a); // chrome浏览器 输出123,使用 = 运算符 具体控制台打印示例,看下方图片
}(123)
复制代码
看着输出结果,你就会发现:
在function
前面加!、+、 -
。都可以起到函数定义后立即执行的效果,而()、!、+、-、=
等运算符,都将函数声明
转换成函数表达式
,消除了javascript引擎
识别函数表达式
和函数声明
的歧义,告诉javascript引擎这是一个函数表达式,不是函数声明,可以在后面加括号,并立即执行函数的代码。
加括号
是最安全的做法,因为!、+、-
运算符还会和函数的返回值进行运算,有时造成不必要的麻烦。