作用域与作用域链

一、作用域

• 理解
  • 就是一块“地盘”，一个代码所在的区域
  • 它相对上下文对象是静态的，在编写代码时就确定了
• 分类
  • 全局作用域
  • 局部作用域
  • 没有块级作用域（ES6才有）
• 作用
  • 隔离变量，不同作用域下同名变量不会有冲突
• 例题

	  var a = 10,
	      b = 20
	  console.log(a)
	  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(200)
	  }
	  fn(10)
	  console.log(a)

• 分析：符合执行上下文栈
  • 入栈顺序依次为，全局，fn(10)，bar(100),bar(200)，
  • 出栈顺序依次为：bar(200),bar(100),fn(10)
  • 因为局部函数没有出现递归调用，所以局部函数出栈时不执行任何代码，当fn（10）出栈后执行全局作用域下的代码console.log(a)
• 结果

二、作用域与执行上下文

• 区别一
  • 全局作用域之外，每个函数都会创建自己的作用域，作用域在函数定义时就已经确定了，而不是在函数调用时
  • 全局执行上下文是在全局作用域确定之后，JS代码马上执行之前创建
  • 函数执行上下文是在调用函数时，函数代码执行之前创建
• 区别二
  • 作用域是静态的，只要函数定义好了就会一直存在，且不会再变化
  • 上下文环境是动态的，调用函数时创建，调用结束就会被自动释放（与垃圾回收机制无关）
  • 函数大多会被自动释放，变量会被垃圾回收器（GC）定时回收
• 联系
  • 上下文环境是从属于所在的作用域的

	  var a = 10,
	      b = 20
	  console.log(a)
	  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(200)
	  }
	  fn(10)
	  console.log(a)

• 分析：

三、作用域与链

• 由里向外一层层查找，知道找到为止
  

四、面试题

  var x = 10;
  function fn() {
    console.log(x);
  }
  function show(f) {
    var x = 20;
    f();
  }
  show(fn);

• 分析：作用域在代码执行前就已经确定，所以最终的输出结果为10
• 结果： 10
• 例二

	  var fn = function () {
	    console.log(fn)
	  }
	  fn()
	
	  var obj = {
	    fn2: function () {
	      console.log(fn2)
	    }
	  }
	  obj.fn2()

• 分析：第一个可以正常打印输出函数，第二个会报错，因为obj是一个对象，所以fn2没有挂载到全局作用域下的window对象上，如果想正常访问可以改为console.log(this.fn2)
• 结果：
  function () {
  console.log(fn)
  }，
  报错