[toc]
一.作用域
通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。
JavaScript（es6前）中的作用域有两种：
- 全局作用域
- 局部作用域（函数作用域）
1.1 全局作用域
作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。
1.1.1 在全局作用域中有一个全局对象window，它代表的是一个浏览器的窗口，它由浏览器创建我们可以直接使用
在全局作用域中：
- 创建的变量都会作为window对象的属性保存
- 创建的函数都会作为window对象的方法保存
全局作用域中的变量都是全局变量，在页面的任意部分都可以访问的到。
//全局作用域
var a=123;
var b="jason";
function show(){
console.log(b);//jason
}
show();
//创建的变量都会作为window对象的属性保存
console.log(window);
console.log(window.a==a);//true
console.log(window.b==b);//true
console.log(window.a);//123
1.2 局部作用域（函数作用域）
作用于函数内的代码环境，就是局部作用域。 因为跟函数有关系，所以也称为函数作用域。
1.3 JS 没有块级作用域
- 块作用域由 { } 包括。
- 在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用，如下面的Java代码：
if(true){
int num = 123;
system.out.print(num); // 123
}
system.out.print(num); // 报错
<script>
/*
JS没有块级作用域
1.ES6里新增了块级作用域
2.别的语言Java，C都会有块级作用域
*/
if (true) {
var name = "pink";
}
console.log(name); //pink
</script>
1.4 作用域练习
var a = 10,
b = 20
function fn(x) {
var a = 100,
c = 300;
console.log('fn()', a, b, c, x)
function bar(x) {
var a = 1000,
d = 400
console.log('bar()', a, b, c, d, x)
}
bar(100) //'bar()',1000,20,300,400,100
bar(200) //'bar()',1000,20,300,400,200
}
fn(10) //'fn()',100,20,300,10
二.变量的作用域
2.1 变量作用域的分类
在JavaScript中，根据作用域的不同，变量可以分为两种：
- 全局变量
- 局部变量
2.2 全局变量
在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）。
- 全局变量在代码的任何位置都可以使用
- 在全局作用域下 var 声明的变量 是全局变量
- ==特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）==
2.3 局部变量
在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）
- 局部变量只能在该函数内部使用
- 在函数内部 var 声明的变量是局部变量
- 函数的形参实际上就是局部变量
2.3.1 函数中访问全局变量
在函数中要访问全局变量可以使用window对象。（比如说，全局作用域和函数作用域都定义了变量a,如果想访问全局变量，可以使用window.a）
- 提醒一：
- 使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
- 函数声明也会在函数中所有的代码执行之前执行
2.3.2 执行上下文
执行上下文：当函数执行时，会创建一个执行上下文的内部对象。每调用一次函数，就会创建一个新的上下文对象，他们彼此是相互独立的。每当函数执行完毕，它所产生的执行期上下文会被销毁。
当函数内部的变量被另外一个函数所引用，那么这个函数的变量将不会在执行完毕后销毁
作用域的上下级关系：当函数作用域操作一个变量时，它会先在自身作用域中寻找，如果有就直接使用（就近原则）。如果没有就向上一级作用域中寻找，直到找到全局作用域；如果全局作用域中依然没有找到，则会报错ReferenceError.
2.4 全局变量和局部变量的区别
- ==全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存==
- ==局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间==
三.作用域链
- 只要是代码，就至少有一个作用域
- 写在函数内部的局部作用域
- 如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域
- ==根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链==
3.1 作用域理解
1. 理解
** 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)*
** 查找变量时就是沿着作用域链来查找的*
2. 查找一个变量的查找规则
** 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入2*
** 在上一级作用域的执行上下文中查找对应的属性, 如果有直接返回, 否则进入3*
** 再次执行2的相同操作, 直到全局作用域, 如果还找不到就抛出找不到的异常*
var a = 1
function fn1() {
var b = 2
function fn2() {
var c = 3
console.log(c)//3
console.log(b)//2
console.log(a)//1
console.log(d)//d is not defined
}
fn2()
}
fn1()
3.2 练习一
<script>
function f1() {
var num = 123;
function f2() {
console.log(num);//123
}
f2();
}
var num = 456;
f1();
</script>
作用域链：采取==就近原则==的方式来查找变量最终的值。
3.3 练习二
<script>
var a = 1;
function fn1() {
var a = 2;
var b = '22';
fn2();
function fn2() {
var a = 3;
fn3();
function fn3() {
var a = 4;
console.log(a, typeof (a)); //a的值 ? 4,Number
console.log(b, typeof (b)); //b的值 ? ‘22’,String
}
}
}
fn1();
</script>
四.变量提升
使用var关键字声明的变量（比如var a=1）,会在所有的代码执行之前被声明（但不会被赋值）,但是如果声明变量时不是用var关键字（比如说直接写a=1）,则变量不会被声明提前。
举例一：
console.log(a);//undefined;
var a=123;
打印结果：Undefined.(说明变量a被提前声明了，只是尚未被赋值)
//3.立即执行函数解决变量冲突问题
var a=123;
(function(){
var a=456;//局部变量，用完就销毁
})()
console.log(a);//123
五.作用域与执行上下文
1. 区别1
全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了。而不是在函数调用时
全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
函数执行上下文是在调用函数时, 函数体代码执行之前创建
2. 区别2
作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化
执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放
3. 联系
执行上下文(对象)是从属于所在的作用域
全局上下文环境==>全局作用域
函数上下文环境==>对应的函数使用域
六.面试题
6.1 面试题一：
var x = 10;
function fn() {
console.log(x);
}
function show(f) {
var x = 20;
f();
}
show(fn); //10
6.2 面试题二：
var obj = {
fn2: function () {
//因为fn2没有加this，那么它自动指向window，所以fn2没有定义
//console.log(fn2) //Uncaught ReferenceError: fn2 is not defined
//this为这个这个对象obj
console.log(this.fn2) //fn2
}
}
obj.fn2()
