资讯专栏INFORMATION COLUMN

作用域链

zgbgx / 1914人阅读

摘要:作用域链作用域就近原则在写下声明就能确定的,叫做词法作用域词法作用域可以确定是哪个,但不能确定的值关于作用域链,浏览器内部究竟发生了什么例子声明前置调用调用例子声明前置调用调用例子声明前置调用调用例子,,,,,,声明前置调用调用调用

作用域链

作用域:就近原则
在写下声明就能确定的,叫做词法作用域

var a = 1
function bar(){
  var a = 2
  console.log(a)    //2
}

词法作用域可以确定是哪个a,但不能确定a的值

var a
function foo(){
  var a = 1
  bar()
}
function bar(){
  console.log(a)    //100
}
a = 100
foo()

关于作用域链,浏览器内部究竟发生了什么:
例子1:

var x = 10
bar() 
function foo() {
  console.log(x)    //10
}
function bar(){
  var x = 30
  foo()
}

1. 声明前置
globalContext = {
  AO:{
    x:10,
    foo:function(){},
    bar:function(){}
  },
  Scope:null
}
foo.[[scope]] = globalContext.AO
bar.[[scope]] = globalContext.AO

2. 调用 bar
barContext = {
  AO:{
    x:30
  }
  Scope:bar.[[scope]] = globalContext.AO
}

3. 调用 foo
fooContext = {
  AO:{}
  Scope:foo.[[scope]] = globalContext.AO
}

例子2:

var x = 10;
bar() 
function bar(){
  var x = 30;
  function foo(){
    console.log(x) //30
  }
  foo();
}

1. 声明前置
globalContext = {
  AO:{
    x:10
    bar:function
  }
  Scope:null
}
bar.[[scope]] = globaleContext.AO

2. 调用 bar
barContext = {
  AO:{
    x:30
    foo:function
  }
  Scope:bar.[[scope]] = globaleContext.AO
}
foo.[[scope]] = barContext.AO

3. 调用 foo
fooContext = {
  AO:{}
  Scope:foo.[[scope]] = barContext.AO
}

例子3:

var x = 10;
bar() 
function bar(){
  var x = 30;
  (function (){
    console.log(x)    //30
  })()
}

1. 声明前置
globalContext = {
  AO:{
    x:10
    bar:function
  }
  Scope:null
}
bar.[[scope]] = globalContext.AO

2. 调用 bar
barContext = {
  AO:{
    x:30
      function
  }
  Scope:bar.[[scope]] = globalContext.AO
}
function.[[scope]] = barContext.AO

3. 调用 function
functionContext = {
  AO:{}
  Scope:function.[[scope]] = barContext.AO
}

例子4:

var a = 1;
function fn(){
  console.log(a)    //1,undefined
  var a = 5
  console.log(a)    //2,5
  a++
  var a
  fn3()
  fn2()
  console.log(a)    //5,20
  function fn2(){
    console.log(a)    //4,6
    a = 20
  }
}
function fn3(){
  console.log(a)    //3,1
  a = 200
}
fn()
console.log(a)        //6,200

1. 声明前置
globalContext = {
  AO:{
    a:200
    fn:function
    fn3:function
  }
  Scope:null
}
fn.[[scope]] = globalContext.AO
fn3.[[scope]] = globalContext.AO

2. 调用 fn
fnContext = {
  AO:{
    a:20
    fn2:funcion
  }
  Scope:fn.[[scope]] = globalContext.AO
}
fn2.[[scope]] = fnContext.AO

3. 调用 fn3
fn3Context = {
  AO:{}
  Scope:fn3.[[scope]] = globalContext.AO
}

4. 调用 fn2
fn2Context = {
  AO:{}
  Scope:fn2.[[scope]] = fnContext.AO
}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/96671.html

相关文章

  • 理解JavaScript中的作用域和作用域链

    摘要:示例当一个函数创建后,它的作用域链会被创建此函数的作用域中可访问的数据对象填充。每一个运行期上下文都和一个作用域链关联。此时,作用域链中函数的所有局部变量所在的作用域对象会被推后,访问代价变高了。 作用域 作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期。在JavaScript中,变量的作用域有全局作用域和局部作用域两种。 作用域链 函数对象有一个内部属性[...

    XanaHopper 评论0 收藏0
  • 20170525-执行环境、作用域链作用

    摘要:当执行流进入一个函数时,函数的环境就会被推入一个环境栈中。在函数执行完后,栈将其环境弹出,把控制权返回给之前的执行环境。执行环境可以分为创建执行销毁三个阶段。在这个阶段,作用域链会被初始化,的值也会被最终确定。 执行环境 执行环境中定义了变量和函数有权访问的其他数据,决定了他们各自的行为。 当JavaScript解释器初始化执行代码时,它首先默认进入全局执行环境,从此刻开始,函数的每...

    gnehc 评论0 收藏0
  • 深入学习js之——作用域链

    摘要:开篇作用域是每种计算机语言最重要的基础之一,因此要想深入的学习作用域和作用域链就是个绕不开的话题。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。这时候执行上下文的作用域链,我们命名为至此,作用域链创建完毕。 开篇 作用域是每种计算机语言最重要的基础之一,因此要想深入的学习JavaScript,作用域和作用域链就是个绕不开的话题。 在《深入学习js之—-执行上下文栈》中我们提到...

    lemanli 评论0 收藏0
  • 形象化模拟作用域链,深入理解js作用域、闭包

    摘要:至此作用域链创建完毕。好了,通过深入理解作用域链,我们能跟好的理解的运行机制和闭包的原理。 前言 理解javascript中的作用域和作用域链对我们理解js这们语言。这次想深入的聊下关于js执行的内部机制,主要讨论下,作用域,作用域链,闭包的概念。为了更好的理解这些东西,我模拟了当一个函数执行时,js引擎做了哪些事情--那些我们看不见的动作。 关键词: 执行环境 作用域 作用域链 变...

    txgcwm 评论0 收藏0
  • JS 执行上下文栈 / 作用域链

    摘要:每一个执行上下文可以访问的对象包括自身的作用域和父执行上下文的作用域和父父执行上下文作用域直到全局作用域,这就产生了作用域链。语句结束后,作用域链恢复正常。 0、自己理解 代码执行或函数调用生成执行上下文(只有当前执行上下文有执行权),该执行上下文内只能访问当前执行上下文的变量、函数和上一级执行上下文中的变量、函数,激活下一个执行上下文的时候执行权转移到新的执行上下文,形成执行上下文栈...

    yunhao 评论0 收藏0
  • [学习笔记] JavaScript 作用域链

    摘要:全局执行环境的变量对象始终是作用域链中的最后一个变量对象。综上,每个函数对应一个执行环境,每个执行环境对应一个变量对象,而多个变量对象构成了作用域链,如果当前执行环境是函数,那么其活动对象在作用域链的前端。 1.几个概念 先说几个概念:函数、执行环境、变量对象、作用域链、活动对象。这几个东东之间有什么关系呢,往下看~ 函数 函数大家都知道,我想说的是,js中,在函数内部有两个特殊...

    ?xiaoxiao, 评论0 收藏0

发表评论

0条评论

zgbgx

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<