实习日记 2021/12/20
今天是实习的第一天，主要任务是熟悉企业项目框架。
（1）一个项目拿到手，首先要看package.json文件，这个文件里面包含了该项目的各种配置信息和需要的依赖包。项目运行的命令npm run dev,这个dev属于自定义命名，我们在配置文件，“script”下面可以自定义。如果自定义为serve,运行命令即：npm run serve。今天从这个配置文件里面，我了解到公司项目常用的一些框架和组件有vuex,echarts, ant-design-vue,axios,core-js,moment,vue,vue-router,vuex等。
（2）为了搞清楚防抖和节流函数，我重新去理解了闭包。首先要理解闭包的含义：
①函数嵌套函数
②函数内部可以引用函数外部的参数和变量
③参数和变量不会被垃圾回收机制回收
而在理解闭包之前，我们还得再理解一下作用域：
js的作用域分为两种，全局作用域和局部作用域。在js作用域环境下访问变量的权利是从内到外的，内部可以访问当前变量，并且可以访问包含当前变量的外部变量，而外部却不能访问到内部的变量，以及不同函数之间的也是不能互相访问的。而闭包正可以解决这一问题，它实现了外部也能获取到内部的变量，也就是外部作用域访问到局部作用域。
这里可以举几个例子：
第一个：
function a(){
var name = dov;
return function(){
return name//dove返回给function,再返回给a()
}
}
var b = a()//变量b接收a()返回的值
console.log(b())//dov
第二个：
function fn(){
var num = 3;
return function(){//第一次返回n=1,num=4给fn
var n = 0;//n每次调用这个里面的函数才开始初始化，所以每次都是0
console.log(++n);//先加再用 n=1 ,n=1
console.log(++num)//num=3+1=4 ；num是在这个函数外定义的不会被销毁，所以第2次num=4+1=5
} }
var fn1=fn()
fn1()//1,4
fn1()//1,5
第三个：定时器与闭包
for(var i=0;i<5;++i){
setTimeout(function（）{
console.log(i+)
},100)//5,5,5,5,5
}
因为Js是单线程的，所以在执行for循环的时候，定时器被安排到任务队列中排队等待执行，而在等待过程中for循环就已经在执行，等到定时器可以执行的时候，for循环已经结束，i的值也已经变成5。要解决这个问题，实现输出为1-5，我们有几种解决方法，除去es6语法中将var换成let,我们最重要的是可以引入闭包来解决这个问题！如下：
1.引入闭包保存变量
for(var i = 0;i<5;++i){
(function(i){
setTimeout(function(){
console.log(i+)
},100)
}(i));//这个函数写法见过？
}
2.闭包作为参数传递!
var num=15
var fn1=funcion(x){//这里x=30时，对于fn1来说num是全局变量15
if(x>num){//30>15
console.log(x)//30
}
}
void function(fn2){
var num=100
fn2(30)//执行fn2(30),即30作为fn1的参数x传入。
}(fn1)//fn1作为参数传入立即执行函数中
补充：for循环是同步执行，定时器是异步执行与上述观点不矛盾吗？
二.防抖和节流
这个是项目应用到的防抖函数：
1.function debounce里有(...args)回调函数
2.回调函数里面的timer可以引用外层函数debounce里面定义的timer
3.外层定义的变量有值后不会被销毁，在内层继续被引用
function debounce(func, wait){
//防抖函数
let timer = null;
return(...args)=> {
if(timer)clearTimeout(timer);//初始默认timer是Null,所以这里是if(time）就是==false也就是null，不执行清除定时器
timer = setTimeout(()=> {
//func.apply(this, args);
}, wait);//2s内执行：假设第一次执行得到timer的值，没有被销毁，给到外部if(time)去判断,判断是有值的，就执行清除定时器，让它不再继续执行
};
}
解析：比如说：wait的时间传入是2s,防抖函数的作用就是让函数内方法2s内只执行一次。
点击咨询