带你论证JS基础的一段代码

简介: 在学习乏味难啃的理论基础知识时,我觉得应该创造自己的想象力,多去实践多去思考为什么会有这样的结果呢?

JS基础对于我们前端开发的重要性不言而知~于是,我们都会选择去阅读一些书籍来充实自己。那当我们读完那些理论基础之后,你是否依旧迷茫,还是豁然开朗?

透过现象看本质!

我想:有了理论基础作为根据的时候,应该多去思考一些代码的结果来实践这些理论。

就比如解决bug一样,你总得先知道出现bug的原因,再根据原因去解决问题是一样的道理。

code案例

var b = 10;

(function b(){

b = 20;

console.log(b);

})();

这段代码会输出什么呢?

(ps:先别着急回答,好好思考一下)

乍一看,这段代码很简单,涉及到的内容是var function IIFE,好像也没什么问题。

这段代码的在严格模式下输出:TypeError: Assignment to constant variable

意思就是:类型错误:对常量变量的赋值

而在非严格模式下输出:

输出分析

分析严格模式下的输出如果由这个TypeError: Assignment to constant variable.做一个分析的话,那么意味着变量b是不可修改的!

那么现在的问题在于变量b是指外部用var声明的变量b呢,还是立即执行的具名函数b呢?

如果b是立即执行的具名函数名称,说实话我也不大确定它是否是可修改。

(ps:大多数的js书籍中都没有明确指出立即执行函数表达式是否能重新赋值的问题)

但是我一定可以确定的是,如果b是指外部用var声明的,那么在此代码中它一定是可修改的。我们都知道用var声明的全局变量它在任何地方肯定是可以修改的,因为该变量处于作用域的最顶端。

所以在这里我想大胆做个假设:变量b是指立即执行的具名函数名称b~

做完这个假设,我想说:

那意味着全局变量b在立即执行的具名函数b里访问不到吗?

其实不是的,全局变量b在立即执行的具名函数b是可被访问的,只不过因为具名函数b的内部作用域里也存在了一个用function声明的变量b,所以在代码执行的时候js引擎首先找到用function声明的变量b。正如书籍中讲到的作用域查询是通过从里到外向上查询。

(ps:之前也顺手写了一篇关于作用域系列的文章:我是这样理解JavaScript中作用域,望能帮助大家~)

当然在非严格模式下,大家可以试着动手在立即执行的具名函数内部函数打印一下window.b,也可论证全局变量b在立即执行的具名函数b里可被访问!代码如下:

var b = 10;

(function b(){

b = 20;

console.log(window.b);

})();

到这里,理清楚了立即执行函数b的内部作用域机制,我的疑问又萌生了:

为什么(function b(){}())这样的函数表达式就不能修改呢?

后来,我查阅了资料,明白了IIFE函数的内部机制~

我所理解的是:

当遇到具名的函数表达式的时,会创建一个辅助的特定对象,将函数表达式的名称作为唯一的key,用来存储函数表达式的名称,然后添加到函数的作用域链中,该值只读,并且不可以被删除,所以不能对该值进行操作。

所以,在严格模式下,一个不可修改的常量被修改之后就会报TypeError: Assignment to constant variable。

分析非严格模式的输出 在非严格模式下会静默失败,所以不报错。针对如上的分析之后,会输出立即执行的具名函数b本身。

code扩展

我将代码改写成:

var b = 10;

(function b(){

return 1;

})();

console.log(b);

那这段又会输出什么呢?

无论在非严格模式还是在严格模式下,这段代码都会输出10,也就是全局变量b的值~

写这段代码的本意并不是为了猜测结果而想的,我想表达的是:为什么立即执行具名函数b在外部是不可访问的?难道所有的表达式在外部都不可访问吗?

为了解决我的疑问,我通过如下函数foo1和foo2进行分析:

///片段1

var foo1 = function () {};

console.log(foo1);

//片段2

(function foo2(){})

console.log(foo2);
//代码效果参考:http://www.zidongmutanji.com/zsjx/524647.html

片段1

是让一个匿名函数表达式赋值给变量foo1,然后该函数可以用foo1这个名称进行访问——foo1()。所以打印是一个函数。

片段2

是一个函数表达式,但结果是Uncaught ReferenceError: foo2 is not defined。说明在外部是不可访问的。

可见,立即执行具名函数b是一个函数表达式,在外部是不可访问的!(ps:意味着函数表达式既不可能通过名称在函数声明之前调用它,也不可能在声明之后调用它)。

其实,大多数书籍里介绍以及我之前所理解的片段1这样的代码就是一个函数表达式。但现在我的理解并不是这样的~

foo1是一个变量,匿名函数表达式赋值给变量foo1了,所以foo1它可被访问!

