最后
由于篇幅限制,pdf文档的详解资料太全面,细节内容实在太多啦,所以只把部分知识点截图出来粗略的介绍,每个小节点里面都有更细化的内容!
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
然而,在if语句中,另一个 let count = 1 声明了一个局部变量 count,它覆盖了作用域外的 count。 所以第一个 console.log(count) 记录 1。
第二个 console.log(count) 打印 0,因为这里的 count 变量是从外部作用域访问的。
4.棘手的闭包
以下代码会在控制台打印什么?
for (var i = 0; i < 3; i++) {
setTimeout(function log() {
console.log(i); // 会打印什么?
}, 1000);
}
▼点击查看答案 3
, 3
,3
会被打印到控制台。
代码片段分 2 个阶段执行。
阶段1
for() 迭代 3 次。 在每次迭代期间,都会创建一个新函数 log(),该函数捕获变量 i。 setTimout() 安排 log() 在 1000 毫秒后执行。 当 for() 循环完成时,i 变量的值为 3。
阶段2
第二阶段发生在 1000 毫秒后:
setTimeout() 执行队列中的 log() 函数。 log() 读取变量 i 的当前值,即 3,并打印到控制台 3。 这就是为什么 3, 3, 3 被打印到控制台的原因。
附带挑战:如何修复此示例以在经过 1 秒后打印 0、1、2 值?
5.正确或错误的message
以下代码会在控制台打印什么?
function createIncrement() {
let count = 0;
function increment() {
count++;
}
let message = `Count is ${count}`;
function log() {
console.log(message);
}
return [increment, log];
}
const [increment, log] = createIncrement();
increment();
increment();
increment();
log(); // 会打印什么?
▼点击查看答案 ‘Count is 0’ 被打印到控制台。 increment() 函数已被调用 3 次,将 count 增加到值 3。
createIncrement()函数的作用域内的message变量。它的初始值是“‘Count is 0’”。 然而,即使count变量已经增加了几次,message变量也始终保持“‘Count is 0’”。
log() 函数是一个从 createIncrement() 范围捕获message
变量的闭包。 console.log(message) 将“Count is 0”打印到控制台。
附带挑战:如何修复 log() 函数以返回具有实际Count的message变量值?
6.恢复封装
function createStack() {
return {
items: [],
push(item) {
this.items.push(item);
},
pop() {
return this.items.pop();
}
};
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => [10]
stack.items = [10, 100, 1000]; // 破坏了封装!
堆栈按预期工作,但有一个小问题。任何人都可以直接修改 items 数组,因为stack.items
属性是公开的。
这是一个问题,因为它破坏了堆栈的封装:应该只有push()
和pop()
方法是公共的,stack.items
或者任何其他细节都不应该被外部访问。
使用闭包重构上面的堆栈实现,这样就无法在函数createStack()
作用域之外访问数组items
:
function createStack() {
// Write your code here...
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => undefined
▼点击查看答案
这是一个重构的createStack()
:
function createStack() {
const items = [];
return {
push(item) {
items.push(item);
},
pop() {
return items.pop();
}
};
}
const stack = createStack();
stack.push(10);
stack.push(5);
stack.pop(); // => 5
stack.items; // => undefined
items
已移至返回的对象之外。
由于此更改,从createStack()
作用域外部无法访问或修改items
数组。items
现在是私有变量,堆栈被封装:只有push()
和pop()
方法是公共的。
push()
和pop()
方法,作为闭包,从createStack()
函数作用域捕获变量items
。
7.智能乘法
编写一个multiply()
将 2 个数字相乘的函数:
function multiply(num1, num2) {
// Write your code here...
}
如果multiply(num1, numb2)
用 2 个参数调用,它应该返回 2 个参数的乘积。 但是如果用 1 个参数调用,该函数应该返回另一个函数const anotherFunc = multiply(num1)
。调用时返回的函数anotherFunc(num2)
执行乘法num1 * num2
。
multiply(4, 5); // => 20
multiply(3, 3); // => 9
const double = multiply(2);
double(5); // => 10
double(11); // => 22
▼点击查看答案
function multiply(number1, number2) {
if (number2 !== undefined) {
### 自学几个月前端,为什么感觉什么都没学到??
----------------------------------------------------------------------------------
这种现象在很多的初学者和自学前端的同学中是比较的常见的。
因为自学走的弯路是比较的多的,会踩很多的坑,学习的过程中是比较的迷茫的。
最重要的是,在学习的过程中,不知道每个部分该学哪些知识点,学到什么程度才算好,学了能做什么。
很多自学的朋友往往都是自己去找资料学习的,资料上有的或许就学到了,资料上没有的或许就没有学到。
这就会给人一个错误的信息就是,我把资料上的学完了,估计也-就差不多的了。
但是真的是这样的吗?非也,因为很多人找的资料就是很基础的。学完了也就是掌握一点基础的东西。分享给你一份前端分析路线,你可以参考。
**[开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://img-blog.csdnimg.cn/img_convert/15be8206a9f6e5bd9e8e930303b613ee.png)
还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。
所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。
大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**
![](https://img-blog.csdnimg.cn/img_convert/15be8206a9f6e5bd9e8e930303b613ee.png)
还有很多的同学在学习的过程中一味的追求学的速度,很快速的刷视频,写了后面忘了前面,最后什么都没有学到,什么都知道,但是什么都不懂,要具体说,也说不出个所以然。
所以学习编程一定要注重实践操作,练习敲代码的时间一定要多余看视频的时间。