一网打尽 JavaScript 的作用域

wing324 发布于2019-08-26 13:41 / 1121人阅读

摘要：全局作用域在任何函数块或模块范围之外定义的变量具有全局作用域。的局部函数作用域是函数的词法作用域。作用域链每个作用域都有一个指向父作用域的链接。当使用变量时，会向下查看作用域链，直到它找到所请求的变量或者到达全局作用域即作用域链的末尾。

一网打尽 JavaScript 的作用域

翻译：疯狂的技术宅
https://medium.freecodecamp.o...-javascript-cbd957022652

本文首发微信公众号：jingchengyideng
欢迎关注，每天都给你推送新鲜的前端技术文章

作用域决定了变量的生命周期和可见性，变量在作用域范围之外是不可见的。

JavaScript 的作用域包括：模块作用域，函数作用域，块作用域，词法作用域和全局作用域。

全局作用域

在任何函数、块或模块范围之外定义的变量具有全局作用域。可以在程序的任意位置访问全局变量。

当启用模块系统时，创建全局变量会变得困难，但仍然可以做到这一点。可以在 HTML 中定义一个变量，这个变量需要在函数之外声明，这样就可以创建一个全局变量：


console.log(GLOBAL_DATA);

当没有模块系统时，创建全局变量会容易很多。在任何文件中的函数外声明的变量都是全局变量。

全局变量贯穿于程序的整个生命周期。

另一种创建全局变量的方法是在程序的任意位置使用 window 全局对象：

window.GLOBAL_DATA = { value: 1 };

这样 GLOBAL_DATA 变量会随处可见。

console.log(GLOBAL_DATA)

不过你也知道这种做法是不好的。

模块作用域

如果不启用模块，在所有函数之外声明的变量是全局变量。在模块中，在函数外部声明的变量都是隐藏的，除非显式导出，否则不可用于其他模块。

导出使函数或对象可用于其他模块。在这个例子中，我从模块文件 sequence.js 中导出了一个函数：

// in sequence.js
export { sequence, toList, take };

当前模块可以通过导入来使用其他模块的函数或对象成。

import { sequence, toList, toList } from "./sequence";

在某种程度上，我们可以认为模块是一个自动执行的函数，它将 import 的数据作为输入，然后返回 export 的数据。

函数作用域

函数作用域意味着在函数中定义的参数和变量在函数内的任何位置都可见，但是在函数外部不可见。

下面是一个自动执行的函数，被称为IIFE。

(function autoexecute() {
    let x = 1;
})();
console.log(x);
//Uncaught ReferenceError: x is not defined

IIFE 的意思是立即调用函数表达式，是一个在定义后立即运行的函数。

用 var 声明的变量只有函数作用域。更重要的是，用 var 声明的变量被提升到其作用域的顶部。通过这种方式，可以在声明之前访问它们。看看下面的代码：

function doSomething(){
  console.log(x);
  var x = 1;
}
doSomething(); //undefined

这种事不会发生在 let 中。用 let 声明的变量只能在定义后访问。

function doSomething(){
  console.log(x);
  let x = 1;
}
doSomething();
//Uncaught ReferenceError: x is not defined

用 var 声明的变量可以在同一作用域下多次重新声明：

function doSomething(){
  var x = 1
  var x = 2;
  console.log(x);
}
doSomething();

用 let 或 const 声明的变量不能在同一作用域内重新声明：

function doSomething(){
  let x = 1
  let x = 2;
}
//Uncaught SyntaxError: Identifier "x" has already been declared

也许我们可以不必关心这一点，因为 var 已经开始变得过时了。

块作用域

块作用域用花括号定义。它由 { 和 } 分隔。

用 let 和 const 声明的变量可以受到块作用域的约束，只能在定义它们的块中访问。

思考下面这段关于 let 块范围的代码：

let x = 1;
{ 
  let x = 2;
}
console.log(x); //1

相反，var 声明不受块作用域的约束：

var x = 1;
{ 
  var x = 2;
}
console.log(x); //2

另一个常见问题是在循环中使用类似 setTimeout() 的异步操作。下面的循环代码将显示五次数字 5。

(function run(){
    for(var i=0; i<5; i++){
        setTimeout(function logValue(){
            console.log(i);         //5
        }, 100);
    }
})();

带有 let 声明的 for 循环语句在每次循环都会创建一个新的变量并设置到块作用域。下一段循环代码将会显示 0 1 2 3 4 5。

(function run(){
  for(let i=0; i<5; i++){
    setTimeout(function log(){
      console.log(i); //0 1 2 3 4
    }, 100);
  }
})();

词法作用域

词法作用域是内部函数访问定义它的外部作用域的能力。

看一下这段代码：

(function autorun(){
    let x = 1;
    function log(){
      console.log(x);
    };
    
    function run(fn){
      let x = 100;
      fn();
    }
    
    run(log);//1
})();

log 函数是一个闭包。它从父函数 autorun() 引用 x 变量，而不是 run() 函数中的 x 变量。

闭包函数可以访问创建它的作用域，而不是它自己的作用域。

autorun() 的局部函数作用域是 log() 函数的词法作用域。

