Javascript作用域和作用域链原理解析


Posted in Javascript onMarch 03, 2020

作用域和作用域链在Javascript和很多其它的编程语言中都是一种基础概念。但很多Javascript开发者并不真正理解它们,但这些概念对掌握Javascript至关重要。

正确的去理解这个概念有利于你去写更好,更高效和更简洁的代码,让你成为一个更优秀的Javascript开发者。

因此,在本文中,我将会向大家解释清楚什么是作用域和作用域链,以及Javascript引擎在内部是如何通过它们操作和查找变量的。

事不宜迟,正文开始 :)

什么是作用域

Javascript中的作用域说的是变量的可访问性和可见性。也就是说整个程序中哪些部分可以访问这个变量,或者说这个变量都在哪些地方可见。

为什么作用域很重要

作用域最为重要的一点是安全。变量只能在特定的区域内才能被访问,有了作用域我们就可以避免在程序其它位置意外对某个变量做出修改。

作用域也会减轻命名的压力。我们可以在不同的作用域下面定义相同的变量名。

作用域的类型

Javascript中有三种作用域:

  • 全局作用域;
  • 函数作用域;
  • 块级作用域;

1. 全局作用域

任何不在函数中或是大括号中声明的变量,都是在全局作用域下,全局作用域下声明的变量可以在程序的任意位置访问。例如:

// 全局变量
var greeting = 'Hello World!';
function greet() {
 console.log(greeting);
}
// 打印 'Hello World!'
greet();

2. 函数作用域

函数作用域也叫局部作用域,如果一个变量是在函数内部声明的它就在一个函数作用域下面。这些变量只能在函数内部访问,不能在函数以外去访问。例如:

function greet() {
 var greeting = 'Hello World!';
 console.log(greeting);
}
// 打印 'Hello World!'
greet();
// 报错: Uncaught ReferenceError: greeting is not defined
console.log(greeting);

3. 块级作用域

ES6引入了let和const关键字,和var关键字不同,在大括号中使用let和const声明的变量存在于块级作用域中。在大括号之外不能访问这些变量。看例子:

{
 // 块级作用域中的变量
 let greeting = 'Hello World!';
 var lang = 'English';
 console.log(greeting); // Prints 'Hello World!'
}
// 变量 'English'
console.log(lang);
// 报错:Uncaught ReferenceError: greeting is not defined
console.log(greeting);

上面代码中可以看出,在大括号内使用var声明的变量lang是可以在大括号之外访问的。使用var声明的变量不存在块级作用域中。

作用域嵌套

像Javascript中函数可以在一个函数内部声明另一个函数一样,作用域也可以嵌套在另一个作用域中。请看例子:

var name = 'Peter';
function greet() {
 var greeting = 'Hello';
 {
  let lang = 'English';
  console.log(`${lang}: ${greeting} ${name}`);
 }
}
greet();

这里我们有三层作用域嵌套,首先第一层是一个块级作用域(let声明的),被嵌套在一个函数作用域(greet函数)中,最外层作用域是全局作用域。

词法作用域

词法作用域(也叫静态作用域)从字面意义上看是说作用域在词法化阶段(通常是编译阶段)确定而非执行阶段确定的。看例子:

let number = 42;
function printNumber() {
 console.log(number);
}
function log() {
 let number = 54;
 printNumber();
}
// Prints 42
log();

上面代码可以看出无论printNumber()在哪里调用console.log(number)都会打印42。动态作用域不同,console.log(number)这行代码打印什么取决于函数printNumber()在哪里调用。

如果是动态作用域,上面console.log(number)这行代码就会打印54。

使用词法作用域,我们可以仅仅看源代码就可以确定一个变量的作用范围,但如果是动态作用域,代码执行之前我们没法确定变量的作用范围。

像C,C++,Java,Javascript等大多数编程语言都支持静态作用域。Perl 既支持动态作用域也支持静态作用域。

作用域链

当在Javascript中使用一个变量的时候,首先Javascript引擎会尝试在当前作用域下去寻找该变量,如果没找到,再到它的上层作用域寻找,以此类推直到找到该变量或是已经到了全局作用域。

如果在全局作用域里仍然找不到该变量,它就会在全局范围内隐式声明该变量(非严格模式下)或是直接报错。

例如:

