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

shinezejian 发布于2019-08-19 18:02 / 2592人阅读

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

前言

这个系列是翻译自 nodeschool.io中的 scope-chains-closures

直接闯关：

npm install -g scope-chains-closures

scope-chains-closures

作用域链和闭包

作用域，作用域链，闭包和垃圾回收机制都有一个共同点：学了就忘！
闭包到底是干啥的？
啥时候发生垃圾回收机制？
作用域链到底是啥？

这个教程让你发现这些都是小意思。让你在实践中学习！

任务一作用域

作用域的主要类型是词法作用域。
简单来说是function创建的作用域。（ES6中的块级作用域暂且不提）

初始化变量

变量的初始化取决于作用域的类型

词法作用域

var用来将变量定义在词法作用域中(也就是function中）

function someFunc(){
    var a;
}

a就被函数someFunc框在了词法作用域中

块级作用域

let和const用来将变量定义在块级作用域中（也就是花括号中）

if(true){
    let b;
}

b就被if的花括号框在了块级作用域中

你的任务

在空白的js文件中新建一个函数foo，并包含一个词法作用域中的变量bar

任务二作用域链 作用域嵌套

作用域是可以嵌套的，任务一中提到的词法作用域和块级作用域都可以嵌套其他作用域
（块级作用域仅对ES6而言）

function someFunc(){
    function inner(){
    }
}

inner就是嵌套在someFunc(词法作用域)中的词法作用域

if(true){
    while(false){
    }
}

while就是嵌套在if(块级作用域)中的块级作用域

function someFunc(){
    if(true){
    }
}

if就是嵌套在someFunc(词法作用域)中的块级作用域

作用域中的变量访问

所有的嵌套作用域都遵循以下规则：
内部作用域有权访问外部作用域，反之不成立。

栗子：

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

inner有权访问innerVar和outerVar，但是someFunc只能访问到outerVar

多重嵌套作用域

作用域是可以任意嵌套的，但是都要遵循上面的规则。
再附加一个规则：
兄弟作用域不可相互访问

栗子：

function someFunc(){
    function inner(){
    }
    function inner2(){
    }
}

inner和inner2都是someFunc中的作用域，正如someFunc不能访问inner们的作用域一样，inner们之间也不能相互访问。

作用域树

从上向下看这个嵌套作用域，就是棵树！
看代码：

function someFunc() {
  function inner() {
  }
  function inner2() {
    function foo() {
    }
  }
}

看树：

   someFunc()
       |
      / 
     /   
    /     
   ↓       ↓
inner()  inner2()
           |
           ↓
         foo()

要记住的是：inner作用域可以访问外部作用域，但是反之不成立（foo()可以访问inner2()中的变量,inner2()可以访问someFunc()中的变量），这棵树倒过来似乎更有意义，就成了链！！

作用域链

从最里面看到最外面就构成了作用域链

   someFunc()
       ↑
        
         
          
         inner2()
           ↑
           |
         foo()

你的任务

修改任务一中的代码，让foo中包含一个函数zip，同时zip也包含一个变量quux

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

附录

scope-chains-closures workshop
scope cheatsheet

专线服务超融合服务器作用域中作用域作用域规则作用域实例

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

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

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

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

airborne007 2019-08-19 18:02 评论0 收藏0
【闯关模式】作用域、链和闭包下

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

firim 2019-08-19 18:03 评论0 收藏0
JavaScript 闯关记

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

mj 2019-08-21 18:45 评论0 收藏0
《JavaScript 闯关记》之作用域和闭包

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

Jacendfeng 2019-08-22 10:49 评论0 收藏0
【进阶2-1期】深入浅出图解作用域链和闭包

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

levius 2019-08-23 13:47 评论0 收藏0