js中的作用域与作用域链

作用域

1. 理解
   就是一块“地盘”，一个代码段所在的区域
   他是静态的（相对于上下文对象），在编写代码时就确定了
2. 分类
   全局作用域
   函数作用域
   没有块作用域（ES6有了）
   例：

   if(true) {
            var c = 3
        }
        console.log(c) //输出3

3. 作用
   隔离变量，不同作用域下同名变量不会有冲突

例：

var a = 10,
         b = 20
         function fn(x) {
             var a = 100,
                c  = 300;
                console.log('fn()',a,b,c,x) //输出 fn() 100 20 300 10
                function bar(x) {
                    var a = 1000,
                        d = 400
                        console.log('bar()',a,b,c,d,x) //输出 bar() 1000 20 300 400 100
                }
                bar(100)
         }
         fn(10)

作用域与执行上下文

1. 区别1
   全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时 就已经确定了。而不是在函数调用时。
   全局执行上下文环境是在全局作用域确定之后，js代码马上执行之前创建。
   函数执行上下文环境是在调用函数时，函数体执行代码之前创建

2. 区别2
   作用域是静态的，只要函数定义好了就一直存在，且不会再变化
   上下文环境是动态的，调用函数时创建，函数调用结束时就自动释放

3. 联系
   上下文环境（对象）是从属于所在的区域
   全局上下文环境==>全局作用域
   函数上下文环境==>对应的函数使用域

例：

  var a = 10,
            b = 20
        function fn(x) {
            var a = 100,
                c = 300;
            console.log('fn()', a, b, c, x) //输出 fn() 100 20 300 10
            function bar(x) {
                var a = 1000,
                    d = 400
                console.log('bar()', a, b, c, d, x)  //输出 bar() 1000 20 300 400 100
            }
            bar(100)
        }
        fn(10)

作用域链

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()