一次让你了解全部JavaScript的作用域


Posted in Javascript onJune 24, 2019

前言

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

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

全局作用域

在任何函数、块或模块范围之外定义的变量具有全局作用域。可以在程序的任意位置访问全局变量。
当启用模块系统时,创建全局变量会变得困难,但仍然可以做到这一点。可以在 HTML 中定义一个变量,这个变量需要在函数之外声明,这样就可以创建一个全局变量:

<script>
let GLOBAL_DATA = { value : 1};
</script>
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 没有块作用域。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js删除所有的cookie的代码
Nov 25 Javascript
怎么选择Javascript框架(Javascript Framework)
Nov 22 Javascript
jQuery通过Ajax返回JSON数据
Apr 28 Javascript
js生成随机数(指定范围)的实例代码
Jul 10 Javascript
jQuery EasyUI API 中文帮助文档和扩展实例
Aug 01 Javascript
AngularJS过滤器filter用法实例分析
Nov 04 Javascript
easyui form validate总是返回false的原因及解决方法
Nov 07 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
Three.js利用Detector.js插件如何实现兼容性检测详解
Sep 26 Javascript
微信小程序 如何引入外部字体库iconfont的图标
Jan 31 Javascript
解决vue无法侦听数组及对象属性的变化问题
Jul 17 Javascript
Ant Design Vue table中列超长显示...并加提示语的实例
Oct 31 Javascript
通过循环优化 JavaScript 程序
Jun 24 #Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
Jun 24 #Javascript
node中实现删除目录的几种方法
Jun 24 #Javascript
什么时候不能在 Node.js 中使用 Lock Files
Jun 24 #Javascript
vue-cli脚手架引入弹出层layer插件的几种方法
Jun 24 #Javascript
浅谈一个webpack构建速度优化误区
Jun 24 #Javascript
vue项目中运用webpack动态配置打包多种环境域名的方法
Jun 24 #Javascript
You might like
php实现将任意进制数转换成10进制的方法
2015/04/17 PHP
php数组随机排序实现方法
2015/06/13 PHP
laravel-admin的图片删除实例
2019/09/30 PHP
JS对外部文件的加载及对IFRMAME的加载的实现,当加载完成后,指定指向方法(方法回调)
2011/07/04 Javascript
Jquery操作下拉框(DropDownList)实现取值赋值
2013/08/13 Javascript
javascript贪吃蛇完整版(源码)
2013/12/09 Javascript
js图片自动轮播代码分享(js图片轮播)
2014/05/06 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
javascript解决小数的加减乘除精度丢失的方案
2016/05/31 Javascript
D3.js实现散点图和气泡图的方法详解
2016/09/21 Javascript
Bootstrap Modal遮罩弹出层代码分享
2016/11/21 Javascript
js获取当前时间(昨天、今天、明天)
2016/11/23 Javascript
jQuery插件FusionCharts实现的MSBar3D图效果示例【附demo源码】
2017/03/23 jQuery
Nodejs中使用phantom将html转为pdf或图片格式的方法
2017/09/18 NodeJs
Angularjs添加排序查询功能的实例代码
2017/10/24 Javascript
使用mock.js随机数据和使用express输出json接口的实现方法
2018/01/07 Javascript
使用Object.defineProperty如何巧妙找到修改某个变量的准确代码位置
2018/11/02 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
2019/08/26 Javascript
JS控制GIF图片的停止与显示
2019/10/24 Javascript
Python中encode()方法的使用简介
2015/05/18 Python
python tkinter界面居中显示的方法
2018/10/11 Python
破解安装Pycharm的方法
2018/10/19 Python
远程部署工具Fabric详解(支持Python3)
2019/07/04 Python
django3.02模板中的超链接配置实例代码
2020/02/04 Python
Python yield生成器和return对比代码实例
2020/04/20 Python
python 制作python包,封装成可用模块教程
2020/07/13 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
HTML5实现QQ聊天气泡效果
2017/06/26 HTML / CSS
HTML5 文件域+FileReader 分段读取文件并上传到服务器
2017/10/23 HTML / CSS
加拿大在线隐形眼镜和眼镜店:VisionPros
2019/10/06 全球购物
中学生差生评语
2014/01/30 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
优秀党员推荐材料
2014/12/18 职场文书
代理词怎么写
2015/05/25 职场文书
2016道德模范先进事迹材料
2016/02/26 职场文书
使用CSS实现一个搜索引擎的原理解析
2021/09/25 HTML / CSS