JS 作用域和预解析

news2024/11/19 7:46:42

作用域

        通常来说,一段程序代码中所用到的名字并不总是有效和可用的,而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性,减少了名字冲突。

作用域分为全局作用域局部作用域

es6的时候新增了块级作用域{ }。

全局变量和局部变量

        根据作用域的不同,变量也可分为全局变量局部变量

        全局变量:在全局作用域下声明的变量,在全局都可以使用。

  • 在全局作用域下var声明的变量是全局变量
  • 如果在函数内部没有声明直接赋值的变量也属于全局变量(不建议使用)

        局部变量:在局部作用域下声明的变量(在函数内部定义的变量)只能在函数内部使用。

  • 在函数内部var声明的变量就是局部变量

二者区别

        全局变量:在任何一个地方都可以使用,只有在浏览器关闭时才会被销毁,因此比较占内存
        局部变量:只在函数内部使用,当其所在的代码块被执行时,会被初始化;当代码块运行结束后,就会被销毁,因此更节省内存空间。

作用域链

        内部函数访问外部函数的变量,采取的是链式查找的方式来决定取哪个值,这种结构我们称为作用域链 (就近原则)

下面这个代码,就近原则输出的是20。

预解析

js引擎分为两步:预解析 代码执行

(1)预解析  js引擎会把 js中所有的 var 还有function 提升到当前作用域的最前面

(2)代码执行  按照代码书写的顺序从上往下执行

预解析分为变量预解析(变量提升)函数预解析(函数提升)

变量预解析

变量提升 就是把所有的变量声明提升到当前的作用域最前面,不提升赋值操作。

console.log(num)  
var num=10;

//相当于执行了以下代码

var num;   //预解析,把变量声明提升上来
console.log(num);
num=10;  //赋值不提升

        上面这段代码预解析时会把变量声明提升到最前面,但不提升赋值操作,所以上面那个代码console.log(num)时num还没有被赋值,会输出undefined。

        注意函数表达式,是用一个变量存储函数的,预解析时只提升变量声明不提升变量赋值。所以函数表达式调用必须要写在函数表达式的下面,不然会出错。

// 函数表达式 调用必须要写在函数表达式的下面
fun();   //所以这里会输出undefined
var fun=function(){
	console.log(22);   
}

//相当于执行了以下代码
var fun; //提升了变量声明
fun();
fun=function(){  //变量赋值不提升
  console.log(22);
}

函数预解析

函数提升 就是会把函数声明提升到当前作用域最前面,不提升调用操作。

fn();
function fn(){
	console.log(22)
}

//预解析
//相当于执行下面的代码,所以不会报错
function fn(){   //函数声明
	console.log(22)
}
fn();   //函数调用

一道易错题:

f1();
console.log(c);
console.log(b);
console.log(a);
function f1(){
  var a=b=c=9;
  console.log(a);
  console.log(b);
  console.log(c);
}

// 预解析
//相当于以下代码
function f1(){  //把函数声明提升
  var a;  //变量提升
  a=9;b=9;c=9;
  console.log(a);
  console.log(b);
  console.log(c);
}
f1();  //调用f1()输出9 9 9
console.log(c);
console.log(b);
console.log(a);

//外面输出的是 9 9 undefined 

这道题易错点是:

        var a=b=c=9; 相当于var a=9;b=9;c=9;

        而不是集体声明,集体声明应该为 var a=9,b=9,c=9;

因为在函数内部没有声明直接赋值的变量也属于全局变量,所以b和c是全局变量。a是在函数内部声明的,所以a是局部变量。

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

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

相关文章

PHP反序列化总结4--原生类总结

原生类的简要介绍以及原生类和反序列化的关系 PHP 原生类指的是 PHP 内置的类,它们可以直接在 PHP 代码中使用且无需安装或导入任何库,相当于代码中的内置方法例如echo ,print等等可以直接调用,但是原生类就是可以就直接php中直接…

主键(设置/删除方法,复合主键),唯一键,主键和唯一键的应用差异,自增长字段(如何实现,查看上次的值),外键(引入,外键约束)

目录 主键(primary key) 介绍 作用 设置主键 建表前 建表后 复合主键 介绍 示例 删除主键 唯一键(unique) 介绍 意义 示例 建表 主键 唯一键 插入数据示例 主键和唯一键的应用差异 主键 唯一键 索引 auto_increment 介绍 示例 自动插入 手动插入 …

达梦数据实时同步软件DMHS介绍和原理

1、产品介绍 达梦数据实时同步软件(以下简称 DMHS)是支持异构环境的高性能、高可靠、高可扩展数据库实时同步复制系统。该产品采用基于日志的结构化数据复制技术,不依赖主机上源数据库的触发器或者规则,对主机源数据库系统几乎无影…

系列六、Spring Security中的认证 授权 角色继承

一、Spring Security中的认证 & 授权 & 角色继承 1.1、概述 关于Spring Security中的授权,请参考【系列一、认证 & 授权】,这里不再赘述。 1.2、资源类 /*** Author : 一叶浮萍归大海* Date: 2024/1/11 20:58* Description: 测试资源*/ Re…

案例120:基于微信小程序的校友林设计与实现

文末获取源码 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 开发软件:eclipse/myeclipse/idea Maven包:Maven3.5.4 小程序框架:uniapp 小程序开发软件:HBuilder X 小程序…

蓝桥杯省赛无忧 STL 课件18 总结

3226 宝藏排序 II 1624 小蓝吃糖果 2490 小蓝的括号串1 1531快递分拣

