1、什么是作用域？
每个变量和函数，都有其作用的范围，超出这个范围，就不能使用了，这个范围就叫做“作用域”，我们举个例子，一个文件中的变，在另一个文件中直接访问，是访问不到的，两个文件是两个“域”，两个文件中的私有量，另一个文件无法访问，因为超出了“域”。
2、我们想用另一个文件中的变量，怎么办？把两个文件合并到一起吧，是不是就可以用了？我们可以把两个文件称为“局部作用域”，把合并后的文件称为“全局作用域”。如果在函数内部，我们直接使用一个量，例如下面的例子，在test中直接使用a,程序会先在test中查找，不管是在使用a前，还是在使用a后，函数内部只要定义了a,那么程序就认为，a现在是局部作用的，不用再“提升”到全局去查找了，由于这个例子实在后面定义的，这时alert(a) // undefined。如果，test函数内部从前到后，并没有定义变量a，这时程序在test内找不到var a = xxxx，才会把查找a定义的过程放大到全局，发现全局定义了var a = 'aa'，这时alert(a) // aa。这个查找的过程的顺序，叫做“作用域链”。
函数可以自动“预解析”，即便是在使用函数的语句后面定义，也可以把函数定义先解析，再使用。
var a = "aa"
function test() {
alert(a) // undefined, 在函数内部，找到了定义，所以不会往上层去找，但是还没有执行到，所以undefined
var a = 'bb'
alert(a) // 找到局部作用域，且有值，返回“bb”
}
test()
alert(a) // 在全局作用下找到的a = "aa", 直接返回
test() // 和上次执行的结果一致，不受第一次执行的影响 //相当于这样写：
var a = "aa"
function test() {
var a //定义提前
alert(a)
var a = 'bb' //赋值不变
alert(a)
}
test()
alert(a)
function test2() {
b() // 函数可以“预解析”，正确执行
var a = 1
function b() {
console.log(1)
console.log(a) // undefined，找到了定义在下面的a，不再往外层找
var a = 2 // 内层函数的a定义
}
console.log(a) // 外层函数的a
}
test2() // 1 undefined 1
再来看一个例子：（内部可以访问外部，但外部的不能访问内部的 ）
var a=10;
function aaa(){
alert(a);
};
function bbb(){
var a=20;
aaa();
}
bbb(); //结果为10，在bbb中执行aaa，相当于aaa自己直接调用，此时调用aaa的this指向window
// 所以无法往下层去找变量，访问不到bbb()里面的局部变量，所以访问到的是全局的a=10。不要被写在bbb中迷惑了
继续上例子：（只要不是用var (ES6-)，就会定义成全局变量）
function aaa(){
a=10;
}
aaa();
alert(a); //结果为10;
//等价于：
var a;
function aaa(){
a=10;
};
aaa();
alert(a);
再来一个：
function aaa(){
a=10;
}
alert(a); // 报错，虽说不写var，可以成为全局变量，但是要先调用函数，经过aaa的使用，才可以成为全局的，否则aaa不使用，外面的谁也别想用
// 改成这样，就成为全局变量了：
function aaa(){
a=10;
}
aaa()
alert(a);
更上一层楼：
var i = 10 // 全局变量
function a() {
i = 20 // 局部变量
console.log(i) //
for (var i = 0; i < 6; i++) {
console.log(i) // 0-5
}
console.log(this.i) // 执行a()，相当于window.a()，当前this指向window，所以是全局变量10
console.log(i) // 6: 0-5之后，i++ => 6
}
a()
console.log(i) // 全局变量10
高级点的：
var x = 1
function a() {
console.log(x)
setTimeout(() => {
console.log(x, "SetTimeut")
})
new Promise(resolve => {
console.log(x, "Promise")
resolve()
console.log(2)
}).then(() => {
console.log(x, 'then')
})
var x = 'hello world'
console.log(x)
}
a()
// undefined , undefinde "Promise", 2, hello word,
// hello word "then", hello world 'setTimeout'
再高级一点： with语句作用域分析：MDN中给出with的解释是：扩展一个语句的作用域链。JavaScript查找某个未使用命名空间（可以理解为未定义）的变量时，会通过作用域链来查找，作用域链是跟执行代码的context（当前作用域）或者包含这个变量的函数有关。'with'语句將某个对象添加到作用域链的顶部，如果在statement（with内部语句）中有某个未使用命名空间的变量，跟作用域链中的某个属性同名，则这个变量将指向这个属性值。如果沒有同名的属性，则将拋出ReferenceError异常。
with (expression) {
statement
}
function f(x, o) {
with (o)
print(x);
}
f被调用时，x有可能能取到值，也可能是undefined，如果能取到, 有可能是在o上取的值，如果o中没有这个属性的话，就去取函数的第一个参数x的值。如果你忘记在作为第二个参数的对象o中定义x这个属性，程序并不会报错，只是取到另一个值而已。
function f(foo, values) {
with (foo) {
console.log(values)
}
}
如果是在ECMAScript 5环境调用f([1,2,3], obj)，则with语句中变量values将指向函数的第二个参数values。但是，ECMAScript 6标准给Array.prototype添加了一个新属性values，所有数组实例将继承这个属性。所以在ECMAScript 6环境中，with语句中变量values将指向[1,2,3].values。
看个例子：
var a = 1
function f() {
var o = {a: 3}
with (o) {
console.log(a); // 现在a在函数内部未定义，但是with依然可以去参数中查找，发现o中有a属性，不再去全局查找，所以要取o.a = 3
var a = 2 // 因为o中有a，所以 这里的a 指向 o.a
console.log(o.a) //
console.log(a) // 这里的a 也是指o.a
}
}
f()