前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
社区首页 >专栏 >JS作用域和作用域链

JS作用域和作用域链

作者头像
前端_AWhile
发布于 2019-08-29 06:38:33
发布于 2019-08-29 06:38:33
4.2K0
举报
文章被收录于专栏:前端一会前端一会

JS中的作用域就是在一定的空间范围内对数据进行读写操作。

在JS中一个变量的作用域(scope)是程序中定义这个变量的区域。

变量有全局变量和局部变量两种。

全局变量的作用域是全局性的,即在JavaScript代码中,该全局变量处处都有定义。

局部变量的作用域是局部性的,如函数体内声明的变量就只在函数体内部有定义,函数的参数也是局部变量,也只在函数体内部有定义。

注:这边的“定义”,我认为有“创建与下定义”的意思,比如定义一个函数,定义一个方法,都是先创建一个函数,再给它里面添加一些东西。

下面就要借助JS的作用域链来更好的理解作用域了。

在此之前,先要明确个概念,即执行环境和作用域是两个完全不同的概念。

函数的每次调用都有与之紧密相关的作用域和执行环境。从根本上来说,作用域是基于函数的,而执行环境是基于对象的(例如:全局执行环境即window对象)。

换句话说,作用域涉及到所被调用函数中的变量访问,并且不同的调用场景是不一样的。执行环境始终是this关键字的值,它是拥有当前所执行代码的对象的引用。每个执行环境都有一个与之关联的变量对象,环境中定义的所有变量和函数都保存在这个对象中。虽然我们编写的代码无法访问这个对象,但解析器在处理数据时会在后台使用它。

当JavaScript解释器初始化执行代码时,它首先默认进入全局执行环境,从此刻开始,函数的每次调用都会创建一个新的执行环境。

每个函数都有自己的执行环境。当执行流进入一个函数时,函数的环境就会被推入一个环境栈中(execution stack)。在函数执行完后,栈将其环境弹出,把控制权返回给之前的执行环境。ECMAScript程序中的执行流正是由这个便利的机制控制着。

执行环境可以分为创建和执行两个阶段。在创建阶段,解析器首先会创建一个变量对象(variable object,也称为活动对象 activation object),它由定义在执行环境中的变量、函数声明、和参数组成。在这个阶段,作用域链会被初始化,this的值也会被最终确定。在执行阶段,代码被解释执行。

<script type="text/javascript">

function Fn1(){

function Fn2(){

alert(document.body.tagName);//BODY

//other code...

}

Fn2();

}

Fn1();

</script>

当javascript代码被浏览器载入后,默认最先进入的是一个全局执行环境。当在全局执行环境中调用执行一个函数时,程序流就进入该被调用函数内,此时JS引擎就会为该函数创建一个新的执行环境,并且将其压入到执行环境堆栈的顶部。浏览器总是执行当前在堆栈顶部的执行环境,一旦执行完毕,该执行环境就会从堆栈顶部被弹出,然后,进入其下的执行环境执行代码。这样,堆栈中的执行环境就会被依次执行并且弹出堆栈,直到回到全局执行环境。

此外还要注意一下几点:

  • 单线程
  • 同步执行
  • 唯一的全局执行环境
  • 局部执行环境的个数没有限制
  • 每次某个函数被调用,就会有个新的局部执行环境为其创建,即使是多次调用的自身函数(即一个函数被调用多次,也会创建多个不同的局部执行环境)。

当代码在一个环境中执行时,会创建变量对象的一个作用域链(scope chain)。作用域链的用途是保证对执行环境有权访问的所有变量和函数的有序访问。

作用域链包含了执行环境栈中的每个执行环境对应的变量对象。通过作用域链,可以决定变量的访问和标识符的解析。

注意:全局执行环境的变量对象始终都是作用域链的最后一个对象。

在访问变量时,就必须存在一个可见性的问题(内层环境可以访问外层中的变量和函数,而外层环境不能访问内层的变量和函数)。更深入的说,当访问一个变量或调用一个函数时,JavaScript引擎将不同执行环境中的变量对象按照规则构建一个链表,在访问一个变量时,先在链表的第一个变量对象上查找,如果没有找到则继续在第二个变量对象上查找,直到搜索到全局执行环境的变量对象即window对象。这也就形成了Scope Chain的概念。

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

