JavaScript中作用域链的概念及用途讲解

2024-07-29 02:15:44

从零开始讲解JavaScript中作用域链的概念及用途

引言

之前我写过一篇关于JavaScript中的对象的一篇文章，里面也提到了作用域链的概念，相信大家对这个概念还是没有很深的理解，并且这个概念也是面试中经常问到的，因为这个概念实在太重要了，在我们平时写代码时，也可能会因为作用域链的问题，而出现莫名其妙的bug，导致我们花费大量的时间都查找不出原因。所以我就准备单独写一篇关于作用域链的文章，来帮大家更好地理解这个概念。

正文

一、执行环境

首先，我们要引入一个概念，叫做执行环境（下面简称环境）。在一个执行环境中，有一个与之关联的变量对象（下面简称对象），在该对象中，储存着这个执行环境中定义的变量和函数。但这个对象只是个形式上的对象，并不能被外界所访问到。

例如，在浏览器中，我们在全局运行下列代码，那么当前的执行环境就是window，也就是全局，并且与该全局环境关联的对象中存储着定义的变量fruit

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script>
    let fruit = 'banana'
    alert(fruit)
  </script>
</body>
</html>

那么，在javascript中，函数也会形成一个环境，例如下列的代码中，函数的内部就是一个局部的环境，与该环境关联的对象中存储着变量my_favorite；而此时全局环境window中，也有一个与之关联的对象，该对象中存储着变量fruit 和函数 fn1

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
  <script>
    let fruit = 'banana'
    alert(fruit)
    function fn1() {
      let my_favorite = 'apple'
      return my_favorite
    }
    fn1()
  </script>
</body>
</html>

二、作用域链

看了上面两个例子，我们对执行环境应该有了一定的了解，那么这里就将引入作用域链的概念了，当代码执行在一个环境中时，会针对环境中储存变量和函数的对象创建一个作用域链，作用域链的最前端就是当前环境的对象，如果当前环境是个函数，则作用域链的下一部分就是全局的window环境的变量对象。

先来看一下代码部分

<script>
	let fruit = 'banana'
	function fn() {
		let color = 'red'
		//返回 '我最喜欢的水果是banana,我最喜欢的颜色是red'
		console.log('我最喜欢的水果是' + fruit + ',我最喜欢的颜色是' + color)
	}
	fn()
	//报错, color is undefined
	console.log('我最喜欢的水果是' + fruit + ',我最喜欢的颜色是' + color)
</script>

首先执行了函数 fn ，此时函数内的作用域链就是这样的

我们看到，在函数 fn 中，我们使用了变量 fruit 和 color，所以此时会从作用域链的头部开始，从第一个活动变量（本例中第一个变量对象就是函数fn的活动变量）中，寻找变量 fruit和 color，发现该变量对象中存在变量color，于是就成功引用了变量color，但是因为没有找到变量 fruit，于是再沿着作用域链往下找到下一个变量对象（本例中第二个活动变量就是全局window的变量对象），发现该变量对象中有我们想要的变量 fruit，则引用该变量 fruit ，同时，因为找到了需要引用的变量，就不会继续沿着作用域链继续向下寻找了。

我们再来看在函数外，也就是全局window中，也执行了console.log('我最喜欢的水果是' + fruit + ',我最喜欢的颜色是' + color)，此时在全局环境中的作用域链是这样的

此时也使用了变量 fruit 和 color，所以这时会从作用域链的头部开始，找到第一个变量对象（本例中第一个活动变量就是window全局变量对象），发现该变量对象中有变量 fruit，所以成功引用该变量对象中的 fruit，但因为没找到变量 color，所以继续沿着作用域链向下寻找下一个活动变量，但此时已经找到了作用域链的尾部，并没有别的变量对象了，所以也就无法找到变量 color了，所以最后返回的就是 undefined。在本例中我们可以看到，当代码处于全局环境中时，是没有访问函数fn执行环境中的变量color的权力的，这里我们可以这种现象看成是变量color的作用域只是在函数fn的执行环境内。

这就是代码执行时，作用域链起到的作用，所以作用域链就保证了执行环境中代码对变量的有序访问。

三、块级作用域

在JavaScript中是没有块级作用域的，也就是说，由花括号或小括号封闭起来的区域内没有自己的作用域，例如这两个例子

if(true) {
	var fruit = 'banana'
}
console.log(fruit)  //返回 banana

