JavaScript中关于作用域与作用链

1.作用域

                理解

•  就是一块"地盘", 一个代码段所在的区域
• 它是静态的(相对于上下文对象), 在编写代码时就确定了

                分类

• 全局作用域
• 函数作用域
• 没有块作用域(ES6有了) -->(java语言也有)

                作用

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

/*  //没块作用域
 if(true) { var c = 3 }
 console.log(c)
 */
 var a = 10,
   b = 20
 function fn(x) {
   var a = 100, c = 300;
   console.log('fn()', a, b, c, x) //100 20 300 10
   function bar(x) {
     var a = 1000, d = 400
     console.log('bar()', a, b, c, d, x)
   }
   bar(100)//1000 20 300 400 100
   bar(200)//1000 20 300 400 200
 }
 fn(10)

2.作用域与执行上下文的区别与联系

        区别1:

• 全局作用域之外，每个函数都会创建自己的作用域，
• 作用域在函数定义时就已经确定了。而不是在函数调用时
• 全局执行上下文环境是在全局作用域确定之后, js代码马上执行之前创建
• 函数执行上下文是在调用函数时, 函数体代码执行之前创建
• 作用域是静态的, 只要函数定义好了就一直存在, 且不会再变化
• 执行上下文是动态的, 调用函数时创建, 函数调用结束时就会自动释放
• 执行上下文(对象)是从属于所在的作用域
• 全局上下文环境==>全局作用域
• 函数上下文环境==>对应的函数使用域

3.作用域链

        - 理解

• 多个上下级关系的作用域形成的链, 它的方向是从下向上的(从内到外)
• 查找变量时就是沿着作用域链来查找的

        - 查找一个变量的查找规则

• 在当前作用域下的执行上下文中查找对应的属性, 如果有直接返回, 否则进入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)//报错  
   }
   fn2()//
 }
 fn1()//

4.面试题

        ① 作用域在函数定义时就已经确定了。而不是在函数调用时

作用域1:作用域在函数定义时就已经确定了。而不是在函数调用时

var x = 10;
function fn() {
  console.log(x);// 10，因为fn的作用域不再show方法里，定义方法的时候作用域就确定了
}
function show(f) {
  var x = 20;
  f();
}
show(fn);//10

 ② 对象变量不能产生局部作用域

var fn = function () {
  console.log(fn)
}
fn()

var obj = {
  fn2: function () {
   console.log(fn2)
   // 报错：fn2 is not defined，先在这个方法里面找fn2,如果没有在外部作用域（window）找
   //console.log(this.fn2)
  }
}
obj.fn2()

var fn = function () {
  console.log(fn)
}
fn()
// function定义，总共有两个作用域：函数内部和全局上，函数内部没有，找到全局有，所以打印出fn函数的定义

var obj = {
  fn2: function () {
   //console.log(fn2)
   console.log(this.fn2)
  }
}
obj.fn2()
//报错，也是两个作用域函数内部和全局的，函数内部没有，全局也没有所以fn2是没有定义的，结果是报错的