js作用域和变量提升

article/2025/9/16 19:17:14

作用域

作用域的分类

  • 全局作用域
    在一个js脚本中,最外层的作用域就是全局作用域,在此范围内声明的任何变量都会是全局变量,可以在程序的任意位置访问

  • 局部作用域

    • 函数作用域
    var locales = {
    school: function() {          // 这里的school(学校)是局部作用域var student = "公众号:搞前端的半夏";var apartment = function() {   //这里的apartment(宿舍楼)也是局部作用域var room = function() {  // 这里的room依然是局部作用域console.log(student);  // 公众号:搞前端的半夏};room();};apartment();
    }
    };locales.school();    //公众号:搞前端的半夏
    

    我们想找到student,是怎么查找的呢,首先我们在他的宿舍查找,没有找到,然后会往上一层宿舍楼进行查找,宿舍楼没有找到,然后在往学校查找,最终找到了student。

    • 代码块作用域
      在代码块(if, for,while等等)中使用let和const声明变量,let和const会为这个代码块创建一个新的块级作用域。
    function f(n) {
    if (true) {const msg = '你好';let name = n;console.log(msg + " " + name);     //公众号-搞前端的半夏
    }
    console.log(msg + " " + name);      //报错  msg is not defined
    }f('公众号-搞前端的半夏');    
    

    通过let和const在块级作用域外是无法被访问的。

    function f(n) {
    if (true) {var msg = '你好';var name = n;console.log(msg + " " + name);     //公众号-搞前端的半夏
    }
    console.log(msg + " " + name);        //公众号-搞前端的半夏
    }
    

    当我们使用var关键字时,变量在整个函数作用域都是可访问的
    在 JavaScript 中,可以在多层嵌套范围内指定同名变量。在这种情况下,局部变量优先于全局变量。如果你声明了一个同名的局部变量和一个全局变量,当你在函数或块中使用它时,局部变量将优先。

JavaScript 解释器从当时正在执行的最内层范围开始,一直持续到找到第一个匹配项,无论外层级别中是否存在其他同名变量。
var test = "我是全局";function testScope() {var test = "我是局部";console.log (test);     
}testScope();           // output: 我是局部
console.log(test);     // output: 我是全局

即使名称相同,局部变量在函数执行后也不会覆盖全局变量testScope()。

var test = "我是全局";function testScope() {test = "我是局部";console.log(test);     
}console.log(test);     // output: 我是全局testScope();           // output: 我是局部console.log(test);     // output: 我是局部 

这一次,局部变量test覆盖了同名的全局变量。当我们在testScope()函数内部运行代码时,全局变量被重新分配。如果一个局部变量在没有首先用关键字声明的情况下被赋值var,它就变成了一个全局变量。为避免此类情况,应始终在使用局部变量之前声明它们。在函数中使用关键字声明的任何变量var都是局部变量。

总结

  • var 变量是函数作用域
  • let and const 变量是块级作用域
  • 使用var关键字声明的全局作用域变量属于window对象。
    使用let关键字声明的全局作用域变量不属于window对象。
  • var关键字定义的变量可以先使用后声明。
    let关键字定义的变量需要先声明再使用。
    const关键字定义的常量,声明时必须进行初始化,且初始化后不可再修改。

变量提升

var a = 1function fn(){console.log(a)var a = 2
}
fn() //undefined

这个代码相当于

var a = 1function fn(){var a    //undefinedconsole.log(a)a = 2
}
fn() //undefined

变量声明提升

函数提升

function f() {x();function x() {console.log(1);}
}f();

这个代码等价于

function f() {function x() {console.log(1);}x();
}f();

扩展

var fn = function(){}和function fn(){}的区别:前者为变量提升,后者为函数提升。
fn1()  //fn1
fn2()   //fn2 is not function
function fn1() {console.log("fn1")
}
var fn2 = function() {console.log("fn2")
}f();
如果是用变量提升来声明函数,如果在此前调用该函数,此时的函数对象并没有创建,变量fn2赋值为undefined,所以浏览器不能识别,把它当做函数来调用,所以最后报错。

在js中,函数优先级最高

被覆盖的不是函数fn,而是var fn =3;

console.log(fn)
function fn() {console.log("hello world")
}
var fn = 1

结果
在这里插入图片描述


http://chatgpt.dhexx.cn/article/h1evwuYt.shtml

相关文章

js之变量提升

首先 javascript 是一种弱类型、动态的、解释型的脚本语言。 弱类型:类型检查不严格,偏向于容忍隐式类型转换。 强类型:类型检查严格,偏向于不容忍隐式类型转换。 动态类型:运行的时候执行类型检查。 静态类型&…

JS中的变量提升总结

1.JS代码执行顺序 我们直觉上会认为JS的代码在执行时是由上到下一行一行执行的,但实际并不完全正确,下面的例子会证明: a haha var a console.log(a)上面的代码会输出什么呢? 如果按照我们认为的由上到下一行一行执行&#xf…

Flink Table 和 DataStream 转换

文章目录 Flink Table 和 DataStream 转换1. 表(Table) 转换为 流(DataStream)1.1 处理(仅插入)流1.1.1 fromDataStream()方法:1.1.1.1 fromDataStream(DataStream var1)1.1.1.2 fromDataStream(DataStream var1, Expression... var2)1.1.1.3…

数据流—DataStreamAPI

