本季度主要是针对JavaScript基础学习。学习的资料以《JavaScript核心技术开发解密》一书为主，期间还穿插一些不太明白的地方，就借助了谷歌和百度上的一些资料进行完善了下，总而言之就是自学为主。自学呢有好处也有坏处。好处就是能培养自己独立自主接收新知识的能力，缺点就是遇到一些自己不太明确的地方容易形成误解。所以还是要多查查资料和组内多交流。
以下为主要学习心得；
由于前面几章觉得说得超级简单。就比如说变量对象吧
console.log(a) // 输出undefined
var a = 1;
这样来写其实作为写OC出道的移动开发者觉得有点不可思议，就觉得肯定会报错呀，上来就输出个a，a是谁呀？但是在JavaScript世界里这个写法却是没毛病的，并且var a = 1; 还会使a变量提升。其实还是有点小诧异的，但这就是JavaScript，一个小缩影。不过后来使用ES6后就会觉得得心应手，像let/const是不允许变量提升的，所以在ES6中如果在未定义变量之前使用变量是会报ReferenceError错误的，阮一峰ES6入门文档中称之为“暂时性死区”。
相关文档：http://es6.ruanyifeng.com/?search=import&x=0&y=0#docs/let
这本书里反复看得最多的就是闭包，但是有时候理解状态还是欠佳。
一、关于闭包
什么叫闭包？
闭包由两部分组成，执行上下文（代号A），以及在该执行上下文中创建的函数（代号B）。当B执行时，如果访问了A中变量对象中的值，闭包就会产生。闭包主要涉及到js的几个特性:作用域链,垃圾(内存)回收机制,函数嵌套。
闭包特性？
1.函数内再嵌套函数
2.内部函数可以引用外层的参数和变量
3.参数和变量不会被垃圾回收机制回收
闭包示例？
function test1 () {
var a = 1;
var b = 2;
function test2 () {
console.log(a+b)
}
test2();
}
test1();
断点调试可以明显在source下看到closure有a、b两个属性
闭包应用？
for(var i = 1; i <= 5; i++){//事件循环机制 js单线程
setTimeout(function () {// 宏任务
console.log(i)
},i*1000)
}//结果是输出5次6 该示例是没有应用闭包的结果
微调一下，看一下代码变化
for(var i = 1; i <= 5; i++){
(function(){
**var **j = i;
setTimeout(**function **() {
console.log(j)
},i*1000)
})()
}
新增了自执行函数，形成自己单独作用域，这时候就可以实现每个一秒输出1、2、3、4、5
其实这只是一道常规的关于闭包的面试题，考察对于闭包的简单理解。
然后就是闭包与模块化，比较常用，示例如下：
function coolModule() {
var*something = 'cool';
var another = [1,2,3];
function doSomething() {
console.log(something)
}
function doAnother() {
console.log(another.join('!'))
}
return{//将该返回对象 本质上看作模块的公共API
doSomething:doSomething,
doAnother:doAnother
}
}
var foo = coolModule();
foo.doSomething();//此处调用 coolModule内部作用域和闭包都创建了
foo.doAnother();// 对内部函数引用 而不是内部变量 保持内部变量私有
注意事项？
由于闭包会使得函数中的变量都被保存在内存中，内存消耗很大，所以不能滥用闭包，否则会造成网页的性能问题，在IE中可能导致内存泄露。解决方法是，在退出函数之前，将不使用的局部变量置为null
二、防抖与节流
其实这本书里面是没有说过这个知识点，我实在网易公开课里看到的，一名很污的9号技师。但是听了之后效果确实很妙，久久不能忘怀。想了解就自己去看吧，哈哈。
说到防抖与节流，说是什么技术点，我的理解倒是像个简单算法，不难但是用处却很多。
什么叫防抖（debounce）？
当持续触发事件时，一定时间段内没有再触发事件，事件处理函数才会执行一次，如果设定的时间到来之前，又一次触发了时间，就重新开始延时。
什么叫节流（throttle）？
当持续触发事件时，保证一定时间段内只调用一次事件处理函数(间隔时间执行)
实现防抖与节流的意义？
答：减少不必要的计算，不浪费资源，只在适合的时间再进行触发计算。（这是9号技师原话，一字不落）
应用场景？
防抖：1.search搜索联想，用户在不断输入值时，用防抖来节约请求资源；
2.window触发resize的时候，会不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发一 次；
3.防止重复提交；
节流：1.鼠标不断点击触发，控制单位时间内只触发一次；
2.监听滚动事件，比如是否滑到底部自动加载更多，可用节流来判断；
代码示例如下：
document.getElementById("fd").addEventListener('click',function () {
debounce(print,2000,true)//true 标识一调用就执行
})//防抖点击事件
document.getElementById("jl").addEventListener('click',function () {
throttle(print,2000)
})//节流点击事件
function print() {
console.log(111)
}
var timeout;
function debounce(fun,wait,flag){//防抖函数
var that = this;
clearTimeout(timeout);
if(flag){
let callNow = !timeout;
timeout = setTimeout(function () {
timeout = null
},wait);
if(callNow){
fun.apply(that)
}
}else {
timeout = setTimeout(function () {
fun.apply(that)
},wait)
}
}
var prexious = 0;//标记
function throttle(func,wait) {//节流函数
var self = this;
var now = +new Date();//获取1970年到现在的毫秒数 类似getTime()
// console.log(now)
if(now - prexious > wait){
func.apply(self)
prexious = now
}
}
后期还会有更多内容的，敬请期待吧~
网友评论