小白必看的JavaScript作用域及声明提升详解秘籍!

JS作用域

1.js是弱类型动态语言

2.执行代码之前必须要进行一下编译

执行

1.变量的查找会从内到外的作用域中查找,不能从外到内

css 复制代码
var a = 1
function foo(){ 
var a = 2
console.log(a);
}
foo()

执行结果 a=2

全局作用域

是最大的作用域,在全局作用域中定义的变量可以在任何地方使用。 仅仅只需要将上面的console.log(a)放到最后面

css 复制代码
var a = 1
function foo(){ 
var a = 2
}
foo()
console.log(a);

那么他得到的就是全局的作用域

函数体作用域

是在全局作用域下产生的一个较小的作用域,在这个函数体作用域里面声明的变量,只能在这一块区域使用。

css 复制代码
var a = 1 
function foo () {
var b = 2
console.log(a)
console.log(b) 
} 
foo()

这是整段为全局作用域的代码 执行得到a = 1 ,b=2 全局变量a在任何一个地方都能使用,包括函数里面,所以能输出1,而在函数体里面定义的b,只能在函数体作用域里面被使用,如果console.log(b)在函数体之外,则无法输出b的值。

块级作用域

1.var 声明的变量存在声明提升,提升到当前作用域的顶端 2.函数声明会整体提升

css 复制代码
console.log(a);
var a = 1

代码从上而下执行,先打印a再声明a,结果肯定是报错,但错误提示不是未声明变量a(Cannot access 'a' before initialization),而是能找到变量a,但是a没有值(undefined)。 3.let+{}会形成块级作用域

块级作用域是指由 {} 包围的代码块,其中定义的变量仅在该代码块内部可见,并且在代码块外部不会被访问到。

ini 复制代码
以下是一个示例:
{
let x = 10;
console.log(x); // 输出 10
}
console.log(x); // 报错,x 不可访问

在上述示例中,花括号 {} 形成了一个块级作用域。在该作用域内部,使用 let 声明了变量 x 并赋值为 10。在作用域内部,我们可以访问并输出 x 的值。 但是,当我们尝试在作用域外部访问 x 时,会抛出一个错误,因为 x 只在块级作用域内部可见,超出作用域外部无法访问。 块级作用域对于控制变量的可见性和避免命名冲突非常有用。它可以帮助我们更好地组织和封装代码,并提供更好的代码健壮性和可维护性。

let

1.不会声明提升

ini 复制代码
console.log(a); 
let a = 1; 

//执行上面两行代码不会出现undefined而是显示a未声明 2.不能重复声明同一个变量 var可以重复声明变量,而let不能重复声明变量

ini 复制代码
var a = 1 
var a = 2 //可以重复声明同一变量 
let a = 1 
let a = 2 // 报错,不能重复声明变量

const

1.不会声明提升 2.不能重复声明同一个变量 3.声明的变量值不能被修改

ini 复制代码
let a = 1 
if (true) {
console.log(a); //暂时性死区
let a = 2
}

如果执行以上代码,会出现报错,错误提示为暂时性死区,未声明a,这是因为使用let和const命令声明变量之前,该变量都是不可用的。

欺骗词法作用域

1.eval()让原本不属于这里的代码变成就是写在这里的

css 复制代码
function foo(str){
eval(str)  //var b = 2
var a = 1
console.log(a,b);
}
foo('var b = 2')

执行后输出1,2,为什么呢?我们传进去的不是字符串吗? 这是因为eval()让原本不属于这里的代码变成就是写在这里的

2.with 当修改对象中不存在的属性时,该属性会泄漏到全局成为全局变量

scss 复制代码
function foo(obj){ 
with(obj){
 a=2
}
}
var o1 = {
a:3
}

foo(o1)
console.log(o1)

with() 将a = 2 泄漏到全局成为全局变量 如果我的文章对你有帮助给我点个赞吧

相关推荐
阿正的梦工坊13 小时前
JavaScript 微任务与宏任务完全指南
开发语言·javascript·ecmascript
2301_7990730217 小时前
基于 Next.js + 火山引擎 AI 的电商素材智能生成工具实战——字节跳动前端训练营成果
javascript·人工智能·火山引擎
kyriewen1119 小时前
项目做了一半想重写?这套前端架构让你少走3年弯路
前端·javascript·chrome·架构·ecmascript·html5
爱折腾的军哥21 小时前
首发 | OpenTaiji WFGY 防幻觉系统:让 AI Agent 不再"胡说八道"
javascript
颜酱21 小时前
从零实现「拍照记单词」小应用(可复刻版)
前端·javascript·人工智能
大猫会长21 小时前
AudioContext给音频提高音量
前端·javascript·音视频
WayneYang21 小时前
JavaScript ES6+ (ES2015~ES2024) 全特性整理
前端·javascript
JustNow_Man1 天前
Bun 常用命令速查清单(TypeScript 编译篇)
前端·javascript·typescript
|晴 天|1 天前
从零打造现代化个人博客:Vue 3 + TypeScript + Element Plus 完整实战
javascript·css·chrome·typescript·html5·webstorm
lion101 天前
简单Canvas指纹示例
javascript