资讯专栏INFORMATION COLUMN

【闯关模式】作用域、链和闭包 中

airborne007 / 1650人阅读

摘要:前言上篇闯关模式作用域链和闭包上任务三全局作用域和变量遮蔽全局作用域理解作用域链在哪结束很重要所有的运行时环境都必须隐式创建一个全局作用域对象浏览器中是,中是,这个对象就位于作用域链的顶端在任务一中,我们忽略了一个细节,即当不使用或者等定义

前言

上篇:【闯关模式】作用域、链和闭包 上

任务三 Global Scope & Shadowing

全局作用域和变量遮蔽

全局作用域(Global Scope)

理解作用域链在哪结束很重要!
所有的JS运行时环境都必须隐式创建一个全局作用域对象(浏览器中是window,node中是global),这个对象就位于作用域链的顶端:

    (global)
       ↑
       |
   someFunc()
       ↑
      / 
     /   
    /     
inner()  inner2()
           ↑
           |
         foo()

在任务一中,我们忽略了一个细节,即当不使用var或者let等定义变量的时候,这个变量就暴露给了外部作用域。

JS运行环境根据以下算法来赋值一个变量:

查找当前作用域

如果没找到,查找直接外部作用域

如果找到,至6

如果没找到,重复2和3直到到达全局作用域

如果在全局作用域没有找到,创建之(在windowglobal对象上)

赋值

这样的话,在第5步就有可能意外创建一个全局变量了

全局作用域 栗子:

function someFunc() {
   var scopedVar = 1;
   function inner() {
      foo = 2;
   }
}

注意到foo的定义缺少了var或者let
JS运行环境就会根据上面的算法,先查找inner(),然后是someFunc(),最好是全局作用域,第5步被执行了,所以foo变成了全局变量(window.foo/global.foo)

换一种说法:当你忘了写var,本来在inner中定义的变量foo就可能被外部作用域修改,所以someFunc()这个作用域就有了本不该有的权限(访问内部变量foo

记好了:只有内部作用域可以访问外部作用域,在上面的例子中someFunc()是在全局作用域里面,所以才可以访问foo

变量遮蔽(Shadowing)

在上面的算法中,变量的创建属于其中的第0步:当varlet被使用,变量就被绑定在了当前作用域,然后任何该变量的赋值部分再继续上面的算法。

在两个不同作用域中定义两个名字完全相同的变量也是可以的:

function someFunc() {
   var foo = 1;
}
function anotherFunc() {
   var foo = 2;
}

同样在嵌套作用域中这样做也可以:

function someFunc() {
   var foo = 1;
   function inner() {
      var foo = 2;
   }
}

这就叫变量遮蔽inner()中的foo遮蔽(Shadow)住了someFunc中的foo

即:inner()作用域只能访问自己的foo,无法再访问定义在someFunc()中的foo

当然,这种行为在深度嵌套或者巨型函数中也容易导致bug,需要多加注意!

你的任务

修改你之前的任务代码,为foo()中的全局变量quux(不使用var或者let定义)赋一个值,在zip()中定义一个影子变量quux。同时这两个变量的值不要相同。

完成后执行:scope-chains-closures verify 验证答案

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

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

相关文章

  • 闯关模式作用链和闭包

    摘要:前言上篇闯关模式作用域链和闭包中任务四闭包闭包在中是很重要的概念,他们让出色地完成异步任务。所以说,作用域,作用域链,闭包,垃圾回收机制,他们都是息息相关的你的任务你需要用的来检验垃圾回收机制的运行。 前言 上篇 【闯关模式】作用域、链和闭包 中 任务四 闭包(Closures) 闭包在JS中是很重要的概念,他们让JS出色地完成异步任务。 为了能更好的理解闭包,我们先来看作用域链的例子...

    firim 评论0 收藏0
  • 闯关模式作用链和闭包

    摘要:前言这个系列是翻译自中的直接闯关作用域链和闭包作用域,作用域链,闭包和垃圾回收机制都有一个共同点学了就忘闭包到底是干啥的啥时候发生垃圾回收机制作用域链到底是啥这个教程让你发现这些都是小意思。 前言 这个系列是翻译自 nodeschool.io中的 scope-chains-closures 直接闯关: npm install -g scope-chains-closures scope...

    shinezejian 评论0 收藏0
  • JavaScript 闯关

    摘要:对象数组初始化表达式,闯关记之上文档对象模型是针对和文档的一个。闯关记之数组数组是值的有序集合。数组是动态的,根闯关记之语法的语法大量借鉴了及其他类语言如和的语法。 《JavaScript 闯关记》之 DOM(下) Element 类型 除了 Document 类型之外,Element 类型就要算是 Web 编程中最常用的类型了。Element 类型用于表现 XML 或 HTML 元素...

    mj 评论0 收藏0
  • 《JavaScript 闯关记》之作用闭包

    摘要:作用域和闭包是最重要的概念之一,想要进一步学习,就必须理解作用域和闭包的工作原理。全局和局部作用域的关系在函数体内,局部变量的优先级高于同名的全局变量。作用域链的用途,是保证对执行环境有权访问的所有变量和函数的有序访问。 作用域和闭包是 JavaScript 最重要的概念之一,想要进一步学习 JavaScript,就必须理解 JavaScript 作用域和闭包的工作原理。 作用域 任何...

    Jacendfeng 评论0 收藏0
  • 【进阶2-1期】深入浅出图解作用链和闭包

    摘要:本期推荐文章从作用域链谈闭包,由于微信不能访问外链,点击阅读原文就可以啦。推荐理由这是一篇译文,深入浅出图解作用域链,一步步深入介绍闭包。作用域链的顶端是全局对象,在全局环境中定义的变量就会绑定到全局对象中。 (关注福利,关注本公众号回复[资料]领取优质前端视频,包括Vue、React、Node源码和实战、面试指导) 本周开始前端进阶的第二期,本周的主题是作用域闭包,今天是第6天。 本...

    levius 评论0 收藏0

发表评论

0条评论

airborne007

|高级讲师

TA的文章

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