JavaScript相关(一)——作用域

本篇将从JS的执行上下文开始,去理解:变量提升、 栈式调用、作用域和闭包。

参考:
浏览器工作原理与实践

JS执行上下文

执行上下文是 JavaScript 执行一段代码时的运行环境,比如调用一个函数,就会生成这个函数的执行上下文,确定该函数在执行期间用到的诸如 this、变量环境、词法环境、外部环境引用等。

JS引擎执行JS代码分为两部分,第一部分是编译、第二部分才是执行,在编译阶段,会做变量提升等操作,生成JS执行上下文。
JS执行上下文中包含变量环境,变量提升的变量都存储在这里面,包括用户声明的变量以及函数声明变量,里面还包括指向外部变量环境的引用(作用域链查找)、词法环境,存储块级变量声明,即const\let声明的量,在生成了执行上下文后,才会继续执行JS可执行的代码。

执行时,需要从作用域中查询某个变量,具体查询办法是:沿着词法环境的栈顶向下查询,如果在词法环境中的某个块中查找到了,就直接返回给 JavaScript 引擎,如果没有查找到,那么继续在变量环境中查找。

showName()
console.log(myname)
showName1()

var myname = '!!!'
function showName() {
    console.log('函数showName被执行');
}
var showName1 = function () {
    console.log('函数showName1被执行');
}

// 输出
函数showName被执行
undefined
Error:showName1 is not a function

如果showName1声明 var改成const Error:showName1 is not defined

说明:
变量的生成涉及到 声明、赋值两个阶段。在声明阶段JS引擎会把变量和函数的声明提升到代码开头执行,因此showName可以被执行,myname被默认赋值为undefined,但是showName1是一个变量赋值,它一开始只是提升了声明,因此showName1是undefined,会报错not a function。

var的创建和初始化被提升,赋值不会提升。
let的创建被提升,初始化和赋值不会提升。
function的创建、初始化和赋值都被提升。

变量提升,是指在 JavaScript 代码执行过程中,JavaScript 引擎把变量的声明部分和函数的声明部分提升到代码开头的“行为”。变量被提升后,会给变量设置默认值,这个默认值就是我们熟悉的 undefined。变量提升操作并不会直接在代码里显现出来,它是在JS代码的编译阶段完成的。

为什么要引入块级作用域
因为会存在着变量覆盖、无法自动回收全局变量导致占用内存 等设计缺陷,所以 ES6 引入了块级作用域关键字来解决这些问题。

作用域

作用域是指在程序中定义变量的区域,该位置决定了变量的生命周期。通俗地理解,作用域就是变量与函数的可访问范围,即作用域控制着变量和函数的可见性和生命周期
作用域在编码时就确定了, 不会再变化,可以用于隔离变量, 在不同作用域定义同名的变量不冲突。

作用域链:多个嵌套的作用域形成的由内向外的结构, 用于查找变量

分类:
  1. 全局作用域:全局作用域中的对象在代码中的任何地方都能访问,其生命周期伴随着页面的生命周期。
  2. 函数作用域:函数作用域就是在函数内部定义的变量或者函数,并且定义的变量或者函数只能在函数内部被访问。函数执行结束之后,函数内部定义的变量会被销毁。
  3. 块级作用域。
区别作用域与执行上下文

作用域: 静态的, 编码时就确定了(不是在运行时), 一旦确定就不会变化了
执行上下文: 执行代码时在编译阶段动态创建, 当执行结束消失
联系: 执行上下文环境是在对应的作用域中的

作用域链

function bar() {
    console.log(myName)
}
function foo() {
    var myName = "极客邦"
    bar()
}
var myName = "极客时间"
foo()

分析:

答案是会输出:极客时间。

为什么bar查询的作用域链不会指向foo的作用域链,而是指向全局?
因为作用域链的生成由函数声明的位置决定,和调用位置、调用栈无关。

要回答这个问题,你还需要知道什么是词法作用域
这是因为在 JavaScript 执行过程中,其作用域链是由词法作用域决定的。
词法作用域词法作用域就是指作用域是由代码中函数声明的位置来决定的,所以词法作用域是静态的作用域,通过它就能够预测代码在执行过程中如何查找标识符。

