饥人谷技术博客

js作用域链

2018-02-25  本文已影响6人  allen_tian

纯干货,没有废话

先看题目,诸位自测

题目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() //输出多少

题目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() //输出多少

题目3

var a = 1
function fn1(){

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

结果

2//题目1
1//题目2
undefined//题目3

解密

1、函数在执行时先从自己内部的局部作用域中查找变量,找到则用
2、如果在函数内部找不到,则在定义此函数的作用域中查找变量,找到则用
3、如果在定于函数的作用域内还是找不到,则在定义包含此函数的函数的作用域中查找变量,找到则用
4、依次往上,直至全局作用域,如果在全局作用域中依然找不到,则报错

结果浅析

题目1:

执行fn()即执行fn1返回的fn3,在fn3中又调用fn2,fn2中用到变量a,根据作用域链规则查找,首先在fn2内部没有找到变量a,则继续在定义fn2的作用域(题目1中即为函数fn1的内部)中查找变量a,在fn1中定于了变量a=2,因此执行fn()得到结果为2

题目2与题目1类似,不在赘述

题目3:

按照题目1的思路,在题目三中,在定义fn2的作用域中也有变量a=4,那为什么执行fn()得到的结果为undefined呢?那就要引入一个js中变量声明前置的知识点
什么是变量声明前置呢?
所谓变量声明前置就是js引擎在解析js代码时,会将所有的变量都提升至所有js代码的最前面来声明(注意:仅声明提前,赋值不提前)
看个例子:

console.log(a)
var a = 1
//打印结果是什么?
//A.1
//B.报错:a未定义
//C.undefined

答案是undefined
因为存在变量声明前置,所以上面例子的代码等价于:

var a ;//undefined
console.log(a) ;//执行此语句时,变量a已经声明,但未赋值,因此值为undefined
a = 1

回到题目3:
结合变量声明前置,函数fn3等同于:

function fn3() {
  function fn2() {
    console.log(a)
  }
  var a
  fn2()//执行fn2()时,变量a已经声明,但未赋值,因此值为undefined
  a = 4
}

简单理解作用域链:
先找自己,自己没有找爹,爹没有找爹的爹,爹的爹没有找爹的爹的爹,......,直至找到没有爹可找

上一篇 下一篇

猜你喜欢

热点阅读