JavaScript 作用域链范例

Posted 2020-12-05 Be a stonecutter.

• 函数在执行的过程中，先从自己内部找变量
• 如果找不到，再从创建当前函数所在的作用域去找，以此往上
• 注意找的是变量的当前状态

范例

例1

var a=1
function fn1() {
  function fn2() {
  console.log(a)
  }
    
  function fn3() {
  var a=4 
  fn2()
  }
    
  var a=2
  return fn3
}

var fn=fn1()
fn()  //输出多少

• 执行过程分析

先执行 var a=1，var fn=fn1()，进入function fn1()，执行var a=2，return fn3，进入function fn3()，执行var a =4，fn2()，进入function fn2()，执行console.log(a)，由于本作用域没有a，因此向上一级作用域寻找a，即var a=2，因此输出2。

 

例1 - 输出结果

 

 

例1 - debug

 

例2

var a=1
function fn1() {
  function fn3() {
  var a=4
  fn2()
  }
  
  var a=2
  return fn3
}

function fn2() {
  console.log(a)
}

var fn=fn1()
fn()  //输出多少

• 执行过程分析

执行var a=1，var fn=fn1()，进入function fn1()，执行var a=2，return fn3，执行function fn3()，执行var a=4，fn2()，执行function fn2()，执行console.log(a)，此作用域没有a，所以向上一级作用域寻找a，即最外层的var a=1，因此输出结果1。

 

 

例2 - 输出结果

 

 

例2 - debug

 

例3

var a=1
function fn1() {

  function fn3() {
    function fn2() {
      console.log(a)
    }
    var a
    
    fn2()
    a=4
  }
  var a=2
  return fn3
}
var fn=fn1()
fn()  //输出多少

先执行var a=1，var fn=fn1()，进入function fn1()，执行 var a=2 ， return fn3，进入function fn3()，由于fn2()在var a=4之前，但var a会被前置，即等同于

var a
fn2()
a = 4

所以先执行var a，在执行fn2()，进入function fn2()，执行console.log(a)，这个时候该作用域没有a，去上一层作用域找a，找到var a，但此时的a还没有赋值，因此输出undefined。

 

例3 - 输出结果

 

 

例3 - debug