作用域链

每个作用域都有一个指向父作用域的链接。当使用变量时，JavaScript 会向下查看作用域链，直到它找到所请求的变量或者到达全局作用域（即作用域链的末尾）。
看下面这个例子：

let x0 = 0;
(function autorun1(){
 let x1 = 1;
  
 (function autorun2(){
   let x2 = 2;
  
   (function autorun3(){
     let x3 = 3;
      
     console.log(x0 + " " + x1 + " " + x2 + " " + x3);//0 1 2 3
    })();
  })();
})();

内部函数 autorun3() 可以访问本地 x3 变量。还可以从外部函数访问变量 x1 和 x2 和全局变量 x0 。

如果找不到变量，它将在严格模式下返回错误。

"use strict";
x = 1;
console.log(x)
//Uncaught ReferenceError: x is not defined

非严格模式也被称为“草率模式”，它会草率的创建一个全局变量。

x = 1;
console.log(x); //1

总结

在全局作用域中定义的变量可在程序的任何位置使用。

在模块中，在函数外部声明的变量都是隐藏的，除非被显式导出，否则不可用于其他模块。

函数作用域意味着函数中定义的参数和变量在函数的任意位置都可见

用 let 和 const 声明的变量具有块作用域。 var 没有块作用域。

本文首发微信公众号：jingchengyideng 欢迎扫描二维码关注公众号，每天都给你推送新鲜的前端技术文章

欢迎继续阅读本专栏其它高赞文章：

12个令人惊叹的CSS实验项目

世界顶级公司的前端面试都问些什么

CSS Flexbox 可视化手册

过节很无聊？还是用 JavaScript 写一个脑力小游戏吧！

从设计者的角度看 React

CSS粘性定位是怎样工作的

一步步教你用HTML5 SVG实现动画效果

程序员30岁前月薪达不到30K，该何去何从

7个开放式的前端面试题

React 教程：快速上手指南

云服务器 GPU云服务器 javascript作用域链 python的作用域 java 的作用域域管理服务器的作用

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

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

Spring IOC知识点一网打尽！

摘要：使用的好处知乎的回答不用自己组装，拿来就用。统一配置，便于修改。前言只有光头才能变强回顾前面：给女朋友讲解什么是代理模式包装模式就是这么简单啦单例模式你会几种写法？工厂模式理解了没有？在刷Spring书籍的时候花了点时间去学习了单例模式和工厂模式，总的来说还是非常值得的！本来想的是刷完《Spring 实战 (第4版)》和《精通Spring4.x 企业应用开发实战》...

djfml 2019-08-15 17:50 评论0 收藏0
Java面试前需要了解的东西

摘要：我在面试前针对基础也花了不少的时间，期间也将自己写过的博文粗略地刷了一遍，同时也在网上找了不少比较好的资料部分是没看完的。看面试题也是校验自己是否真正理解了这个知识点，也很有可能会有新的收获。一、前言只有光头才能变强回顾前面：广州三本找Java实习经历上一篇写了自己面试的经历和一些在面试的时候遇到的题目(笔试题和面试题)。我在面试前针对Java基础也花了不少的时间，期间也将...

renweihub 2019-08-16 12:35 评论0 收藏0
Vue源码详细解析:transclude,compile,link,依赖,批处理...一网打尽，全解

摘要：先说遍历，很简单，如下行左右代码就足够遍历一个对象了遇到普通数据属性，直接处理，遇到对象，遍历属性之后递归进去处理属性，遇到数组，递归进去处理数组元素。这样改进之后我就不需要对数组元素进行响应式处理，只是遇到数组的时候把数组的方法变异即可。用了Vue很久了，最近决定系统性的看看Vue的源码，相信看源码的同学不在少数，但是看的时候却发现挺有难度，Vue虽然足够精简，但是怎么说现在也有1...

yy736044583 2019-08-20 14:37 评论0 收藏0
枯木：天猫双11项目组织协同

摘要：摘要第二届研发效能嘉年华峰会，云效邀请天猫技术部高级技术专家吴建和枯木带来题为天猫双项目组织协同的演讲。所有的这些双项目的组织形式会依赖集团已有的产品线，例如资金平台支付交易链路物流等等这类平台，所有这些项目都会涉及到比较大的组织上的协同。摘要： 2018第二届研发效能嘉年华峰会，云效邀请天猫技术部高级技术专家吴建和（枯木）带来题为天猫双11项目组织协同的演讲。主要内容是从四个方面进...

Ryan_Li 2019-05-29 17:09 评论0 收藏0
Python 进阶之路 (五) map, filter, reduce, zip 一网打尽

摘要：另外，这些中的每一个都是纯函数，有返回值。例如，如果要计算整数列表的累积乘，或者求和等等基础语法参数是连续作用于每一个元素的方法，新的参数为上一次执行的结果，为被过滤的可迭代序列返回值最终的返回结果在中，是一个内置函数。简洁的内置函数大家好，我又回来了，今天我想和大家分享的是Python非常重要的几个内置函数：map，filter，reduce, zip。它们都是处理序列的便捷函数...

ccj659 2019-07-31 10:02 评论0 收藏0