标识符解析(变量名或函数名搜索)是沿着作用域链一级一级地搜索标识符的过程。搜索过程始终从作用域链的前端开始,然后逐级地向后(全局执行环境)回溯,直到找到标识符为止。

此外还要讲下JS作用域中的块级作用域。

JS中是没有块级作用域这个概念的。

什么是块级作用域呢?

任何一对花括号({和})中的语句集都属于一个块,在这之中定义的所有变量在代码块外都是不可见的,我们称之为块级作用域。

函数作用域就好理解了,定义在函数中的参数和变量在函数外部是不可见的。

但JS由于没有块级作用域,所以在块外仍旧可以访问。

functin test(){

for(var i=0;i<3;i++){}

alert(i);

}

test(); //结果是弹出3,在块外,块中定义的变量i仍然是可以访问的。

JS并不支持块级作用域,它只支持函数作用域,而且在一个函数中的任何位置定义的变量在该函数中的任何地方都是可见的。

那么JS又该怎么拥有块级作用域呢?

根据“在一个函数中定义的变量,当这个函数调用完之后,变量会被销毁”的特性,来模拟出JS的块级作用域。

function test(){

(function (){

for(var i=0;i<4;i++){

}

})();

alert(i);

}

test(); //弹出i未定义的错误

这里是把for语句放到闭包中,然后调用这个函数,当函数调用完毕后,变量i自动销毁,所以在块外就无法访问了。

其实也就相当于在for语句外面加了一层函数作用域,而JS的函数作用域执行完毕后是里面的变量就是销毁的哦!异曲同工啊。

有关闭包,这个单独一个章节来研究,这里不展开来说了。

最后再来个小例子收工。

<script type="text/javascript">

(function (){

a = 5; //注意,这是个全局变量,在有局部变量时,优先优先局部变量哦,作用域链的顺序。

alert(window.a); //undefined

var a = 1; //这里发生变量声明提升

alert(a); // 1

})();