通过自己写了2个代码片段,将我的疑惑迎刃而解了~

思考其他案例

在闲暇之余,我将最原始的代码块再做了改造,运用这些代码来温故并且思考了之前学习的理论基础。

如下的代码片段,我将结果也一并和大家揭晓,但我也会和大家分享一下我的心得~

///片段1

var b = 10;

function b() {

console.log(12);

return 1;

}

console.log(b, b());

//10 TypeError: b is not a function

为什么会打印10呢,而不是函数b呢?

论据:函数声明优先于变量声明~

所以,相当于先利用function声明了函数b,再利用var重写了b。

//片段2

console.log(b, b()); //12 1

var b = 10;

function b() {

console.log(12);

return 1;

}

为什么会打印函数b的执行结果12和1呢,而不是全局变量b呢?

论据:函数声明优先于变量声明~并且在这个过程中存在变量提升。

片段3

var b = 10;

b = function() {

b = 20;

console.log(b); //20

return 1;

};

console.log(b, b()); //b函数,1

为什么会打印10呢,而不是函数b呢?

论据:这个过程就是将变量b进行重新赋值。

所以,打印的是10,而不是函数。

片段4

var b = 10;

// Duplicate declaration "b"

let b = function() {

b = 20;

console.log(b);

return 1;

};

论据:用var声明变量可以可重复声明,但是用let声明变量不可重复声明。

所以js引擎要执行完var b = 10语句之后,遇到了let b之前报错了。

总结

在写业务代码的时候,要尽量去避免声明变量命名冲突的情况,因为以上案例的的写法是不合理的,很容易出现意想不到的结果。

为何不规范要求自己而避开不必要的麻烦呢?

当然,我觉得在学习乏味难啃的理论基础知识时,我觉得应该创造自己的想象力,多去实践多去思考为什么会有这样的结果呢?

根据理论证实结果!

相关文章
|
13天前
|
JavaScript 前端开发 安全
【逆向】Python 调用 JS 代码实战:使用 pyexecjs 与 Node.js 无缝衔接
本文介绍了如何使用 Python 的轻量级库 `pyexecjs` 调用 JavaScript 代码,并结合 Node.js 实现完整的执行流程。内容涵盖环境搭建、基本使用、常见问题解决方案及爬虫逆向分析中的实战技巧,帮助开发者在 Python 中高效处理 JS 逻辑。
|
3月前
|
JavaScript 前端开发 算法
流量分发代码实战|学会用JS控制用户访问路径
流量分发工具(Traffic Distributor),又称跳转器或负载均衡器,可通过JavaScript按预设规则将用户随机引导至不同网站,适用于SEO优化、广告投放、A/B测试等场景。本文分享一段不到百行的JS代码,实现智能、隐蔽的流量控制,并附完整示例与算法解析。
91 1
|
4月前
|
JavaScript 前端开发
怀孕b超单子在线制作,p图一键生成怀孕,JS代码装逼娱乐
模拟B超单的视觉效果,包含随机生成的胎儿图像、医疗文本信息和医院标志。请注意这仅用于前端开发学习
|
4月前
|
JavaScript
JS代码的一些常用优化写法
JS代码的一些常用优化写法
72 0
|
6月前
|
存储 JavaScript 前端开发
在NodeJS中使用npm包进行JS代码的混淆加密
总的来说,使用“javascript-obfuscator”包可以帮助我们在Node.js中轻松地混淆JavaScript代码。通过合理的配置,我们可以使混淆后的代码更难以理解,从而提高代码的保密性。
451 9
|
7月前
|
前端开发 JavaScript
【Javascript系列】Terser除了压缩代码之外,还有优化代码的功能
Terser 是一款广泛应用于前端开发的 JavaScript 解析器和压缩工具,常被视为 Uglify-es 的替代品。它不仅能高效压缩代码体积,还能优化代码逻辑,提升可靠性。例如,在调试中发现,Terser 压缩后的代码对删除功能确认框逻辑进行了优化。常用参数包括 `compress`(启用压缩)、`mangle`(变量名混淆)和 `output`(输出配置)。更多高级用法可参考官方文档。
469 11
|
9月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
341 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
7月前
|
JavaScript 前端开发 算法
JavaScript 中通过Array.sort() 实现多字段排序、排序稳定性、随机排序洗牌算法、优化排序性能,JS中排序算法的使用详解(附实际应用代码)
Array.sort() 是一个功能强大的方法,通过自定义的比较函数,可以处理各种复杂的排序逻辑。无论是简单的数字排序,还是多字段、嵌套对象、分组排序等高级应用,Array.sort() 都能胜任。同时,通过性能优化技巧(如映射排序)和结合其他数组方法(如 reduce),Array.sort() 可以用来实现高效的数据处理逻辑。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
7月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
9月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
199 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子