JavaScript底层原理之作用域链(图文详解)

本篇文章给大家带来了javascript中作用域链的相关知识,外部空间不能访问内部变量,我们往往只知道这一基本规则,那实现这一基本规则的基本底层原理是什么呢?希望能给大家一些帮助!

JavaScript底层原理之作用域链(图文详解)

作用域

1.什么是作用域

简单来说,作用域(英文:scope)是据名称来查找变量的一套规则,可以把作用域通俗理解为一个封闭的空间,这个空间是封闭的,不会对外部产生影响,外部空间不能访问内部空间,但是内部空间可以访问将其包裹在内的外部空间。

立即学习“Java免费学习笔记(深入)”;

2.[[Scopes]]属性

在javascript中,每个函数都是一个对象,在对象中有些属性我们可以访问,有些我们是不能自由访问的,[[Scopes]]属性就是其中之一,这个属性只能被JavaScript引擎读取。

其实[[scope]]就是我们常说的作用域,其中存储了作用域运行期的上下文集合。

在这里因为func.prototype.constructor和func指向同一个函数,所以在这里我们通过访问函数func的原型对象来查看[[Scopes]]属性

25.png

3.作用域链

[[scope]]中存储的执行期的上下文对象的集合,这个集合呈链式连接,我们把这种链式连接叫做作用域链。JavaScript正是通过作用域链来查找变量的,其查找方式是沿着作用域链的顶端依次向下查询(在哪个函数内部查找对象,就在哪个函数作用域链中查找)

4.图解查找变量原理

//以如下代码为例说明JavaScript通过作用域链查找变量的原理**function a() {  function b() {      var b = 123;  }  var a = 123;  b();}var glob = 100;

登录后复制

1.当全局函数a()被定义时,作用域链如下

26.png

    函数的[[Scopes]]属性指向作用域链对象,此时作用域链只有一个键值对,这个键值对指向全局对象,全局对象存储了全局下可以访问的东西,也就是最外层作用域,大家都可以访问的。

2.当全局函数a()被激活调用时,作用域链如下

27.png

此时作用域链能够第一个访问的是Activation Object中的键值对,如果没有才访问全局对象

3.函数a()中函数b被定义时,b的作用域链如下

28.png

当b只是被定义没有被调用时,b的作用域链和a是相同的

4.当函数a()中的函数b被激活调用时,作用域链如下

29.png

作用域链最先指向函数b()的Activation Object,查找变量也是按作用域链顺序访问,找到就停止

5.总结

之所以外部作用域不能访问内部作用域的原因是外部作用域的作用域链没有内部作用域的Activation Object,所以无法访问内部变量,内部作用域访问变量的顺序是按照作用域链,先从里面查找,没有就沿着作用域链向外找,外部是全局作用域

相关推荐:javascript学习教程

以上就是JavaScript底层原理之作用域链(图文详解)的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2939032.html

(0)
上一篇 2025年3月11日 21:29:11
下一篇 2025年3月11日 21:29:24

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JavaScript中什么是负无穷大

    在JavaScript中,负无穷大指的是“-Infinity”,表示小于任何有限数的数字(负无穷大的一个数字值),一般小于“-1.7976931348623157E+103088”的数值即为负无穷大。 本教程操作环境:windows7系统、…

    2025年3月11日 编程技术
    200
  • 怎样给select添加css样式

    添加方法:1、给select标签添加id或class属性并设置属性值;2、在head标签对中嵌入style标签对;3、在style标签对中,使用“#id值{css属性:值;}”或“.class值{css属性:值;}”语句来添加css样式。 …

    2025年3月11日
    200
  • 完全掌握JavaScript执行机制

    本篇文章给大家带来了关于javascript执行机制的相关问题,其中包括javascript单线程和javascript同步异步的相关知识,希望对大家有帮助。 一、为什么JavaScript是单线程 如果想了解JavaScript为什么是单…

    2025年3月11日
    200
  • javascript标识符不能以什么开头

    在javascript中,标识符不能以数字开头,即第一个字符不能为数字,必须是字母、下划线“_”或美元符号“$”,其后的字符可以是字母、数字或下划线、美元符号;且标识符不能包含空格和“+”、“-”、“@”、“#”等特殊字符。 本教程操作环境…

    2025年3月11日
    200
  • javascript中跳转语句有哪两种

    javascript中的两种跳转语句:1、break语句,用于退出循环或者退出一个switch语句,让程序继续执行循环之后的代码,语法“break;”;2、continue语句用于退出本次循环,并开始下一次循环,语法“continue;”。…

    2025年3月11日
    200
  • HTML中哪种标签有边框

    HTML中有边框的标签:1、input标签,用于规定用户可以在其中输入数据的输入字段;2、hr标签,用于插入一条水平线;3、textarea标签,用于定义一个多行的文本输入控件;4、select标签,用于创建单选或多选菜单。 本教程操作环境…

    2025年3月11日 编程技术
    200
  • html的style放在哪里

    在html中,如果style是属性,则需要放置在单个HTML元素标签中,用于设置行内样式,语法“”;如果style是标签,则需要放置在head标签内,用于设置内嵌样式。 本教程操作环境:windows7系统、CSS3&&HT…

    2025年3月11日
    200
  • html中内联元素和块级元素的区别和联系是什么

    区别:1、块级元素会独占一行显示,行内元素不会,相邻行内元素可在一行显示;2、块级元素可设置宽高,行内元素不能。联系:块级元素可用“display:inline”样式转为内联元素,内联元素可用“display:block”样式转为块级元素。…

    2025年3月11日
    200
  • html如何在图片下加条横线

    在html中,可以利用border-bottom属性来在图片下加条横线,该属性可给图片元素设置下边框样式,进而实现添加下横线的效果,语法“图片元素{border-bottom: 横线粗细 solid 横线颜色;}”。 本教程操作环境:win…

    2025年3月11日
    200
  • html中如何将边框变成圆的

    方法:1、使用width和height属性将元素设置为正方形;2、使用“border: 边框大小 solid 颜色值;”给正方形元素添加边框;3、使用“border-radius: 50%;”语句将边框变成圆的。 本教程操作环境:windo…

    2025年3月11日 编程技术
    200

发表回复

登录后才能评论