我们可以看到，if 语句中的花括号内，使用 var 定义了一个变量 fruit，按照作用域链的规则来说，外部是无法访问到该变量的，但是我们可以看到，确实返回了这个变量的值 banana 。

再来看下一个例子

for(var i=0; i<4; i++) {
	alert(i)
}
console.log(i)  //返回4

在使用 for语句时，我们在小括号里使用var定义了一个临时变量i，同样的的，在 for循环结束以后，在外部访问该变量，也成功返回了相应的值。

以上两个例子，都是因为JavaScript没有块级作用域引起的，所以有时会因为这种情况，导致一些不必要的麻烦。在ES6中，出现了使用 let 和 const声明变量的方式，来解决了JavaScript中没有块级作用域的问题。
你们可以看我之前写的一篇关于let 和 const 声明变量的文章——还没有理解let 和 const的用法和区别吗，几百字让你立马搞懂

四、其他情况

其实，还有一种情况，会影响变量的访问顺序，那就是在声明变量时，直接给一个未声明的变量赋值，例如这样

function fn() {
	sum = 1 + 2
}
fn()

console.log(sum)   //返回 3

按照我们本文前面讲解的作用域链的知识，当执行到最后一局代码时，此时处于全局执行环境中，查询不到变量 sum，所以应当会报错 undefined，但这里却返回了 3。

这是因为，在我们使用var声明变量时，会自动将该变量放到离该代码最近的活动变量中去，也就是函数fn的活动变量中，所以在全局执行环境中的代码就无法访问到该变量。但是如果不使用var，而是像这个例子中一样，直接给一个未定义的变量赋值，这时会自动地将该变量放到全局的活动变量中去，这就是导致本例中在全局环境中还能访问到变量sum的原因。

五、总结

作用域链可以看成是将变量对象按顺序连接起来的一根链子
每个执行环境中的作用域链都是不同的
当我们引用变量时，会顺着当前执行环境的作用域链，从作用域链的开头开始依次往下寻找对应的变量，直到找到作用域链的尾部，报错undefined
作用域链保证了变量的有序访问

结束语

好了，对于作用域链的讲解就到这里了，相信这下大家对JavaScript中的作用域链有了很深的理解了吧，我相信，理解了这个概念，可以消除我们代码中大部分没必要的BUG。

到此这篇关于JavaScript中作用域链的概念及用途讲解的文章就介绍到这了,更多相关JavaScript中作用域链内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JS作用域链详解

