深入理解JS作用域链与执行上下文

news2025/2/21 19:57:55

变量提升:

变量提升( hoisting )。

我可恨的 var 关键字:

你读完下面内容就会明白标题的含义,先来一段超级简单的代码:

<script type="text/javascript">

    var str = 'Hello JavaScript hoisting';

    console.log(str);    // Hello JavaScript hoisting

</script>

这段代码,很意外地简单,我们的到了想要的结果,在控制台打印出了:Hello JavaScript hoisting

现在,我将这一段代码,改一改,将 调用 放在前面, 声明 放在后面。

很多语言比如说 C 或者 C++ 都是不允许的,但是 javaScript 允许

你们试着猜猜得到的结果:

<script type="text/javascript">

    console.log(str);        // undefined

    var str = 'Hello JavaScript hoisting';    console.log(str);        // Hello JavaScript hoisting

</script>

你会觉得很奇怪,在我们调用之前,为什么我们的 str = undefined ,而不是报错:未定义???

我将 var str = 'Hello JavaScript hoisting' 删除后,试试思考这段代码的结果:

<script type="text/javascript">

    console.log(str);        // Uncaught ReferenceError: str is not defined

</script>

现在得到了,我们想要的,报错:未定义。

事实上,在我们浏览器会先解析一遍我们的脚本,完成一个初始化的步骤,它遇到 var 变量时就会先初始化变量为 undefined

这就是变量提升(hoisting ),它是指,浏览器在遇到 JS 执行环境的 初始化,引起的变量提前定义。

在上面的代码里,我们没有涉及到函数,因为,我想让代码更加精简,更加浅显,显然我们应该测试一下函数。

<script type="text/javascript">
        console.log(add);            // ƒ add(x, y) { return x + y; }
        function add(x, y) {        return x + y;    }

</script>

在这里,我们并没有调用函数,但是这个函数,已经被初始化好了,其实,初始化的内容,比我们看到的要多。

如何避免变量提升:

使用 letconst 关键字,尽量使用 const 关键字,尽量避免使用 var 关键字;

<script type="text/javascript">

    // console.log(testvalue1);        // 报错:testvalue1 is not defined

    // let testvalue1 = 'test';

    /*---------我是你的分割线-------*/

    console.log(testvalue2);        // 报错:testvalue1 is not defined

    const testvalue2 = 'test';

</script>

但,如果为了兼容也就没办法喽,哈哈哈,致命一击!!!

执行上下文:

执行上下文,又称为执行环境(execution context),听起来很厉害对不对,其实没那么难。

作用域链:

其实,我们知道,JS 用的是 词法作用域 的。

关于 其他作用域 不了解的童鞋,请移步到我的《谈谈 JavaScript 的作用域》,或者百度一下。参考 前端进阶面试题详细解答

每一个 javaScript 函数都表示为一个对象,更确切地说,是 Function 对象的一个实例。

Function 对象同其他对象一样,拥有可编程访问的属性。和一系列不能通过代码访问的 属性,而这些属性是提供给 JavaScript 引擎存取的内部属性。其中一个属性是 [[Scope]] ,由 ECMA-262标准第三版定义。

内部属性 [[Scope]] 包含了一个函数被创建的作用域中对象的集合。

这个集合被称为函数的 作用域链,它能决定哪些数据能被访问到。

来源于:《 高性能JavaScript 》;

我好奇的是,怎样才能看到这个,不能通过代码访问的属性???经过老夫的研究得出,能看到这个东西的方法;

打开谷歌浏览器的 console ,并输入一下代码:

function add(x, y) {
  return x + y;
}

console.log( add.prototype );   // 从原型链上的构造函数可以看到,add 函数的隐藏属性。

可能还有其他办法,但,我只摸索到了这一种。

你需要这样:

然后这样:

好了,你已经看到了,[[Scope]] 属性下是一个数组,里面保存了,作用域链,此时只有一个 global

思考以下代码,并回顾 词法作用域,结合 [[Scope]] 属性思考,你就能理解 词法作用域 的原理,

var testValue = 'outer';

function foo() {
  console.log(testValue);        // "outer"

  console.log(foo.prototype)    // 编号1
}

