理解作用链;

作者: 好奇男孩 | 来源:发表于2018-03-18 23:59 被阅读17次

理解作用链的作用

1.函数在执行的过程中,先从自己内部找变量

2.如果找不到,再从创建当前函数所在的作用域去找, 以此往上

3.注意找的是变量的当前的状态

范例

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

最后执行fn2函数,fn2找不到变量a,接着往上在找到创建当前fn2所在的作用域fn1中找到a=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() //1

同上

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() //undefined

函数fn2在执行的过程中,先从自己内部找变量找不到,再从创建当前函数所在的作用域fn去找,注意此时变量声明前置,a已声明但未初始化为undefined;

理解作用链的原理:

前提:了解全局作用域,函数作用域,变量和函数的声明前置等基础;

函数的生命周期

函数的的生命周期分为创建和执行两个阶段。

  • 在函数创建阶段,JS解析引擎进行预解析,会将函数声明提前,同时将该函数放到全局作用域中或当前函数的上一级函数的局部作用域中。
  • 在函数执行阶段,JS引擎会将当前函数的局部变量和内部函数进行声明提前,然后再执行业务代码,当函数执行完退出时,释放该函数的执行上下文,并注销该函数的局部变量。

变量对象(Variable Object)

  • VO对应的是函数创建阶段,JS解析引擎进行预解析时,所有的变量和函数的声明,统称为Variable Object。

  • 该变量与执行上下文相关,知道自己的数据存储在哪里,并且知道如何访问。

VO是一个与执行上下文相关的特殊对象,它存储着在上下文中声明的以下内容:

  • 变量 (var, 变量声明);
  • 函数声明 (FunctionDeclaration, 缩写为FD);
  • 函数的形参
function add(a,b){
    var sum = a + b;
    function say(){
        alert(sum);
    }
    return sum;
}
// sum,say,a,b 组合的对象就是VO

AO(活动对象)

  • 对应的是函数执行阶段,当函数被调用执行时,会建立一个执行上下文,该执行上下文包含了函数所需的所有变量,该变量共同组成了一个新的对象就是Activetion Object。

该对象包含了:

  • 函数的所有局部变量
  • 函数的所有命名参数
  • 函数的参数集合
  • 函数的this指向
unction add(a,b){
    var sum = a + b;
    function say(){
        alert(sum);
    }
    return sum;
}

add(4,5);
//  我用JS对象来表示AO
//  AO = {
//      this : window,
//      arguments : [4,5],
//      a : 4,
//      b : 5,
//      say : ,
//      sum : undefined
//  }

作用域链

  • 1.当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain)来保证对执行环境有权访问的变量和函数的有序访问。

  • 2.作用域第一个对象始终是当前执行代码所在环境的变量对象(VO),即在当前执行函数的作用域中寻找变量。

  • 3.在函数运行过程中标识符的解析是沿着作用域链一级一级搜索的过程,从第一个对象开始,逐级向后回溯,直到找到同名标识符为止,找到后不再继续遍历,找不到就报错。

举例:


6.png

1 预处理后,进入全局上下文

7.png

2 执行bar()函数

8.png

3 查找变量

9.png

4 执行foo()函数

10.png

作者:彭荣辉
链接:https://www.jianshu.com/u/0f804364a8a8
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章

  • JS_0: 执行环境和作用域链

    JavaScript,目前对于执行环境和作用域链的理解 什么是作用域链? 要讲作用域链就得先讲执行环境。 每个函数...

  • javascript基础知识问答-作用域和闭包

    1.理解词法作用域和动态作用域2.理解JavaScript的作用域和作用域链3.理解JavaScript的执行上下...

  • 作用域&js分号的作用

    以上代码输出为: 原因:作用域:执行上下文中包含作用域链在理解作用域链之前,先介绍一下作用域,作用域可以理解为执行...

  • 作用域链的理解

    作用域链的理解 1可以把作用域链理解成是一个栈结构; 2每个作用域都有一个作用域对象用于保存在该作用域内创建的变量...

  • 作用域链

    作用域链(scope chain) 理解: 作用域链决定了哪些数据能被函数访问。当一个函数创建后,它的作用域链会被...

  • 理解作用链;

    理解作用链的作用 1.函数在执行的过程中,先从自己内部找变量 2.如果找不到,再从创建当前函数所在的作用域去找, ...

  • 5分钟入门闭包

    理解闭包前先要理解两个概念:作用域和作用域链。一、作用域分为: 全局作用域 函数作用域 var a = 100 f...

  • 面试宝典3

    1、说说你对作用域链的理解 作用域链的作用是保证执行环境里有权访问的变量和函数是有序的,作用域链的变量只能向上访问...

  • JavaScript 函数闭包(colsure)

    理解闭包,你首先必须理解JS的变量作用域,JavaScript作用域和作用域链。 ES6之前,变量的作用域分为全局...

  • 作用域链这么重要!怎样形象地理解它?

    JavaScript中有些概念非常重要,例如作用域链、函数式编程等。其中,作用域链概念不仅帮助我们理解变量作用域的...

网友评论

    本文标题:理解作用链;

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