书写一个自运行函数的坑

抛出问题:
今天群友提出了一个问题,看题:

    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

发布了402 篇原创文章 · 获赞 544 · 访问量 212万+

猜你喜欢

转载自blog.csdn.net/qq_30100043/article/details/103088346
今日推荐