抛出问题:
今天群友提出了一个问题,看题:
let b = 1;
(function b() {
b = 9;
console.log(b)
})();
请问,b打印的值是什么?
根据经验来说,大家明眼一看,肯定感觉打印的值是9,因为在上面就赋值了,打印的肯定就是9。可惜事与愿违,这个打印的竟然是函数function b。当场直接蒙蔽,下面,我们来解析一下为什么是这个结果。
这个问题出就出在了自运行函数IIFEIIFE: Immediately Invoked Function Expression
身上,IIFE的出现是为了弥补JS在scope方面的缺陷:JS只有全局作用域(global scope)、函数作用域(function scope),从ES6开始才有块级作用域(block scope)。
所以说,IIFE的目的是为了隔离作用域,防止污染全局命名空间。
知道了这一点,既然IIFE隔离了作用域,而函数b则作为了一个单独作用域声明的一个函数,相当于是var b = function
这样子,那既然这样,重点来,为什么我在函数内部赋值b为9, 下面打印的应该是9啊,不应该是fucntion才是。
带着这个问题,我们将代码修改一下
let b = 1;
(function b() {
'use strict'
b = 9;
console.log(b)
})();
console.log(b);
修改为使用严格模式,你就会发现在调试框出现这样一个报错:
(index):63 Uncaught TypeError: Assignment to constant variable.
这句话啥意思,就是你不能修改一个通过const定义的变量的值,这就相当于IIFE其实是讲函数b通过
const b = function
的方式进行声明的,const的声明的方式是在es6中添加的,如果修改就会报错。从这里我就明白了IIFE一起独特的原理,但是,推荐大家这种方式千万不要用到项目当中,利人利己,社会和谐。
引用:说一说JS的IIFE