美文网首页
作用域链

作用域链

作者: astak3 | 来源:发表于2019-01-14 23:12 被阅读0次

作用域链

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

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
}

相关文章

  • 作用域链和闭包

    在谈作用域链之前先说一下与作用域链关系紧密的执行环境和作用域。 作用域:作用域指的是变量的适用范围。 作用域链:作...

  • 作用域链

    作用域链 把多个作用域串起来便形成了作用域链;每个函数在初始化完成之后就拥有了各自的作用域链,但此时的作用域链中并...

  • web性能实践

    一. 作用域 前面我们了解作用域概念的以及作用域链是如何运作的。 随着作用域链中的作用域数量的增加,访问当前作用域...

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

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

  • js 总结七07-19

    作用域 全局 局部 作用域链 闭包

  • 作用域和闭包

    作用域链 (据我所知)所有的编程语言都存在作用域链。整个代码存在全局作用域、函数作用以及块级作用域。 上述代码将会...

  • 2023-01-12

    变量提升调用栈块级作用域作用域链和闭包 闭包 => 作用域链(词法作用域) => 调用栈(栈溢出) => 上下文...

  • JavaScript 作用域链与闭包

    作用域链与闭包 了解作用域链之前需要先了解下作用域是什么。 作用域 几乎所有的语言都有作用域的概念。这是因为它们都...

  • 作用域/作用域链 闭包及其使用

    一、作用域、作用域链 作用域(scope) 浅显的理解: 作用域就是变量的可用范围(scope) 为什么要有作用域...

  • 作用域链

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

网友评论

      本文标题:作用域链

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