本文实例为大家分享了JS作用域链的相关内容,供大家参考,具体内容如下 1.所有全局变量和函数都是作为window对象的属性和方法创建的. 2.在某个方法函数的作用域中,所有代码执行完之后,该作用域被销毁,保存在其中的所有变量和函数定义也会随着被"销毁",这就是局部作用域.但闭包不会销毁局部变量. 这里的销毁:是指下次再执行此函数的时候,所有的变量又回到最初的状态 var color = "blue"; function changeColor(){ var anot
javascript 作用于作用域链的详解

javascript 作用于作用域链的详解一.JavaScript作用域任何程序设计语言都有作用域的概念,简单的说,作用域就是变量与函数的可访问范围,即作用域控制着变量与函数的可见性和生命周期.在JavaScript中,变量的作用域有全局作用域和局部作用域两种. 全局作用域(Global Scope) 在代码中任何地方都能访问到的对象拥有全局作用域,一般来说一下几种情形拥有全局作用域: (1)最外层函数和在最外层函数外面定义的变量拥有全局作用域, 例如: var authorName="Bu
全面了解JavaScript的作用域链

JavaScript的作用域链这是一个非常重要的知识点了,了解了JavaScript的作用域链的话,能帮助我们理解很多'异常'问题. 下面我们来看一个小例子,前面我说过的声明提前的例子. var name = 'Skylor.min'; function echo() { alert(name); var name = 'mm'; alert(name); alert(age); } echo(); 对于这个例子,没有接触过这方面的时候,第一反应是会纠结下,这第一个的name,到底调用全局变量
javascript基础进阶_深入剖析执行环境及作用域链

执行环境执行环境定义了变量或函数有权访问的其他函数,决定了他们各自的行为.每个执行环境都有一个与之关联的变量对象. 变量对象环境中定义的所有变量和函数都保存在这个对象中. 全局执行环境全局执行环境是最外围的一个执行环境.在web浏览器中,全局执行环境被认为是Window对象,因此所有全局变量和函数都是作为window对象的属性和方法创建的. 每个函数都有自己的执行环境. 作用域链当代码在一个环境中执行,会创建变量对象的一个作用域链. 用途:保证对执行环境有权访问的所有变量和函数有序访问.
JavaScript作用域链实例详解

本文实例讲述了JavaScript作用域链.分享给大家供大家参考,具体如下: 跟其他语言一样,变量和函数的作用域揭示了这些变量和函数的搜索路径.对于JavaScript而言,理解作用域更加重要,因为在JavaScript中,作用域可以用来确定this的值,并且JavaScript有闭包,闭包是可以访问外部环境的作用域的. 每一个JavaScript的函数都是Function对象的一个实例,Function对象有一个内部属性[[Scope]],这个属性只能被JavaScript的引擎访问.通过[[
js作用域和作用域链及预解析

变量---->局部变量和全局变量, 作用域:在某个空间范围内,可以对数据进行读写操作局部作用域和全局作用域 js中没有块级作用域-一对括号中定义的变量,这个变量可以在大括号外面使用函数中定义的变量是局部变量作用域链:变量的使用,从里向外,层层的搜索,搜索到了就可以直接使用了层层搜索,搜索到0级作用域的时候,如果还是没有找到这个变量,结果就是报错在 JavaScript 中, 对象和函数同样也是变量. 在 JavaScript 中, 作用域为可访问变量,对象,函数的集合. JavaScr
详解JavaScript作用域和作用域链

前言 JavaScript 中有一个被称为作用域(Scope)的特性.虽然对于许多新手开发者来说,作用域的概念并不是很容易理解,本文我会尽我所能用最简单的方式来解释作用域和作用域链,希望大家有所收获! 作用域(Scope) 1. 什么是作用域作用域是在运行时代码中的某些特定部分中变量,函数和对象的可访问性.换句话说,作用域决定了代码区块中变量和其他资源的可见性.可能这两句话并不好理解,我们先来看个例子: function outFun2() { var inVariable = "内层变量2&
JavaScript执行环境及作用域链实例分析

本文实例讲述了JavaScript执行环境及作用域链.分享给大家供大家参考,具体如下: 1.执行环境: 每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中. 执行环境包括全局执行环境和函数执行环境. 全局执行环境是最外围的一个执行环境,在浏览器中,全局执行环境被认为是是window对象,所有全局变量和属性都是作为window对象的属性和方法创建的. 函数执行环境是指函数的执行环境,当执行流进入一个函数时,函数的环境会被推入一个环境栈中,在函数执行之后,栈将其环境
JavaScript闭包与作用域链实例分析

本文实例讲述了JavaScript闭包与作用域链.分享给大家供大家参考,具体如下: 闭包定义闭包指的是有权访问另一个函数作用域中的变量的函数.创建闭包的常见方式,就是在一个函数A内部创建另一个函数B,那么函数B就是一个闭包,可以访问函数A作用域中的所有变量. JavaScript的闭包与作用域链密不可分,因此本文可以和JavaScript的作用域链相对照分析,一定可以对JavaScript的闭包和作用域链有更深的理解. 下面我们仍然以createComparisonFunction为例进行闭包
Javascript作用域和作用域链原理解析

作用域和作用域链在Javascript和很多其它的编程语言中都是一种基础概念.但很多Javascript开发者并不真正理解它们,但这些概念对掌握Javascript至关重要. 正确的去理解这个概念有利于你去写更好,更高效和更简洁的代码,让你成为一个更优秀的Javascript开发者. 因此,在本文中,我将会向大家解释清楚什么是作用域和作用域链,以及Javascript引擎在内部是如何通过它们操作和查找变量的. 事不宜迟,正文开始 :) 什么是作用域 Javascript中的作用域说的是变量的可访
图解javascript作用域链

先来一段简单的javascript代码: window.onload=function(){ function sub(a,b){ return a-b; } var result=sub(10,5); } 这段代码中的执行环境已经数清楚了,可是执行环境只是代码在预编译过程中javascript引擎所做的事情,当代码在window onload事件被触发,且sub函数被执行的时候会发生什么事情呢? 1.javascript引擎会在页面加载脚本被执行时为每个函数创建一个作用域(执行上下文)及作用域