深入理解JavaScript的作用域


今天面试滴滴被问到JavaScript的作用域,不知道是脑子短路还是怎么,就只回答了:被一对{ }括起来的就是一个作用域。执行环境、全局执行环境、作用域链都没有提及到,回答的很是“肤浅”。
或许是自己本身对这块知识就理解的不够深刻吧,那就从头来过吧!

执行环境

执行环境(Execution context)是JavaScript中最为重要的一个概念。

  1. 执行环境定义了变量或函数有权访问的其它数据,决定了他们各自的行为;
  2. 每个执行环境都有一个与之关联的变量对象;
  3. 环境中定义的所有变量和函数都保存在这个对象中。

全局执行环境

在Web浏览器中,全局执行环境被认为是window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的。
某个执行环境的所有代码执行完毕后,该环境被销毁,保存在其中的所有变量和函数定义也随之被销毁。
全局执行环境直到应用程序退出——例如关闭网页或浏览器时才会被销毁。

作用域链

当代码在一个环境中执行时,会创建变量对象的一个作用域链。

  1. 作用域链的前端,始终都是当前执行的代码所在环境的变量对象。
  2. 作用域链的后端,始终都是全局执行环境的变量对象。

作用域链的用途?
保证对执行环境有权访问的所有变量和函数的有序访问。

来个实际的例子比较好理解:

var color = "blue";
function changeColor(){
	var anotherColor = "red";
	function swapColor (){
		var tempColor = anotherColor;
		anotherColor = color;
		color = tempColor;
	}
	swapColor();
}
changeColor();

其作用域链如下:

在这里插入图片描述

内部环境可以通过作用域链访问所有的外部环境,外部环境不能访问内部环境中的任何变量和函数。

比如,swapColor()其作用域链包含:swapColor()的变量对象、changeColor()的变量对象和window全局变量对象。swapColor()在访问变量时会先从自己的作用域中搜索,找不到则再搜索上一级作用域链。
而window作用域却不能访问changeColor()和swapColor()的变量对象。

块级作用域

在JavaScript中,不能说一个{ … }就是一个作用域,JavaScript中没有块级作用域的概念,块级作用域概念是在ES6中提出来的,使用let、const声明变量。
来看一下下面这段代码:

if(true){
	var color = "red";
}
console.log(color); // "red"

在JavaScript中,变量声明会被添加到当前的执行环境中,实际上,使用var声明的变量,其实就是当前执行环境的全局变量了,尽管它只是在if语句,或者for语句里面声明的。

我想说的话

学习进步离不开网友的支持,希望大家以后多多支持,能够指出文中不足与疑惑的点,我会为大家一一解答。有兴趣的小伙伴可以加入QQ群:852590787
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_42420703/article/details/83273147