一次让你了解全部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实现标签页效果(配合css)
Apr 03 Javascript
JavaScript改变HTML元素的样式改变CSS及元素属性
Nov 12 Javascript
自己用jQuery写了一个图片的马赛克消失效果
May 04 Javascript
js验证上传图片的方法
May 12 Javascript
JavaScript实现输入框(密码框)出现提示语
Jan 12 Javascript
初步使用bootstrap快速创建页面
Mar 03 Javascript
用JavaScript动态建立或增加CSS样式表的实现方法
May 20 Javascript
Vue2实现组件props双向绑定
Dec 02 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
简单的三步vuex入门
May 20 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 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
同台服务器使用缓存APC效率高于Memcached的演示代码
2010/02/16 PHP
解析Win7 XAMPP apache无法启动的问题
2013/06/26 PHP
php实现登陆模块功能示例
2016/10/20 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
PHP中关于php.ini参数优化详解
2020/02/28 PHP
基于jquery可配置循环左右滚动例子
2011/09/09 Javascript
Jquery插件之打造自定义的select标签
2011/11/30 Javascript
jQuery extend 的简单实例
2013/09/18 Javascript
图片动画横条广告带上下滚动可自定义图片、链接等等
2013/10/20 Javascript
jQuery中nextAll()方法用法实例
2015/01/07 Javascript
Angularjs过滤器使用详解
2016/05/25 Javascript
jQuery向父辈遍历的简单方法
2016/09/18 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
node.js处理前端提交的GET请求
2019/08/30 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
Python实现多行注释的另类方法
2014/08/22 Python
Python操作MySQL数据库的三种方法总结
2018/01/30 Python
python的pandas工具包,保存.csv文件时不要表头的实例
2018/06/14 Python
python去掉 unicode 字符串前面的u方法
2018/10/21 Python
python Tkinter版学生管理系统
2019/02/20 Python
用python实现刷点击率的示例代码
2019/02/21 Python
Django Sitemap 站点地图的实现方法
2019/04/29 Python
用Pytorch训练CNN(数据集MNIST,使用GPU的方法)
2019/08/19 Python
Python 列表中的修改、添加和删除元素的实现
2020/06/11 Python
阿根廷网上配眼镜:SmartBuyGlasses阿根廷
2016/08/19 全球购物
Bibloo奥地利:购买女装、男装、童装、鞋和配件
2018/10/18 全球购物
澳大利亚购买最佳炊具品牌网站:Cookware Brands
2019/02/16 全球购物
莫斯科隐形眼镜网上商店:Linzi
2019/07/22 全球购物
2013年研究生毕业感言
2014/02/06 职场文书
授权委托书样本
2014/04/03 职场文书
政风行风建设责任书
2014/07/23 职场文书
学习作风建设心得体会
2014/10/22 职场文书
健康状况证明模板
2014/10/23 职场文书
2014年幼儿园老师工作总结
2014/12/05 职场文书
因工资原因离职的辞职信范文
2015/05/12 职场文书
win10+RTX3050ti+TensorFlow+cudn+cudnn配置深度学习环境的方法
2022/06/25 Servers