</script>

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-05-26,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 前端小二 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
SEO新手必知50个SEO术语词解释
刚入门SEO都需要了解哪些SEO基础知识呢?今天,在这里给各位同学讲解下SEO基础入门专业词汇都有哪些,从新思考它们在我们实际操作中都有哪些用途及意义。 白帽SEO(White hat SEO) 1 白帽SEO是通过正规优化手法,来对网站进行优化,是符合搜索引擎优化的规则。它与黑帽SEO是相反,它是业界主流的优化手法,避免了一切风险进行操作的优化手法。虽然白帽SEO见效时间周期要长,但往往成功后,就可以稳定的带来流量,它也是SEO从业者最高道德标准。 黑帽SEO(Black hat SEO) 2 对于黑帽
黄伟SEO
2018/05/17
1.6K0
SEO入门一篇就够-SEO教程
大家口中的SEO(Search Engine Optimization),中文翻译为“搜索引擎优化”,从本质上来说,其实就是如何迎合搜索引擎的规则,使得网站在搜索结果中能有更好的排名,比如富贵论坛https://www.fgba.net/,当用户输入“富贵”,在没有进行SEO的情况下,也许这个网站排在第2页或者第3页之后,通过用户行为分析,我们得知,用户在搜索的时候,基本80%左右的用户在浏览完第一页之后就会放弃继续浏览,这样对一个公司来说,如何让你的网站排在尽可能靠前的位置,获得更多流量,就意味着能有更多展示公司产品和品牌的机会。简单一句话,SEO就是让网站,在搜索引擎自然排序中能尽量排在靠前的位置。
曾高飞
2021/08/17
8760
"想提高网站排名?前端代码优化就是关键!"(SEO)
要了解SEO,首先我们得了解搜索引擎的工作原理,其原理是比较复杂,我把流程简化如下:
zayyo
2023/11/06
7540
WEB前端-搜索引擎工作原理与SEO优化
搜索引擎具有网络爬虫或蜘蛛来执行爬网,每次抓取工具访问网页时,它都会复制该网页并将其网址添加到索引中。
Leophen
2019/08/23
1.6K0
网站文章标题长短对于网站排名有什么影响?网站文章seo标题应该写多少字?
本次壳屋栏SEO为大家讲解一下对网站非常有帮助的知识点,在做网站的过程中,我们知道了网页权重和文章质量是影响网站排名的一个重要因素,两者是紧密相连的,也是相互作用的,其中网页的页面质量的评估往往取决于两个因素:1页面标题 2网页内容在这里,我们网站标题的作用就不言而喻,同时创建更好更优质的内容也是对我们网站的重点考核标准,那么如何利用网站标题和内容提高?我们将通过下列内容进行阐述;
文曦
2022/06/24
8500
网站文章标题长短对于网站排名有什么影响?网站文章seo标题应该写多少字?
关于SEO的研究和SPA 项目得SEO优化(科普篇)
SEO的关键指标是什么呢,国内的搜索引擎主要针对百度,那么怎么样的SEO算一个优秀的网站呢?
星宇大前端
2020/10/28
1.4K0
关于SEO的研究和SPA 项目得SEO优化(科普篇)
网站SEO优化步骤超详细完整版教程
一、准备 1、心态 长时间,不断学习。学习建站、基础代码、SEO全过程、实际操作并成功。
宜轩
2022/12/29
1.8K0
【新手指南】浅谈几种WordPress固定链接的优劣势
新手建站须知: 所谓“固定链接”,其实就是指访问某个网页的特定链接。也是我们站长将网站提交给各大站长平台的重要参数之一!建站初期我们必须确定好“固定链接”(准确来说应该是网站的“链接格式”),才能使网站更友好的展现、和被搜索引擎索取。今天,东哥就给大家分析一下目前市场上流行的几种固定链接格式的优劣势!借WordPress这个泛用性强的内容程序来谈谈如何设置好我们的网站的“链接格式”~ image.png 下面 给大家介绍一下 wordpress固定链接 设置的一些参数: 下面都是一些常用的参数值~ %y
QUXINGDONG.COM
2018/04/17
1.2K0
【新手指南】浅谈几种WordPress固定链接的优劣势
代理IP如何帮助SEO优化?
SEO优化工作对于网站而言是很有必要的,网站的运营推广工作比较复杂,有很多需要注意的地方,并且提高网站排名是需要逐渐累积的长期性的工作。而且在SEO优化的过程中,往往需要借助于代理IP的帮助才能够完成关键的数据优化与分析一环,接下来就一起来了解一下网站SEO优化的方式有哪些以及代理IP是如何帮助SEO优化的:
IPIDEA
2022/10/20
4390
代理IP如何帮助SEO优化?
SEO基础入门学习
注意:本文分享给安全从业人员、网站开发人员以及运维人员在日常工作防范恶意攻击,请勿恶意使用下面介绍技术进行非法攻击操作。。
全栈工程师修炼指南
2022/09/28
8980
搜索引擎优化(SEO) 基础常识
在移动互联网迅猛发展的今天,各种APP、小程序满天飞,针对网页的搜索引擎优化(SEO)对于现今的企业来说已经不是头等重要的事情了。但是如果公司的SEO做得好的话,确实可以节约很大一部分宣传开支,因此,并不能说明它是完全没有作用的工作。只是在我看来,重要性确实下降了很多。
FungLeo
2020/02/23
9990
干货SEO实现网站秒收录
收录是指网页被搜索引擎蜘蛛爬行并保存索引可以被用户检索到,就代表网页被录取了。企业做SEO的目的是增加网站排名,以便网站可以在搜索引擎获取流量。随着搜索引擎算法的不断更新,对网站的要求越来越高。那么应该如何实现网站内页在较短时间内被搜索引擎收录呢?
悉知科技建站
2020/04/24
8670
干货SEO实现网站秒收录
前端SEO—详细讲解
一、搜索引擎工作原理 当我们在输入框中输入关键词,点击搜索或查询时,然后得到结果。深究其背后的故事,搜索引擎做了很多事情。 在搜索引擎网站,比如百度,在其后台有一个非常庞大的数据库,里面存储了海量的关键词,而每个关键词又对应着很多网址,这些网址是百度程序从茫茫的互联网上一点一点下载收集而来的,这些程序称之为“搜索引擎蜘蛛”或“网络爬虫”。这些勤劳的“蜘蛛”每天在互联网上爬行,从一个链接到另一个链接,下载其中的内容,进行分析提炼,找到其中的关键词,如果“蜘蛛”认为关键词在数据库中没有而对用户是有用的便存入数据
企鹅号小编
2018/01/17
1.1K0
搜索引擎的工作原理
搜索引擎的基本工作原理包括如下三个过程:首先在互联网中发现、搜集网页信息;同时对信息进行提取和组织建立索引库;再由检索器根据用户输入的查询关键字,在索引库中快速检出文档,进行文档与查询的相关度评价,对将要输出的结果进行排序,并将查询结果返回给用户。
全栈程序员站长
2022/09/09
1.5K0
谷歌SEO优化指南:做好这3步,排名也能很简单
想要做好Google SEO,必须要有一个清晰的步骤流程。本次一尘SEO的谷歌SEO优化指南涵盖了做SEO的三个步骤:技术SEO, 站内SEO, 站外SEO。本次的谷歌SEO优化指南能给你提供可行的策略,见解和建议,你可以立即将其用于自己的网站。
一尘SEO
2020/07/28
5.5K1
谷歌SEO优化指南:做好这3步,排名也能很简单
百度快速收录SEO优化关键词排名优化技巧
前言:新站优化是有方法技巧的,关键词S排名优化,百度快速收录,新站如何快速出关键词排名,新站想要获取排名需要做好词库规划布局,做好文章内容优化,编写用户需求文章,做好更新和提交给百度站长,稳定持续操作优化推广,来做关键词排名优化
星泽V社
2022/03/02
1.4K0
「技巧」100种提高SEO排名优化技巧(一)
每个人都有潜在的能量,只是很容易被习惯所掩盖,被时间所迷离,被惰性所消磨。我们经常讲:越努力越成功,越努力越幸运;所以我们不要被怀习惯拖累,要养成所有好的习惯,不要被时间迷离,时时刻刻做最有生产力的事情,不要被惰性来消磨了我们的意志和决心,记住我们的初心,我们的梦想! 当接触SEO久了,我相信每个人都有自己的一套优化方法。对于新手SEO来说,这也是与高手的最大差距。今天给大家总结一些SEO知识技巧,但这些并非全部,还需要自己用时间来去积累这些知识。 — — 及时当勉励,岁月不待人。 提高SEO排名优化技巧
黄伟SEO
2018/05/17
2.2K0
SEO标题的写法及优化技巧
网页标题是对网页内容的概括与总结,是用户在搜索结果中首先看到的东西,但它也是搜索引擎用来确定网页主题是否与搜索查询相关的一个重要因素。
茹莱神兽
2022/02/13
7820
SEO标题的写法及优化技巧
SEO诊断报告都包含哪些内容?专业优化公司SEO诊断分析报告分享
SEO诊断通过系统的检测项逐一展开检查,避免出现遗漏,是网站SEO优化深入挖掘、诊断网站、并发现问题的最佳方法之一。接下来小编为你剖析分享专业优化公司SEO诊断分析报告的内容,一起来看看吧。
优化猩
2023/04/14
5670
SEO诊断报告都包含哪些内容?专业优化公司SEO诊断分析报告分享
「技巧」100种提高SEO排名优化技巧(二)
胆量不够大,能力再强都是小人物;魄力不够大,努力一生都是小成就;在成长的路上,我们突破的不是现实,而是自己。在人生的跑道上,战胜对手,只是赛场的赢家,战胜自己,才是命运的强者。 今天,接下来给大家直接讲剩余的50个SEO知识技巧。这些仅供参考,也许随着时间的推移,有些技巧就不是那么适用了,这些并非全部,还需要自己用时间来去积累这些知识。 — — 及时当勉励,岁月不待人。 提高SEO排名优化技巧 时本文总计约6000个字左右,需要花 15 分钟以上仔细阅读。 在这里我整理汇集了100个不同的方式,但仅仅只是优
黄伟SEO
2018/05/17
1.1K0
推荐阅读
相关推荐
SEO新手必知50个SEO术语词解释
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
查看详情【社区公告】 技术创作特训营有奖征文