持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第14天，点击查看活动详情

前言

今天没有写博客没有什么思路,于是决定去刷下js题目,做一个题目解析.

错题如下:

选项如下:

1.首次错误思路

(1)分析结构:
整体是一个立即执行函数,可以使函数不调用就执行
内部声明了一个变量,这个变量是一个函数调用后的值
然后声明了一个函数,
然后返回一个值
(2)分析考官意图,题目考察点
1.考察立即执行函数,可以自己调用自己,不需要外部调用
2.考察声明顺序,只有前面声明了的,后面才可以使用
(3)得出答案
由于声明x是,foo函数还没有声明,所以var x=foo()x应该是undefined
我选择答案C:undefined

2.本题正确思路

(1)分析结构:
整体是一个立即执行函数,可以使函数不调用就执行
内部声明了一个变量,这个变量是一个函数调用后的值
然后声明了一个函数,
然后返回一个值
(2)分析考官意图,题目考察点
1.考察立即执行函数,可以自己调用自己,不需要外部调用
2.考察声明顺序,只有前面声明了的,后面才可以使用
3.var声明变量的顺序是先声明后赋值,所以上面的赋值转化以下是这样的

var x
var foo
x=foo()
foo=function foo(){
return "foobar"
}

所以当执行到x=foo()时foo已经声明了,foo是undefined,undefined()会报类型错误,因为undefined不是函数
(3)得出答案
由于x=foo()时,foo是undefined,undefined()会报类型错误,因为undefined不是函数,
所以return x是类型错误
选择答案B:类型错误

3.实际调试一下

代码如下:

    <script>
        (function () {
            var x = foo();
            var foo = function foo() {
                return "foobar"
            };
            return X;
        })();
    </script>

确实为类型错误:typeerror

因为foo不是一个函数

如果把var改为let会怎么样么?

代码如下:

    <script>
        (function () {
            let x = foo();
            let foo = function foo() {
                return "foobar"
            };
            return X;
        })();
    </script>

报错为没有定义就先使用了

属于暂时性死区
js中的暂时性死区（ temporal dead zone，简称TDZ ）

4.反思总结

立即执行函数

1.立即执行函数：不需要调用，立马能够自己执行的函数

2.写法

(function 函数名() {代码块})() 或
(function 函数名(){代码块}());

3.立即执行函数最大的作用就是:

独立创建了一个作用域，里面所有的变量都是局部变量不存在命名冲突的情况
可以放在最前面立即执行,避免被后面的变量污染

var声明变量赋值的顺序

var声明变量会声明提升,
然后赋值

var a=1
var b=2

实际声明赋值顺序为

var a
var b
//此时a,b声明未赋值,均为undefined
a=1
b=2

暂时性死区

暂时性死区（ temporal dead zone，简称TDZ ）

var、function等关键字却不会受到TDZ（暂时性死区）的影响

let、const会产生暂时性死区的问题

当进入一个新的作用域时,
用let和const声明的变量会在作用域中先被创建出来,
但是此时不能被访问,此时访问会报错,没有定义就先使用了

从变量创建到语法绑定的这一段空间,我们可以理解为暂时性死区

加强对var声明和let暂时性死区的理解

前言