let foo = 'foo';
function bar() {
 let baz = 'baz';
 // 打印 'baz'
 console.log(baz);
 // 打印 'foo'
 console.log(foo);
 number = 42;
 console.log(number); // 打印 42
}
bar();

当函数bar()被调用,Javascript引擎首先在当前作用域下寻找变量baz,然后寻找foo变量但发现在当前作用域下找不到,然后继续在外部作用域寻找找到了它(这里是在全局作用域找到的)。

然后将42赋值给变量number。Javascript引擎会在当前作用域以及外部作用域下一步步寻找number变量(没找到)。

如果是在非严格模式下,引擎会创建一个number的全局变量并把42赋值给它。但如果是严格模式下就会报错了。

结论:当使用一个变量的时候,Javascript引擎会循着作用域链一层一层往上找该变量,直到找到该变量为止。

作用域和作用域链是如何工作的

以上内容已经讲解了作用域,作用域的类型,现在让我们看下Javascript引擎是如何确定变量的作用域链和如何去查找变量的。

要想理解Javascript是如何进行变量查找的,必须要了解Javascript中词法环境这个概念(请参考:理解Javascript中的执行上下文和执行栈)。

什么是词法环境

所谓词法环境就是一种标识符—变量映射的结构(这里的标识符指的是变量/函数的名字,变量是对实际对象[包含函数和数组类型的对象]或基础数据类型的引用)。

简单地说,词法环境是Javascript引擎用来存储变量和对象引用的地方。

注意:不要混淆了词法环境和词法作用域,词法作用域是在代码编译阶段确定的作用域(译者注:一个抽象的概念),而词法环境是Javascript引擎用来存储变量和对象引用的地方(译者注:一个具象的概念)。

一个词法环境就像下面这样:

lexicalEnvironment = {
 a: 25,
 obj: <ref. to the object>
}

只有当该作用域的代码被执行的时候,引擎才会为那个作用域创建一个新的词法环境。词法环境还会记录所引用的外部词法环境(即外部作用域)。例:

lexicalEnvironment = {
 a: 25,
 obj: <ref. to the object>
 outer: <outer lexical environemt>
}

Javascript引擎是如何进行变量查找的

现在我们已经知道了作用域,作用域链和词法环境的概念,现在让我们看下Javascript引擎是如何利用词法环境来确定作用域和作用域链的。

结合例子我们来理解上面的这些概念:

let greeting = 'Hello';
function greet() {
 let name = 'Peter';
 console.log(`${greeting} ${name}`); // Hello Peter
}
greet();
{
 let greeting = 'Hello World!'
 console.log(greeting); // Hello World!
}

上述代码加载后,首先会创建一个全局词法环境,其中包含在全局范围内声明的变量和函数。像下面这样:

globalLexicalEnvironment = {
 greeting: 'Hello'
 greet: <ref. to greet function>
 outer: <null>
}

这里的outer字段(也就是外部词法环境)被设置为了null,是因为全局词法环境已经是最顶层的词法环境了。

然后,我们调用了greet()函数,然后一个新的词法环境会被被创建:

functionLexicalEnvironment = {
 name: 'Peter'
 outer: <globalLexicalEnvironment>
}

这里的outer字段被设置为了globalLexicalEnvironment,是因为他的外部作用域就是全局作用域。

然后,执行console.log(`${greeting} ${name}`)这行代码,Javascript引擎首先在当前函数的词法环境中寻找变量greeting和name,但只找到了name,没找到greeting。然后继续在上层的词法环境中找greeting(这里是全局作词法环境)。最后在全局词法环境中找到了greeting。

紧接着执行那段在大括号里的代码,为这个块级创建一个新的词法环境。如下:

blockLexicalEnvironment = {
 greeting: 'Hello World',
 outer: <globalLexicalEnvironment>
}

然后执行console.log(greeting)这行代码,首先在本层词法环境中找greeting,OK,找到,结束。此时就不会再去外部作用域(这里是全局作用域)寻找该变量了。

注意:只有let和const声明变量才会创建一个新的词法环境存储,使用var声明的变量会被存储在当前块(大括号)所在的词法环境中(全局词法环境或是函数词法环境中)。

结论:当一个变量被使用时,Javascript引擎会首先在当前的词法环境中进行寻找,如果找不到就找上层词法环境中寻找,直到找到为止。

