之前不知道在哪看到的几个JS题目，感觉比较有趣，全是细节，没什么技巧。
之前的那个博主也写了他对题目的理解，我个人感觉还是一知半解，于是想按自己的理解再写一次。
感兴趣的朋友可以一起看一下，懂JS基础就可以看明白。
只抽了2个典型的例子，其他题目大同小异没啥特点
题目1
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="js" cid="n7" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">var x = 1;
function f(x, y = function () { x = 3; console.log(x); }) {
console.log(x) // 1
var x = 2
y() // 2
console.log(x) // 3
}
f()
console.log(x) // 4</pre>
各位先复制代码自己去分析推理一遍，预想一下答案是什么，然后执行一遍看看是否符合自己的猜想。
然后继续分析为何会是这个结果。如果还是不解，再来看我的想法，应该会比较更深入的了解。
各位先努力分析一波，待会我揭晓我的看法····
执行顺序
1.x是参数，未赋值，所以是undefine。
var x = 2，重新申明x变量，将参数的x覆盖了。
2.执行y函数,打印y函数里的x
3.打印x，y函数修改的x = 3，修改的是y函数最近作用域的x，也就是参数x，而这里打印的是 var x = 2;申明的x，所以是2
4.最后打印x,也就是最外层的x，因为f函数内修改的都是局部作用域的x，所以外层x异常是初始值
题目2
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="js" cid="n18" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">var x = 1;
function f(xx, y = function () { x = 3; console.log(x); }) {
console.log(x) // 1
var x = 2
y() // 2
console.log(x) // 3
}
f()
console.log(x) // 4</pre>
这题依然大家先不要执行，自行在脑子里分析执行结果。
这题考的其实就是var提升，就是一些小细节问题。
执行顺序
1.第一个x是undefined，原因是f函数内有一个x的变量申明了，他会在作用域内提升到最前边申明。
f函数内部真正执行的时候成了这样
<pre class="md-fences md-end-block ty-contain-cm modeLoaded" spellcheck="false" lang="js" cid="n24" mdtype="fences" style="box-sizing: border-box; overflow: visible; font-family: var(--monospace); font-size: 0.9em; display: block; break-inside: avoid; text-align: left; white-space: normal; background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment: inherit; background-origin: inherit; background-clip: inherit; background-color: rgb(248, 248, 248); position: relative !important; border: 1px solid rgb(231, 234, 237); border-radius: 3px; padding: 8px 4px 6px; margin-bottom: 15px; margin-top: 15px; width: inherit; color: rgb(51, 51, 51); font-style: normal; font-variant-ligatures: normal; font-variant-caps: normal; font-weight: 400; letter-spacing: normal; orphans: 2; text-indent: 0px; text-transform: none; widows: 2; word-spacing: 0px; -webkit-text-stroke-width: 0px; text-decoration-thickness: initial; text-decoration-style: initial; text-decoration-color: initial;">var x = 1;
function f(xx, y = function () { x = 3; console.log(x); }) {
var x;
console.log(x) // 1
x = 2
y() // 2
console.log(x) // 3
}
f()
console.log(x) // 4</pre>
2.y函数内打印3
3.因为就近作用域原则，y函数内的x当前作用域没有，向外层找，找到的是最外层的x，修改的也是最外层的，所以这里输出的还是2
4.因为y函数给他改成3了 所以输出3
结语
JS加密技术必须要有扎实的js基础功，才能更好的利用这些知识去保护别人的JS，防止代码被不良份子侵害。
如果你感觉文章很有用，请点赞收藏。
如果感觉文章有不对的地方非常欢迎指出一起探讨纠正。
如果有需要联系我，可以在jsjiami.com底部有我联系方式
网友评论