JS作用域和变量提升

[axlroseart]

JS作用域和变量提升

[axlroseart]

先写一个面试的时候可能会被面试官考的例子：

var x = 2
(function() {
 x = 4
 console.log(x)
})()

问执行这段代码之后会输出什么？

输出结果为：

刚开始可能会觉得答案有点出人意料，需要仔细观察和结合多个知识点才能很好的解释这个结果。
首先，我们应该都知道 (function() {})() 这是个自执行匿名函数，或者所谓的匿名包装器，也就是说这个函数会立即执行。然后再看这个函数内部，重新赋值x = 4，虽然函数外部定义的x = 2，但是在当前作用域（匿名函数内部）下，重新给x赋值为4，所以按理说会直接输出 数字 4 才对，但是为什么报错呢？
原因其实很简单，虽然我们平时写作通常会这么些，但是js代码在被解析的时候，并不会按照像“换行”这样的格式去解析，或者说叫切分，所以这部分代码会被解析成：

var x = 2(function() { ... })()

显而易见，2被误认为成了一个方法名，所以被认为是在执行方法'2'，但2其实是个数字，所以才会报2 is not a function 的错。因此如果在2后面加上 ; 的时候，结果就完全不一样了，或者说就符合这段代码本身该有的亚子了：

像这种错误其实日常开发中稍微不注意就很容易出现，所以除了掌握js正常情况下的语法之外，还需要考虑运行情况下可能会出现的问题。