ubuntu 2022.04 安装vcs2018和verdi2018

主要参考网站朋友们的作业。 安装时参考: ubuntu18.04安装vcs、verdi2018_ubuntu安装vcs-CSDN博客https://blog.csdn.net/qq_24287711/article/details/130017583 编译时参考: 【ASIC】VCS报Error-[VCS_COM_UNE] Cannot find VCS compiler解决方法_e…

远程登陆利器 ssh

文章目录 远程登陆利器 ssh登陆远程服务器指定用户名多数情况的登陆方式查看服务器的时间指定端口更多信息 远程登陆利器 ssh ssh命令是openssh套件中的客户端连接工具,使用加密协议实现安全的远程登录服务器,实现对服务器的远程管理。 官方定义为&…

响应式编程初探-自定义实现Reactive Streams规范

最近在学响应式编程,这里先记录下,响应式编程的一些基础内容 1.名词解释 Reactive Streams、Reactor、WebFlux以及响应式编程之间存在密切的关系,它们共同构成了在Java生态系统中处理异步和响应式编程的一系列工具和框架。 Reactive Streams…

原生js实现拖拽效果

<!DOCTYPE html> <html> <head> <style> #mydiv { width: 200px; height: 200px; background-color: red; position: absolute; cursor: move; } </style> | </head> <body> <div id"mydiv">拖拽我…

苏州倍丰智能新型雾化粉末技术量产成功!金属3D打印全产业链更进一步

苏州倍丰智能深耕金属3D打印技术领域&#xff0c;以金属3D打印全产业链为目标&#xff0c;围绕金属3D打印设备&#xff0c;涵盖包括金属粉末前后处理设备、金属粉末原材料制备、先进工艺研发等多个领域&#xff0c;完成了一整条自上而下的金属3D打印全产业链。 近日&#xff0c…

java大数据hadoop2.9.2 Java编写Hadoop分析平均成绩

1、准备文件&#xff0c;例如score.txt&#xff0c;内容如下&#xff1a; zs k1 88 ls k1 98 ww k1 78 zs k2 88 ls k2 98 ww k2 78 zs k3 88 ls k3 98 ww k3 78 2、创建maven项目 <!-- https://mvnrepository.com/artifact/org.apache.hadoop/hadoop-common --><d…

哈希表与哈希算法(Python系列30)

在讲哈希表数据结构和哈希算法之前&#xff0c;我想先刨析一下数组和python中的列表 首先来讲一下数组&#xff0c;我想在这提出一个疑问&#xff1a; 为什么数组通过索引查询数据的时间复杂度为O(1)&#xff0c;也就是不管数组有多大&#xff0c;算法的执行时间都是不变的。…

《SPSS统计学基础与实证研究应用精解》视频讲解:SPSS 软件的安装要求、启动与关闭

《SPSS统计学基础与实证研究应用精解》1.6 视频讲解 视频为《SPSS统计学基础与实证研究应用精解》张甜 杨维忠著 清华大学出版社 一书的随书赠送视频讲解1.6节内容。本书已正式出版上市&#xff0c;当当、京东、淘宝等平台热销中&#xff0c;搜索书名即可。本书旨在手把手教会使…

【ROS2】使用C++实现简单的发布订阅方

1 构建自定义数据类型 1、自定义消息类型Student 1.1 创建base_interfaces_demo包 1.2 创建Student.msg文件 string name int32 age float64 height 1.2 在cmakeLists.txt中增加如下语句 #增加自定义消息类型的依赖 find_package(rosidl_default_generators REQUIRED) # 为…

操作系统复习篇

目录 一、引论 1.1、操作系统的目标 方便性&#xff1a; 有效性&#xff1a; 可扩充性&#xff1a; 开放性&#xff1a; 1.2、操作系统的作用 用户与计算机硬件系统之间的接口&#xff1a; 计算机系统资源的管理者&#xff1a; 实现对计算机资源的抽象&#xff1a; 1…

PDF结构详解

文章目录 介绍前言高保真的文件什么是PDF&#xff1f;PDF的一些优点版本摘要谁在使用PDF&#xff1f;有用的免费软件谁应该阅读 构建一个简单PDF文件基本PDF语法File StructureDocument ContentPage Content 构建简单PDF文件头目录&#xff0c;交叉引用表和文件尾主要对象图形内…

Github Copilot最全的安装与使用教程:一款非常好用的AI编程工具

Github Copilot最全的安装与使用教程 第一章 安装1.安装 GitHub Copilot2.获取资格第二章 使用1.产生建议1.1 键入你想要完成的操作的注释1.2 CtrlI 2. 接受建议3.查看下一个建议3.接受部分建议4.在新选项卡接受建议5.完成多项功能6.聊天 GitHub Copilot 供经过验证的学生、教师…

DAY7--learning english

一、积累 1.instinct Bro showed me his primal instinct 老兄给我展示他原始的本能&#xff08;返祖现象&#xff09;. 2. assembly Todays assembly is about part of journey. 今天的集会是讲述关于旅程的一部分。 3.aluminum Aluminum Casting Motocycle Engine Cover. …

java基础知识点系列——数据输入(五)

java基础知识点系列——数据输入&#xff08;五&#xff09; 数据输入概述 Scanner使用步骤 &#xff08;1&#xff09;导包 import java.util.Scanner&#xff08;2&#xff09;创建对象 Scanner sc new Scanner(System.in)&#xff08;3&#xff09;接收数据 int i sc…