javascript中作用域链的详细介绍(附示例)

本篇文章给大家带来的内容是关于javascript中作用域链的详细介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。

概述

JavaScript 中的可执行代码有其执行上下文,在执行上下文中,有三个重要的元素:

变量对象(variable object)

作用域链(scope chain)

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

this

其中,变量对象是上下文中变量声明和函数声明的集合。  
this 表示是变量对象被谁所持有,this 总是指向当前的上下文。

而作用域链则控制着变量与函数的可见性和生命周期。

一、作用域链

JavaScript 引擎在查找变量标识符对应的绑定(binding)时,会从最内部的作用域向外冒泡开始查找,如果内部作用域没找到,就在父作用域查找,直到找到第一个匹配的标识符时就停止,这就是 JS 中的作用域链。

var name = "global";function func1() {    var name = "outter";    function func2() {        var name = "inner";        console.log(name);    }    func2();}func1() // "inner"

登录后复制

console.log(name)语句中,JS 在查找 name变量标识符的绑定(binding)时,会从 func2 内部向外部函数查找变量声明,直到最顶层。这里最后只取了最近的 “inner”值,找到了第一个就停止查找,就叫做“遮蔽效应”。

二、创建和执行阶段

每个函数有一个内部属性  [[scope]],同时作用域链与执行上下文有关,函数定义的时刻 scope chain 链接所以父级上下文当中的变量对象。

var a = 1;var b = 3;function foo(){  var a = 2;  bar(4);  function bar(param){    console.log(a+param)  }}foo.[[scope]] = [  globalContext.VO // a, b];bar.[[scope]] = [    fooContext.AO, // a    globalContext.VO // a, b];

登录后复制

再来:

函数的执行有创建阶段和执行阶段,不同时刻变量对象的值不一样。

函数创建阶段

一般情况下,作用域链就是父级变量对象(variable object)(作用域链的顶部)、函数自身变量VO或活动对象(activation object)组成了一个列表。

var a = 2;function foo() {    var b = 3;    console.log(a+b);}foo() // 5

登录后复制

我们当然知道最后结果输出 5,但是在创建阶段却有一个有趣的事情:
首先,a 变量属于全局环境中的变量,b 属于 foo 函数环境中的变量,在创建阶段,二者的值都为 undefined;

globalContext.VO = {    a: undefined}fooContext.VO = {    b: undefined}

登录后复制

可以看到,foo 上下文中并不包含 a, foo 就是通过作用域找到的 a。即:

fooContext = {    [[scope]]: {        // 父级的变量对象    }}

登录后复制

当前执行上下文的 [[scope]], 包含了所有父级上下文中的变量对象列表。

函数执行阶段

当进入函数执行阶段后,函数上下文就会将当前执行上下文中的变量对象,转化为活动对象,并将其放在作用域链的最前端,最后修改变量的值。

scope = [AO].contat([[scope]])

登录后复制

所以最后寻找变量的时候,总是从最内部的执行上下文开始,然后再向外冒泡查找。

三、延长作用域链

在 JS 中,with 和 try catch关键字能延长作用域链,对 with 来说,将会指定一个只读对象添加到作用域链中。

对 catch 来说,会异常对象推入一个可变对象并置于用域的头部。

with 和 try catch 都增加了当前作用域可以访问的变量对象数量,所以看做延长了作用域链。

四、作用域链和原型链

作用域链的作用是用于查找标识符,沿着作用域链向外冒泡查找,找到第一个就停下。

而原型链用于对象的属性查找,通用原型链想链的顶端查找,如果找到该属性会停止搜索。如果没有找到,就默认为 undefined。

五、闭包

变量在执行完毕后,就会在内存中被垃圾回收,但是如果此时,变量在其他作用域中,或者说加入了其他上下文的作用域链后,变量就能够继续被访问,这种行为就叫做闭包。

function foo() {    var a = 1;    function bar (){        return a;    }    return bar;}var other = foo();other();  // 1

登录后复制

foo 函数执行完后,内部变量本应该被清空,但是由于返回的函数引用了变量 a ,变量 a 得以继续访问,就构成了闭包。

总结

作用域链是由所有父级上下文的变量对象所构成的列表,用于查找标识符,从内部执行上下文查找,直到全局上下文。

以上就是javascript中作用域链的详细介绍(附示例)的详细内容,更多请关注【创想鸟】其它相关文章!

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

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

(0)
上一篇 2025年3月8日 01:53:33
下一篇 2025年3月8日 01:53:39

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

相关推荐

  • javascript错误处理机制的介绍(附示例)

    本篇文章给大家带来的内容是关于javascript错误处理机制的介绍(附示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 有时候,在自己封装的工具函数中,不传参或传入了错误类型的参数,也要适当的抛出一些错误以示警告;使…

    编程技术 2025年3月8日
    100
  • echarts如何优化数据视图dataView中的样式(代码示例)

    本篇文章给大家带来的内容是关于echarts如何优化数据视图dataview中的样式(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在使用echart过程中,toolbox里有个dataView视图模式,里面的…

    2025年3月8日
    200
  • 浅析js中的深拷贝与浅拷贝

    本篇文章给大家带来的内容是关于浅析js中的深拷贝与浅拷贝,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 关于深拷贝和浅拷贝其实是两个比较基础的概念,但是我还是想整理一下,因为里面有很多小细节还是很有意思的。 深拷贝和浅拷贝…

    编程技术 2025年3月8日
    200
  • React首次渲染的解析一(纯DOM元素)

    本篇文章给大家带来的内容是关于react首次渲染的解析(纯dom元素),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 React 是一个十分庞大的库,由于要同时考虑 ReactDom 和 ReactNative ,还有服务…

    2025年3月8日
    200
  • React首次渲染解析二(纯DOM元素)

    本篇文章给大家带来的内容是关于react首次渲染解析二(纯dom元素),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 上一篇文章中,介绍了顶层对象ReactCompositeComponent[T]是如何构造的,接下来我们…

    2025年3月8日
    200
  • javascript原型链需要注意的地方的总结

    本篇文章给大家带来的内容是关于javascript原型链需要注意的地方的总结,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 前言:最近在细读Javascript高级程序设计,对于我而言,中文版,书中很多地方翻译的差强人意,…

    编程技术 2025年3月8日
    200
  • ES6中对象的新功能与解构赋值的详解(代码示例)

    本篇文章给大家带来的内容是关于es6中对象的新功能与解构赋值的详解(代码示例),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 ES6 通过字面量语法扩展、新增方法、改进原型等多种方式加强对象的使用,并通过解构简化对象的数据…

    编程技术 2025年3月8日
    200
  • 详解javascript浏览器的事件循环机制

    本篇文章给大家带来的内容是关于详解javascript浏览器的事件循环机制,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 抛在前面的问题: 单线程如何做到异步 事件循环的过程是怎样的 macrotask 和 microta…

    2025年3月8日 编程技术
    200
  • 解析Node.js的事件循环机制

    本篇文章给大家带来的内容是关于解析node.js的事件循环机制,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在浏览器篇已经对事件循环机制和一些相关的概念作了详细介绍,但主要是针对浏览器端的研究,Node环境是否也一样呢?…

    2025年3月8日 编程技术
    200
  • Javascript中什么是流程控制(代码实例)

    本篇文章给大家带来的内容是介绍javascript中什么是流程控制(代码实例)。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所助。 流程控制 JavaScript通过流程语句来执行程序流,程序流有若干语句组成。在正常情况下,程序…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论