块级作用域
function bar() {
    var myName = "极客世界"
    let test1 = 100
    if (1) {
        let myName = "Chrome浏览器"
        console.log(test)
    }
}
function foo() {
    var myName = "极客邦"
    let test = 2
    {
        let test = 3
        bar()
    }
}
var myName = "极客时间"
let myAge = 10
let test = 1
foo()

分析:
顺序由图中所示

可以由图里知道,一个变量 作用域链会先查词法环境、再查变量环境,接下来顺着外部引用,依次查询词法环境、变量环境。
因此会输出:1

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【MySQL】_JDBC编程

目录 1. JDBC原理 2. 导入JDBC驱动包 3. 编写JDBC代码实现Insert 3.1 创建并初始化一个数据源 3.2 和数据库服务器建立连接 3.3 构造SQL语句 3.4 执行SQL语句 3.5 释放必要的资源 4. JDBC代码的优化 4.1 从控制台输入 4.2 避免SQL注入的SQL语句 5. 编写JDBC代码实现…

同步和异步、阻塞与非阻塞

一、同步和异步的概念 首先同步和异步是访问数据的机制 同步:同步一般指主动请求并等待IO操作完成的方式异步:主动请求数据后便可以继续处理其它任务,随后等待IO操作完毕的通知 两者的区别:同步会一行一行执行代码,而…

猫头虎分享:什么是IDE?新手入门用哪个IDE比较好?

博主猫头虎的技术世界 🌟 欢迎来到猫头虎的博客 — 探索技术的无限可能! 专栏链接: 🔗 精选专栏: 《面试题大全》 — 面试准备的宝典!《IDEA开发秘籍》 — 提升你的IDEA技能!《100天精通鸿蒙》 …

【集合系列】LinkedHashMap 集合

LinkedHashMap集合 1. 概述2. 方法3. 遍历方式4. 代码示例5. 注意事项 其他集合类 祖父类 Map 父类 HashMap 集合类的遍历方式 具体信息请查看 API 帮助文档 1. 概述 LinkedHashMap 是 Java 中的一种特殊类型的 HashMap,它继承自 HashMap 类,并实现了…

大模型实战营第二期——2. 浦语大模型趣味Demo

文章目录 1. 大模型及InternLM模型介绍2. InternLM-Chat-7B智能对话Demo2.1 基本说明2.2 实际操作2.2.1 创建开发机2.2.2 conda环境配置2.2.3 模型下载2.2.4 InternLM代码库下载和修改2.2.5 cli运行2.2.6 web_demo运行 3. Lagent智能体工具调用Demo3.1 基本说明3.2 实际操作3.2…

Android:Android视图组件

