如何理解js中的作用域与作用域链

最新推荐文章于 2023-04-04 09:35:45 发布

从零开始学前端

最新推荐文章于 2023-04-04 09:35:45 发布

阅读量301

点赞数

分类专栏：从零开始学前端

本文链接：https://blog.csdn.net/learning_web/article/details/92565753

版权

从零开始学前端专栏收录该内容

198 篇文章 4 订阅

订阅专栏

大家好，我是IT修真院武汉分院第10期学员余佳贝，一枚正直善良的web程序员。

今天给大家分享一下，修真院官网js任务4，深度思考中的知识点——如何理解js中的作用域与作用域链

一.背景介绍

什么是作用域呢，简单的说，作用域就是变量与函数的可访问范围，即作用域控制着变量与函数的可见性和生命周期。在JavaScript中，变量的作用域有全局作用域和局部作用域两种。

二.知识剖析

1.全局作用域(Global Scope)

在代码中任何地方都能访问到的对象拥有全局作用域，一般来说一下几种情形拥有全局作用域：

(1)在函数外面定义的变量拥有全局作用域，例如：

varauthorName =“山边小溪”;functiondoSomething(){

alert(authorName);

}

doSomething();

(2)所有末定义直接赋值的变量自动声明为拥有全局作用域，例如：

functiondoSomething(){varauthorName=“山边小溪”;

blogName=“梦想天空”;

alert(authorName);

}

doSomething();//山边小溪

alert(blogName);//梦想天空

alert(authorName);//脚本错误

变量blogName拥有全局作用域，而authorName在函数外部无法访问到。

(3)所有window对象的属性拥有全局作用域

一般情况下，window对象的内置属性都都拥有全局作用域，例如window.name、window.top等等。

varsite =‘baidu.com’;functiongetSite(){

alert(this.site);

}

alert(window.site);// ‘baidu.com’

getSite();// ‘baidu.com’

window.getSite();// ‘baidu.com’

在上面示例中，site变量和getSite()方法没有指定上级对象，所在二者会被添加到window全局对象，所以直接访问二者与通过window访问本质相同（如，直接访问getSite()与使用window.getSite()访问一样）。

局部作用域(Local Scope)

和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域成为函数作用域

例如下列代码中的bName和函数innerSay都只拥有局部作用域：

functiondoSomething(){varbName=“双击66”;functioninnerSay(){

alert(bName);

}

innerSay();

}

alert(bName);//脚本错误

innerSay();//脚本错误

作用域链(Scope Chain)

说完了作用域我们就可以接着来聊聊作用域链(Scope Chain)这个概念了.作用域链就是由多个作用域组成的在JS中，函数的可以允许嵌套的。即，在一个函数的内部声明另一个函数.类似这样：

functionA(){

vara=1;

functionB(){//在A函数内部，声明了函数B，这就是所谓的函数嵌套。

    varb=2;

}

}

对于A来说，A函数在执行的时候，会创建其A函数的作用域，那么函数B在创建的时候，会引用A的作用域，类似下面这样
在这里插入图片描述

函数B在执行的时候，其作用域类似于下面这样：
在这里插入图片描述

从上面的两幅图中可以看出，函数B在执行的时候，是会引用函数A的作用域的。所以，像这种函数作用域的嵌套就组成了所谓的函数作用域链。当在自身作用域内找不到该变量的时候，会沿着作用域链逐步向上查找，若在全局作用域内部仍找不到该变量，则会抛出异常。

三.常见问题

如何更加直观的体现作用域链

四.解决方案

五.编码实战

六.拓展思考

如何运用作用域链的知识进行性能优化

其实作用域链就是JS引擎查询数据的一个链表，后定义的覆盖先定义的，查询不到定义的数据就往深一层查询，一直到全局作用域为止但是越往内层延伸，读写速度就会越慢，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。例如下面的代码：

functionchangeColor(){document.getElementById(“btnChange”).οnclick=function(){document.getElementById(“targetCanvas”).style.backgroundColor=“red”;

};

}

这个函数引用了两次全局变量document，查找该变量必须遍历整个作用域链，直到最后在全局对象中才能找到。这段代码可以重写如下：

functionchangeColor(){vardoc=document;

doc.getElementById(“btnChange”).οnclick=function(){

doc.getElementById(“targetCanvas”).style.backgroundColor=“red”;

};

}

这段代码比较简单，但是如果程序中有大量的全局变量被从反复访问，那么重写后的代码性能会有显著改善。