function bar() {
  var testValue = 'inner';

  console.log(bar.prototype)    // 编号2

  foo();
}

bar();

以下是,执行结果:

编号 1 的 [[Scope]] 属性:Scopes[1] :

编号 2 的 [[Scope]] 属性:Scopes[1]

因为,初始化时,[[Scope]] 已经被确定了,两个函数无论是谁,如果自身的作用域没找到的话,就会在全局作用域里寻找变量。

再思考另外一段代码:

var testValue = 'outer';

function bar() {
  var testValue = 'inner';

  foo();

  console.log(bar.prototype)    // 编号 1

  function foo() {
    console.log(testValue);        // "inner"

    console.log(foo.prototype);    // 编号 2 
  }
}

bar();

编号 1 的 [[Scope]] 属性:Scopes[1] :

编号 2 的 [[Scope]] 属性:Scopes[2] :

这就解释了,为什么结果是,testValue = "inner"

当 需要调用 testValue 变量时;

先找本身作用域,没有,JS 引擎会顺着 作用域链 向下寻找 [0] => [1] => [2] => […]。

在这里,找到 bar 函数作用域,另外有趣的是,Closure 就是闭包的意思 。

证明,全局作用域链是在 全局执行上下文初始化时 就已经确定的:

我们来做一个有趣的实验,跟刚才,按照我描述的方法,你可以找到 [[Scope]] 属性。

那这个属性是在什么时候被确定的呢???

很显然,我们需要从,函数声明前,函数执行时,和函数执行完毕以后三个方面进行测试:

console.log(add.prototype);        // 编号1 声明前

function add(x, y) {

  console.log(add.prototype);    // 编号2 运行时
  return x + y;
}

add(1, 2);
console.log(add.prototype);        // 编号3 执行后

编号1 声明前:

编号2 运行时:

编号3 执行后:

你可按照我的方法,做很多次实验,试着嵌套几个函数,在调用它们之前观察作用域链。

作用域链,是在 JS 引擎 完成 初始化执行上下文环境,已经确定了,这跟我们 变量提升 小节讲述得一样。

它保证着 JS 内部能正常查询 我们需要的变量!。

我的一点疑惑

注意:在这里,我无法证明一个问题。

  1. 全局执行上下文初始化完毕之后,它是把所有的函数作用域链确定。
  2. 还是,初始化一个执行上下文,将本作用域的函数作用域链确定。

这是我的疑惑,我无法证明这个问题,但是,我更倾向于 2 的观点,如果知道如何证明请联系我。至少,《高性能JavaScript》中是这样描述的。

知道作用域链有什么好处?

试想,我们知道作用域链,有什么用呢???

我们知道,如果作用域链越深, [0] => [1] => [2] => […] => [n],我们调用的是 全局变量,它永远在最后一个(这里是第 n 个),这样的查找到我们需要的变量会引发多大的性能问题?JS 引擎查找变量时会耗费多少时间?

所以,这个故事告诉我们,尽量将 全局变量局部化 ,避免,作用域链的层层嵌套,所带来的性能问题。

理解 执行上下文:

将这段代码,放置于全局作用域之下。这一段代码,改编自《高性能JavaScript》。

function add(x, y) {
    return x + y;
}

var result = add(1, 2);

这段代码也很简洁,但在 JavaScript 引擎内部发生的事情可并不简单。

正如,上一节,变量提升 所论述,JS 引擎会初始化我们声明 函数 和 变量 。

那么在 add(1, 2) 执行前,我们的 add 函数 [[Scope]] 内是怎样的呢???

这里有三个时期:初始化 执行上下文、运行 执行上下文、结束 执行上下文

很显然,执行到 var result = add(1, 2) 句时,是程序正在准备:初始化执行上下文

如上图所示,在函数未调用之前,已经有 add 函数的[[Scope]]属性所保存的 作用域链 里面已经有这些东西了。

当执行此函数时,会建立一个称为 执行上下文 (execution context) 的内部对象。

一个 执行上下文 定义了一个函数执行时的环境,每次调用函数,就会创建一个 执行上下文 ;