3.1 移动通讯技术 第一代通讯技术:大哥大,工作原理:模拟信号(说话声波引起铜片震动,电容变化,产生交变电流),工作频段(收音机调频,同一个频道才能通讯);缺点:保密性差(同频可以窃听)。 第二代通讯技术:通讯工具变小,工作原理:模拟信号变成数字信号(将声音产…

高级数据结构与算法 | 布谷鸟过滤器(Cuckoo Filter):原理、实现、LSM Tree 优化

文章目录 Cuckoo Filter基本介绍布隆过滤器局限变体 布谷鸟哈希布谷鸟过滤器 实现数据结构优化项Victim Cache备用位置计算半排序桶 插入查找删除 应用场景:LSM 优化 Cuckoo Filter 基本介绍 如果对布隆过滤器不太了解,可以看看往期博客:海量…

OJ_计算不带括号的表达式

题干 C实现 #define _CRT_SECURE_NO_WARNINGS #include <stdio.h> #include <stack> #include <string> #include <map> using namespace std;int main() {char str[1000] { 0 };map<char, int> priority {{\0,0},{,1},{-,1},{*,2},{/,2}};wh…

2024年【R2移动式压力容器充装】考试内容及R2移动式压力容器充装免费试题

题库来源&#xff1a;安全生产模拟考试一点通公众号小程序 R2移动式压力容器充装考试内容参考答案及R2移动式压力容器充装考试试题解析是安全生产模拟考试一点通题库老师及R2移动式压力容器充装操作证已考过的学员汇总&#xff0c;相对有效帮助R2移动式压力容器充装免费试题学…

高级FPGA开发之基础协议PCIe(二)

高级FPGA开发之基础协议之PCIe&#xff08;二&#xff09; 一、TLP报文类型 在PCIe总线中&#xff0c;存储器读写、I/O读写和配置读写请求TLP主要由以下几类报文组成&#xff1a; 1.1 存储器读请求TLP和读完成TLP 当PCIe主设备&#xff08;RC或者EP&#xff09;访问目标设备…

非常好看的CSS加载中特效,引用css文件既可用

非常好看的CSS加载中特效 demo效果源码&#xff1a; <!DOCTYPE html5> <head><link rel"stylesheet" type"text/css" href"demo.css"/><link rel"stylesheet" type"text/css" href"loaders.css&…

创新指南|生成式AI实验 - 企业快速渐进采用人工智能的科学新方法

生成式人工智能&#xff08;Gen AI&#xff09;正迅速成为各行各业的企业创新焦点。 生成式AI实验对于企业创新而言至关重要&#xff0c;不仅可以帮助企业识别最适合和最有影响的应用场景&#xff0c;还能促进组织沿着生成式 AI 学习曲线前进&#xff0c;建立早期的创新领导者和…

问题:银行账号建立以后,一般需要维护哪些设置,不包括() #学习方法#经验分享

问题&#xff1a;银行账号建立以后&#xff0c;一般需要维护哪些设置&#xff0c;不包括&#xff08;&#xff09; A&#xff0e;维护结算科目对照 B&#xff0e;期初余额初始化刷 C&#xff0e;自定义转账定义 D&#xff0e;对账单初始化 参考答案如图所示

中小型网络系统总体规划与设计方法

目录 1.基于网络的信息系统基本结构 2.网络需求调研与系统设计原则 3.网络用户调查 4.网络节点地理位置分布情况 5.网络需求详细分析 6.应用概要分析 7.网络工程设计总体目标与设计原则 8.网络结构与拓扑构型设计方法 9.核心层网络结构设计 10.接入核心路由器 11.汇聚…

Python进程之并行与并发的区别

并行 : 当系统有一个以上CPU时&#xff0c;则进程的操作有可能非并发。当一个CPU执行一个进程时&#xff0c;另一个CPU可以执行另一个进程&#xff0c;两个进程互不抢占CPU资源&#xff0c;可以同时进行&#xff0c;这种方式我们称之为并行。 并发 : 当有多个进程在操作时&…

【LeetCode】332. 重新安排行程(困难)——代码随想录算法训练营Day30

题目链接&#xff1a;332. 重新安排行程 题目描述 给你一份航线列表 tickets &#xff0c;其中 tickets[i] [fromi, toi] 表示飞机出发和降落的机场地点。请你对该行程进行重新规划排序。 所有这些机票都属于一个从 JFK&#xff08;肯尼迪国际机场&#xff09;出发的先生&a…

在Python中执行Linux Shell脚本详解

概要 随着 Python 的增长和普及,目前它已经成为自动化各种任务,包括执行 shell 脚本的主要工具。这篇文章将详细描述如何在 Python 中执行 shell 脚本,并提供丰富的示例帮助你理解和实践。 什么是Shell脚本? Shell脚本是一个由命令行解释器执行的文本文件。这些脚本包含控…

政安晨:快速学会~机器学习的Pandas数据技能(四)(汇总与映射)

从数据中提取价值&#xff01; 概述 在上一篇文章中&#xff0c;我们学习了如何从DataFrame或Series中选择相关数据。从我们的数据表示中选择正确的数据对于完成工作非常重要&#xff0c;正如我们在练习中所演示的那样。 然而&#xff0c;数据并不总是以我们想要的格式直接从…

PgSQL技术内幕 - case when表达式实现机制

PgSQL技术内幕 - case when表达式实现机制 CASE表达式如同 C语言中的if/else语句一样&#xff0c;为SQL添加了条件逻辑处理能力&#xff0c;可以根据不同条件返回不同结果。PgSQL支持两种语法&#xff1a;简单表达式和搜索表达式。 1、搜索表达式 语法如下&#xff1a; CASE WH…

2023年第四季度硬盘容量强势增长9%

在2023年第四季度&#xff08;CQ4 23&#xff09;&#xff0c;硬盘驱动器&#xff08;HDD&#xff09;市场的总容量出货量环比增长9%&#xff0c;达到214EB&#xff0c;而单位出货量保持在2900万块不变。其中&#xff0c;近线存储&#xff08;Nearline&#xff09;硬盘的容量出…