关于作用域的问题，在【ES6语法】、【作用域、this上下文、闭包】文中，均有涉及，今天来做一个详细的介绍。
在之前的文章中，提到作用域是可以静态分析出来的，因此作用域在定义时，就已经确定了。这是为了提高程序的可靠性，也减少了命名冲突。
作用域是定义变量和访问变量的范围。
在ES5中，只有全局作用域和函数作用域。
全局作用域和全局对象
全局作用域在页面打开时被创建，页面关闭时销毁。
全局作用域中有一个全局对象window，这是BOM中的浏览器窗口对象，由浏览器创建，可以直接使用。
当我们只做变量赋值，而不做变量声明时，该变量会被挂载到window对象上。举例：
var testNumber = 1
console.log(testNumber) //1
console.log(window.testNumber) //1const testNumber1 = 2
console.log(testNumber1) //2
console.log(window.testNumber1) //undefinedlet testNumber2 = 3
console.log(testNumber2) //3
console.log(window.testNumber2) //undefinedtestStr = 'str'
console.log(testStr) //str
console.log(window.testStr) //str可以看到使用var声明，以及不做变量声明只赋值，该变量都会被挂载到window对象上。
ES6后出现const和let关键字，声明变量不会被挂载到window上。
作用域链
作用域链是变量和函数的可访问性和查找规则。
function outer() {const outerVar = 'Outer variable';function inner() {const innerVar = 'Inner variable';console.log(innerVar); // Inner variableconsole.log(outerVar); // Outer variableconsole.log(globalVar); // Global variable}inner();
}const globalVar = 'Global variable';
outer();从上述代码可以看到，内部函数可以访问自身函数体内的变量，又可以访问外部函数体的变量，还能访问全局变量。作用域链会从内层，到外层，逐层查找。
变量作用域
变量根据使用范围，可以分为：全局变量、局部变量。
在全局作用域中声明的变量称为全局变量，该变量一般是在函数外部，不被函数体或者块级作用域包裹。全局变量的特点是在全局任何地方都可以使用。
全局变量有三种创建方式：
（1）使用var/let/const在全局范围内创建变量
let x = 2
const y = 3
var z = 4function getNum(){console.log(x)console.log(y)console.log(z)
}
getNum()（2）只做变量赋值，不做声明
testStr = 'str'如上，testStr变量会被挂载到window全局对象上，此时也可以在全局范围内使用该变量。
PS：就算是在函数体内赋值，不做变量声明，也会被挂载到全局对象上。如下：
function getNum(){str = 'str'
}
getNum()
console.log(str) // 'str'
console.log(window.str) // 'str'（3）直接在全局对象上声明变量
window.num = 1
console.log(num) // 1
console.log(window.num) // 1在ES6之前，声明在函数体内的变量，被称为局部变量。在ES6后，声明在块级作用域内的变量也被称为局部变量。函数的形参，也属于局部变量。
（1）声明在函数体内
function getNum() {var num = 2let sum = 0;const str = '1'
}
console.log(num, sum, str)此时不管变量是如何声明，在外部打印都会报错
（2）声明在块级作用域内
{var x = 1let y = 2
}
console.log(x) // 1
console.log(y) //y is not defined
可以看到ES6以前没有let/const关键字，不会产生块级作用域，使用var无法产生局部变量。
使用let/const后，在块级作用域外部，无法访问局部变量。
全局变量与局部变量执行效率对比
- 全局变量：浏览器关闭时，变量才会被销毁，比较占用内存
- 局部变量：当其所在代码块运行结束后，就会被销毁，比较节约内存
当全局变量和局部变量重名，局部变量会屏蔽全局变量，以局部变量为准。
变量提升
JS在解析代码前，会有预处理阶段，将当前JS代码中所有变量定义和函数定义，放到所有代码的最前面。这就是变量提升的由来。
（1）使用var声明的变量会存在变量提升的问题，如下：
console.log(str) // undefined
var str = 'str'这里输出undefined并没有报错，说明存在变量提升。
（2）如果不进行变量声明，则不会产生变量提升的问题。如下：
console.log(a); //a is not defined
a = 123; //此时a相当于window.a可以看到已经报错了，只有用var声明的变量才会存在变量提升。
（3）在局部变量也存在变量提升，如下：
foo();function foo() {if (false) {var i = 123;}console.log(i); //undefined
}即便if中的语句不被指向，也会被提前声明
函数提升
从上述代码可以看出，函数声明也存在函数提升，函数提升是默认存在的，目的是为了方便开发者，可以随意放置函数的位置。
函数表达式
fun1() //fun1 is not a function
var fun1 = function() {console.log('fun1执行')
}fun2() //Cannot access 'fun2' before initialization
const fun2 = function () {console.log('fun2执行')
}从上述代码可以看到，函数表达式不存在提升问题，不过这两个报错不同。
函数提升优先级高于变量提升
fun() //'B'//变量提升
var fun = function () {console.log('A')
}
//函数提升
function fun() {console.log('B')
}
fun() //'A'这个问题，在上一个代码块中做了说明，实际上函数表达式不存在提升的问题，因此用函数表达式声明的fun一开始并没有被执行。
而函数存在提升，因此第一个fun()执行的是存在函数提升的函数体。
而变量赋值会导致函数被覆盖，可以看到变量赋值可以改变函数体。【函数表达式可以覆盖函数】
自从ES6出现let和const后，就不存在这个问题了，因为重名变量会报错，Identifier 'fun' has already been declared
再来看一下这个例子：
var str = '1';function foo() {console.log(str); // 1console.log(window.str) // 1str = 2;
}foo();
console.log(str); //2
console.log(window.str) // 2上述代码中，str作为全局变量，使用var声明后被挂载到window上，在局部作用域中仍然可以被使用，并且可以被改变。
PS：定义形参就相当于在函数作用域中声明了变量。如下：
function fun(data){console.log(data)
}
fun() //undefined
fun(123) //123块级作用域
在其他编程语言中（如Java、C#等），存在块级作用域，使用{}大括号包起来。如在Java中，if语句中声明的变量，只能在if语句中使用：
if(true){int num = 123;system.out.print(num); // 123
}
system.out.print(num); // 报错但是在ES5中并不存在块级作用域的概念。直到ES6中出现let和const关键字，由这两个关键字声明的变量，存在块级作用域。
if(true) {var str = 'str'console.log(str) //'str'
}
console.log(str) //'str'
从上述代码可以看到，不在if的范围内，仍然可以使用该函数体内声明的变量。