一旦初始化 执行上下文 成功,就会创建一个 活动对象 ,里面会产生 this arguments 以及我们声明的变量,这个例子里面是 xy

运行执行上下文 阶段:

结束 执行上下文 阶段

好了,但是,这里没有涉及到调用其他函数。

其实,还有,我们的 JavaScript 引擎是如何管理,多个函数之间的 执行上下文 ???

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/4789.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【K8S】初探Kubernetes

文章目录什么是容器编排什么是KubernetesK8s 和 Docker 之间的关系Kubernetes的整体架构Master 里的组件构成Work Node 里的组件构成总结K8s 组件工作流程结束语什么是容器编排 在《Docker 进阶指南&#xff08;下&#xff09;- 使用Docker Compose编排多个容器》文章当中&…

文件缓冲区

本期介绍&#x1f356; 主要介绍&#xff1a;什么是文件缓冲区&#xff0c;文件缓冲区存在的意义是什么&#xff0c;文件缓冲区的证明&#x1f440;。 一、什么是文件缓冲区 每一个正在使用的文件&#xff0c;操作系统都会为其在内存中开辟一块区域&#xff0c;称之为&#xff…

【数据结构】带头双向链表的简单实现

目录前言链表的实现List.hList.c**ListCreate()****LTInit()****ListPushBack()****ListPopBack()****ListPrint()****ListPushFront()****ListPopFront()****ListFind()****ListInsert()****ListErase()**ListErase()test.c前言 该篇博客主要讲解了带头双向链表的实现和一些细…

Cadence Allegro DXF结构图的导入详细教程

很多消费类板卡的结构都是异形的&#xff0c;由专业的CAD结构工程师对其进行精准的设计&#xff0c;PCB布线工程师可以根据结构工程师提供的2D图&#xff08;DWG或DXF格式&#xff09;进行精准的导入操作&#xff0c;在PCB中定义板型结构。 同时&#xff0c;对于一些工控板或者…

Ajax--跨域与JSONP--案例-淘宝搜索

要实现的UI效果 获取用户输入的搜索关键词 为了获取到用户每次按下键盘输入的内容&#xff0c;需要监听输入框的 keyup 事件&#xff0c;示例代码如下&#xff1a; // 监听文本框的 keyup 事件$(#ipt).on(keyup, function() {// 获取用户输入的内容var keywords $(this).val…

支撑向量机

1、支持向量机算法原理 支持向量机&#xff08;Support Vetor Machine&#xff0c;SVM&#xff09;由Vapnik等人于1995年首先提出&#xff0c;在解决小样本、非线性及高维模式识别中表现出许多特有的优势&#xff0c;并推广到人脸识别、行人检测和文本分类等其他机器学习问题中…

HTML期末作业:基于html+css+javascript+jquery实现古诗词网页 学生网页设计作品 web前端开发技术 web课程设计 网页规划与设计

&#x1f389;精彩专栏推荐 &#x1f4ad;文末获取联系 ✍️ 作者简介: 一个热爱把逻辑思维转变为代码的技术博主 &#x1f482; 作者主页: 【主页——&#x1f680;获取更多优质源码】 &#x1f393; web前端期末大作业&#xff1a; 【&#x1f4da;毕设项目精品实战案例 (10…

初学C语言有什么建议?

什么&#xff1f;开玩笑&#xff0c;新手学C语言&#xff1f; 确实新手不学C语言学什么呢&#xff1f;为什么这么推荐新手学C语言呢具体看看下面的解释吧&#xff1f; C的重要性 我总结了网上很多人的说法如下&#xff1a; C语言是计算机界公认的有史以来最重要的语言。C语…

R语言偏相关和典型相关

本文首发于公众号&#xff1a;医学和生信笔记&#xff0c;完美观看体验请至公众号查看本文。 文章目录偏相关&#xff08;partial correlation&#xff09;偏相关散点图典型相关&#xff08;Canonical Correlation&#xff09;使用R语言实现偏相关分析和典型相关分析&#xff0…

一个对C#程序混淆加密,小巧但够用的小工具

