美文网首页Web 前端开发
JavaScript 作用域链

JavaScript 作用域链

作者: passMaker | 来源:发表于2018-07-19 10:43 被阅读42次
  • 函数在执行的过程中,先从自己内部找变量
  • 如果找不到,再从创建当前函数所在的作用域去找,以此往上
  • 注意找的是变量的当前状态

范例

例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

相关文章

网友评论

    本文标题:JavaScript 作用域链

    本文链接:https://www.haomeiwen.com/subject/xmwzpftx.html