结论

作用域就是一个变量可访问和可见的区域,和函数一样,Javascript的作用域也可以嵌套,Javascript引擎会层层遍历作用域来寻找用到的变量。

Javascript使用词法作用域,这意味着变量的作用在编译阶段就会被确定。

Javascript引擎在程序执行期间使用词法环境来存储变量和函数。

作用域和作用域链是Javascript中的基础概念,理解作用域和作用域链能让你成为一个更优秀的Javascript开发者。

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

Javascript 相关文章推荐
url地址自动加#号问题说明
Aug 21 Javascript
node.js中的http.createClient方法使用说明
Dec 15 Javascript
jQuery中replaceAll()方法用法实例
Jan 16 Javascript
自定义函数实现IE7与IE8不兼容js中trim函数的问题
Feb 03 Javascript
js中函数声明与函数表达式
Jun 03 Javascript
jstl中判断list中是否包含某个值的简单方法
Oct 14 Javascript
JavaScript中双向数据绑定详解
May 03 Javascript
对于js垃圾回收机制的理解
Sep 14 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
Vue模板语法中数据绑定的实例代码
May 17 Javascript
Js图片点击切换轮播实现代码
Jul 27 Javascript
Vue解决移动端弹窗滚动穿透问题
Dec 15 Vue.js
JS数组方法reduce的用法实例分析
Mar 03 #Javascript
Javascript模拟实现new原理解析
Mar 03 #Javascript
JS面向对象编程——ES6 中class的继承用法详解
Mar 03 #Javascript
JS面向对象编程实现的拖拽功能案例详解
Mar 03 #Javascript
序列化模块json代码实例详解
Mar 03 #Javascript
JS常用排序方法实例代码解析
Mar 03 #Javascript
JS面向对象编程实现的Tab选项卡案例详解
Mar 03 #Javascript
You might like
php mail to 配置详解
2014/01/16 PHP
ThinkPHP模板自定义标签使用方法
2014/06/26 PHP
在WordPress的后台中添加顶级菜单和子菜单的函数详解
2016/01/11 PHP
基于laravel Request的所有方法详解
2019/09/29 PHP
重定向实现代码
2006/11/20 Javascript
jQuery第三课 修改元素属性及内容的代码
2010/03/14 Javascript
模仿百度三维地图的js数据分享
2011/05/12 Javascript
Javascript验证上传图片大小[前台处理]
2014/07/18 Javascript
两种方法基于jQuery实现IE浏览器兼容placeholder效果
2014/10/14 Javascript
jQuery插件实现控制网页元素动态居中显示
2015/03/24 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
javascript中Date对象的使用总结
2016/11/21 Javascript
vuex页面刷新后数据丢失的方法
2019/01/17 Javascript
Nodejs监听日志文件的变化的过程解析
2019/08/04 NodeJs
js键盘事件实现人物的行走
2020/01/17 Javascript
Python计算三维矢量幅度的方法
2015/06/15 Python
使用python实现省市三级菜单效果
2016/01/20 Python
浅谈机器学习需要的了解的十大算法
2017/12/15 Python
详解TensorFlow在windows上安装与简单示例
2018/03/05 Python
Python系统监控模块psutil功能与经典用法分析
2018/05/24 Python
Python实现的从右到左字符串替换方法示例
2018/07/06 Python
在Python中如何传递任意数量的实参的示例代码
2019/03/21 Python
python字典改变value值方法总结
2019/06/21 Python
python读写csv文件方法详细总结
2019/07/05 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
Python常用数据分析模块原理解析
2020/07/20 Python
Django多数据库联用实现方法解析
2020/11/12 Python
安全员岗位职责
2013/11/11 职场文书
上班玩游戏检讨书
2014/02/07 职场文书
高三励志标语
2014/06/05 职场文书
意外伤害赔偿协议书范文
2014/09/23 职场文书
大学生迟到检讨书500字
2014/10/17 职场文书
教师学习中国梦心得体会
2016/01/05 职场文书
2019年教师节活动策划方案
2019/09/09 职场文书
Java数据开发辅助工具Docker与普通程序使用方法
2021/09/15 Java/Android
图文详解nginx日志切割的实现
2022/01/18 Servers