对于我们程序员来说&#xff0c;平常开发的桌面应用程序&#xff0c;如果不进行一定程度的加密、混淆&#xff0c;是很容易通过反编译手段进行破解的&#xff0c;特别是一些商业用途的C#软件&#xff0c;更是容易被破解。 所以今天给大家推荐一个对C#程序加密混淆项目&#xf…

脱离CRUD苦海 !性能优化全栈小册来了!

性能优化 随着互联网的高速发展&#xff0c;互联网行业已经从IT时代慢慢步入到DT时代。对于Java程序员的要求越来越高&#xff0c;只是单纯的掌握CRUD以不足以胜任互联网公司的相关职位&#xff0c;大量招聘岗位显示&#xff1a;如果是面试中高级的Java岗&#xff0c;基本上都…

flex1时内容溢出

目标效果&#xff1a;右边黄色部分填充减去红色部分的剩余部分 原理: flex: 1 代码&#xff1a; <div class"box"><div class"inner-left"></div><div class"inner-right"><span class"inner-right-content&…

RK3568平台开发系列讲解(NPU篇)让 NPU 跑起来

🚀返回专栏总目录 文章目录 一、在 Android 系统中使用 NPU1.1、下载编译所需工具1.2、修改编译工具路径1.3、更新 RKNN 模型1.4、编译 demo沉淀、分享、成长,让自己和他人都能有所收获!😄 📢本篇将介绍如何让NPU跑起来。 一、在 Android 系统中使用 NPU 下载 rknpu2 …

Hadoop的eclipse搭建(客观莫划走,留下来看一眼(适用人群学生初学,其他人看看就行))

前言&#xff1a;Hadoop的eclipse搭建是建立在Hadoop的安装之后进行的&#xff0c;因为Linux上的Hadoop和Windows上的Hadoop版本要求一致&#xff0c;不一致可能会出现某些问题 准备工作&#xff1a;Java的安装包、eclipse的安装包、Hadoop的包&#xff08;Windows的Hadoop安装…

基于Socket编程下 实现Linux-Linux、Linux-Windows udp通信

文章目录一、通信实现二、Linux-Linux1. 服务器 Server2. 客户端 Client三、Linux-Windows1. 服务器 Linux_Server2. 客户端 Windows_Client程序源码一、通信实现 1. Linux-Linux 在虚拟机下开启俩个终端&#xff0c;分别运行服务器和客户端程序(服务器运行在前&#xff0c;客…

栈的简单实现及应用

栈的简单实现及其应用什么是栈&#xff1f;栈的分类栈的数据结构栈的基本操作栈的初始化栈的销毁入栈操作出栈和栈空的判断获取栈顶元素获取栈的元素个数头文件总结栈的应用什么是栈&#xff1f; 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除…

【毕业设计】垃圾邮件(短信)分类算法研究与实现 - 机器学习

文章目录1 前言2 垃圾短信/邮件 分类算法 原理2.1 常用的分类器 - 贝叶斯分类器3 数据集介绍4 数据预处理5 特征提取6 训练分类器7 综合测试结果8 其他模型方法9 最后1 前言 &#x1f525; Hi&#xff0c;大家好&#xff0c;这里是丹成学长的毕设系列文章&#xff01; &#…

Vue面试题-答案、例子

1、Vue的生命周期 每一个vue实例从创建到销毁的过程&#xff0c;就是这个vue实例的生命周期。在这个过程中&#xff0c;他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。 将要创建 >调用beforeCreate函数 创建完毕 >调用creat…

振弦采集模块复位( 重启)及恢复出厂设置

振弦采集模块复位&#xff08; 重启&#xff09;及恢复出厂设置 以下几种情况&#xff08;或操作&#xff09;可使模块产生复位动作&#xff0c;重新启动。 &#xff08; 1&#xff09; 在模块正常工作期间&#xff0c;向寄存器 SYS_FUN 发送软复位指令 0x01&#xff1b; &…

74ls192无法正常使用。

分析与解决74ls192芯片无法在proteus中正常运行 博主最近要做电子技术课程设计&#xff0c;于是重新拾起了长久不用的proteus。在构建倒计时电路时&#xff0c;发现了一个问题&#xff1a; 74ls192芯片&#xff0c;在软件提供的时钟信号下能正常开启计时。但是在自己使用的55…