Hello Flink 1:构建一个典型的Flink流式应用需要一下几步: 1:设置执行环境。 2:从数据源中读取一条或多条流 3:通过一系列流式转换来实现应用逻辑。 4:选择性的将结果输出到一个或多个数据汇(用…

【Flink】DataStream API使用之转换算子(Transformation)

转换算子(Transformation) 数据源读入数据之后,就是各种转换算子的操作,将一个或者多个DataSream转换为新的DataSteam,并且Flink可以针对一条流进行转换处理,也可以进行分流或者河流等多流转换操作&#xf…

Flink-DataStream执行环境和数据读取

​编辑执行环境 创建执行环境 执行模式 触发程序执行 源算子(Source) 读取有界数据流 读取无界数据 读取自定义数据源(源算子) DataStream是一个 Flink 程序,其实就是对 DataStream 的各种转换。具体来说&#xff0c…

Flink数据流类型之间的转换(WindowedStream、DataStream、KeyedStream、AllWindowStream之间的转换)

Flink提供了一些流API,其中包括WindowedStream、DataStream、KeyedStream和AllWindowStream。 🍊WindowedStream是一种特殊的流,其中数据已按时间或数据元素的键进行分组,并且每个分组的数据都在窗口中按时间划分。这意味着&…

DataStream API

目录 原算子 准备工作,环境搭建 读取数据 从文件中读取数据 从集合中读取数据 从元素中读取数据 从source文件中读取数据 从kafka中读取数据 自定义source类型输出 转换算子 map转换 Filter转换 FlatMap转换 原算子 准备工作,环境搭建 为…

Flink学习——DataStream API

一个flink程序,其实就是对DataStream的各种转换。具体可以分成以下几个部分: 获取执行环境(Execution Environment)读取数据源(Source)定义基于数据的转换操作(Transformations)定义…

大数据开发-Flink-数据流DataStream和DataSet

文章目录 一、DataStream的三种流处理Api1.1 DataSource1.2 Transformation1.3 Sink 二、DataSet的常用Api2.1 DataSource2.2 Transformation2.3 Sink Flink主要用来处理数据流,所以从抽象上来看就是对数据流的处理,正如前面大数据开发-Flink-体系结构 &…

Flink DataStream API 介绍

Flink DataStream API 介绍 StreamExecutionEnvironment #mermaid-svg-JKeWa22W2vWA4zBS {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-JKeWa22W2vWA4zBS .error-icon{fill:#552222;}#mermaid-svg-JKeWa22W2vWA4z…

DataStream API介绍与使用(一)

详细API参考官网 DataStream编程模型 在Flink整个系统架构中,对流计算的支持是其最重要的功能之一,Flink基于Google提出的DataFlow模型,实现了支持原生数据流处理的计算引擎。Flink中定义了DataStream API让用户灵活且高效地编写Flink流式应…

DataStream API(一)

Flink 有非常灵活的分层 API 设计,其中的核心层就是 DataStream/DataSet API。由于新版 本已经实现了流批一体, DataSet API 将被弃用,官方推荐统一使用 DataStream API 处理流数 据和批数据。由于内容较多,我们将会用几章的篇幅来…

DataStream(二)

目录 5.3.2 聚合算子(Aggregation) 5.3.3 用户自定义函数(UDF) 3. 扁平映射(flatMap) flatMap 操作又称为扁平映射,主要是将数据流中的整体(一般是集合类型)拆分成一个 …

Flink DataStream API

Flink DataStream API 编程指南 概览前言什么是DataStreamFlink程序剖析程序样例 Data SourcesDataStream Transformations算子数据流转换算子物理分区算子链和资源组 Data Sinks迭代执行参数 概览 前言 Flink中的DataStream程序是常规程序,可对数据流进行转换&am…

DataStream API(三)

目录 5.3.4 物理分区(Physical Partitioning) 5.4 输出算子(Sink) 5.4.1 连接到外部系统 5.4.2 输出到文件 5.4.3 输出到 Kafka 5.4.4 输出到 MySQL(JDBC) 5.4.5 自定义 Sink 输出 5.5 本章总结 5.3.…

流式数据采集和计算(十):Flink的DataStream学习笔记

Flink的DataStream学习笔记.. 1 Flink 基础.. 3 Flink特性.. 3 Flink和Spark对比.. 3 设计思路.. 3 状态管理.. 3 Flink 初探.. 4 设计架构.. 4 Flink on yarn. 5 流程分析.. 6 DataStream. 7 API程序结构.. 7 DataSource 8 Transformation. 9 Sink. 13 Time 14…

DataStream API(基础篇) 完整使用 (第五章)

DataStream API基础篇 一、执行环境(Execution Environment)1、创建执行环境1. getExecutionEnvironment2. createLocalEnvironment3. createRemoteEnvironment 二、执行模式(Execution Mode)1. BATCH模式的配置方法(1)通过命令行…

DataStream API 四 之 Flink DataStream编程

DataStream API 四 之 Flink DataStream编程 1.分布式流处理基本模型2.流应用开发步骤3.数据类型4. Connector5. Execution environment6. 参数传递7.配置并⾏度8.Watermark9.Checkpoint10.State11. Data Source11.111.2 自定义Source 12.Transformations13.Window13.1窗⼝处理…

Flink的DataStream介绍

1|0一:流式处理基本概念 流处理系统本身有很多自己的特点。一般来说,由于需要支持无限数据集的处理,流处理系统一般采用一种数据驱动的处理方式。它会提前设置一些算子,然后等到数据到达后对数据进行处理。 为了表达复杂的逻辑&am…