一、作用域
1、局部作用域
（1）函数作用域
（2）块作用域
let和const会产生块作用域 ，而var不会产生块作用域
2、全局作用域
script标签和js文件的【最外层】变量
3、作用域链
本质：底层的变量查找机制
4、JS垃圾回收机制（GC）
（1）内存的生命周期
- 内存分配
- 内存使用
- 内存回收
（2）算法说明
- 引用计数法：嵌套循环容易使内存泄漏
- 标记清除法：从全局出发，找不到就回收
5、闭包
闭包=内存函数+外层函数的变量
作用：外部访问局部变量、局部函数
function outer(){ let i=1 return function(){ console.log(i) } } const fun = outer() fun()应用：实现数据的私有，外部无法直接修改变量
注：容易引起内存泄漏
6、变量提升
JS的缺陷（使用var的时候）：代码执行前会将所有的var声明的变量提升到当前作用域的最前面，只提升变量声明，不提升变量声明——不建议
二、函数进阶
1、函数提升
2、函数参数
（1）动态参数（不推荐）
数组arguments：不管拿多少变量，都能获取到。
方法：不用形参，函数内部直接使用arguments
缺点：伪数组
（2）剩余参数（推荐）
arr获取的是多余的实参，是真数组，可以使用数组方法
function getSum(a,b,...arr)...arr是展开数组
3、箭头参数
（1）特点
替代匿名函数
属于表达式函数，不存在函数提升
（2）基本语法
//基本写法 const fn = () =>{ } //只有一个形参的时候可以省略小括号 const fn= x => { } //只有一个形参的时候可以省略大括号 const fn= x => console.log(x) //只有一行代码可以省略return const fn= x => return x+x const fn= x => x+x //箭头函数可以直接返回一个对象 const fn= (unname) => ({uname:uname})（3）箭头函数参数
普通函数有arguments，箭头函数没有
（4）箭头函数this
this指的是对象
箭头函数的this指向上一层作用域的this
三、解构赋值
1、数组解构
将数组单元值快速批量赋值给变量的简洁语法
const arr = [100,60,80] const [max,min,avg ] =arr 等同于 //const max=arr[0] //const min=arr[1] //const avg=arr[2]典型应用：交换两个变量的值
let a=1 let b=2 ;[b,a]=[a,b] //这里必须加分号补充：必须加；的情况
- 立即执行函数
(function(){})();
- 数组的时候:数组开头的
const str='pink'; [1,2,3].map(function(item)){}2、对象解构
将对象属性和方法快速批量赋值给变量的简洁语法
（1）基本
const[{uname,age}]=obj（2）多级对象
复合对象需要在前面加一个名字
const pig={ name:'佩奇' family:{ mother:'猪妈妈' father:'猪爸爸' sister:'乔治' } age：6 } const [{name,family:{mother,father,sister}}]=pig
四、数组forEach遍历和filter筛选
1、forEach语法
（1）语法
const arr=['red','green','blue'] arr.forEach(function(item,index){ console.log(item) console.log(index) })（2）作用
主要遍历数组——加强版for循环
和map（返回数组）的区别，不返回值
2、filter方法
（1）语法
const arr=[10,20,30] arr.filter(funtion(item,index){ return item>=20 })（2）特点
用于筛选数组
函数返回生成一个新数组
五、深入对象
1、创建对象三种方式
（1）通过字面量
const o={ name:'佩奇' }（2）利用new Object创建对象
const o=new Object({name:'佩奇'}) console.log(o)（3）利用构造函数创建对象
2、构造函数
（1）是什么
特殊函数，用于初始化对象
（2）语法
function pig(name){ this.name=name } const peppa=new Pig('佩奇') //实例化3、实例成员&静态成员
（1）实例成员
构造函数创建的对象叫实例对象，实例对象的属性和方法为实例成员
（2）静态成员
构造函数的属性和方法被称为静态成员
- 静态成员只能构造函数来访问
- 静态方法中的this指向构造函数
4、内置构造函数
（1）Object
- Object.keys(o)
- Object.values(o)
- Object.assign(新对象，原对象)
const o={name:'佩奇',age:6} Object.keys(o) //返回数组['uname','age'] Object.values(o) //返回数组['佩奇','6']（2）Array
- forEach
- filter
- map
- join
- reduce 返回累计处理结果，经常用于求和
arr.reduce(function(上一次值,当前值){}，初始值)如果需要累加的是对象数组，初始值必须写0
- find
找出符合的对象
const arr=[ {name:'小米',price:1999}, {name:'华为',price:3999} ] const mi=arr.find(function(item)){ return item.name==='华为' } //返回{name:'小米',price:1999}
- every
- some
- from
把伪数组转换成真数组，可使用pop、push等
- ...
（3）String
- length
- split('分隔符') 分割字符串
- substring(需要截取的第一个字符的索引[,结束的索引号]) 窃取字符串
- startwith(检测字符串[,检测位置索引号]) 从索引值搜索是否以目标字符串开头
- endwith(检测字符串[,检测位置索引号]) 从索引值搜索是否以目标字符串结束
- includes(搜索的字符串[,检测位置索引号]) 判断是否包含
- ...
（4）Number
- toFixed(保留位数) 让数字指定保留的位数，默认整数
六、深入面向对象
1、编程思想
- 面向过程：面向函数
- 面向对象
- 封装性
- 继承性
- 多态性
2、构造函数
优点好用，缺点浪费内存——e.g一个对象相同方法但是不等
this指向实例化对象
3、原型对象prototype
能够利用原型对象实现方法共享——原型对象的函数和构造函数都指向实例化对象（this）
公共属性写在构造函数里
公共方法写在原型对象里
function Star(uname,age){ this.uname=uname this.age=age } Star.prototype.sing=function(){}4、 constructor属性
指向原型对象的构造函数
prototype和__proto__均有
5、对象原型_proto_
对象都有一个属性_proto_指向构造函数的prototype原型对象
- JS非标准属性
- [[prototype]]和__proto__意义相同
function Star(){} const ldh =new Star() console.log(ldh.__proto__ === Star.prototype) //true
6、原型继承
const person={ eyes:2, head:1 } function Woman(){ } Woman.prototype=person Woman.prototype.constructor=Woman缺点：继承同一个person，新加方法会有问题
=>用构造函数的写法
7、原型链
基于原型对象的继承使得不同构造函数的原型对象关联在一起
什么是原型链？——一种查找规则：为对象成员查找机制提供一个方向
8、instanceof
作用：判断对象属不属于原型链上
const ldh=new person() console.log(ldh instanceof person) //true console.log(ldh instanceof Object) //true
七、 模态框封装（案例）
1、modalBox 模态框属性
2、（打开模态框）设置open挂载点，页面显示模态框是在open里面
3、（关闭模态框）在open中添加关闭的绑定事件close
注：BUG-会打开多个——先判断，有就移除，没有就添加
box&&box.remove() //逻辑中断，有box则后面不执行，无则执行box.remove()
八、深浅拷贝
1、深浅拷贝（只针对引用类型）
（1）浅拷贝——简单数据类型拷贝值，引用数据类型拷贝地址
- 拷贝对象：Object.assign(新对象，旧对象) | 展开对象{...obj}
- 缺点：复杂对象拷贝会出现问题
- 拷贝数组 ：Array.prototype.concat() | 展开数组[...arr]
（2）深拷贝——拷贝的是对象不是地址
- 方法1：通过递归（=自己调自己）实现深拷贝
//递归函数 function getTime(){ document.querySelector('div').innerHTML= new Date().toLocalString() setTimeout(getTime,1000) } getTime()//深拷贝的方法——做到新对象不会影像旧对象 //1、运用函数递归的方法 //2、如果是普通的，则直接赋值；遇到数组，需要再次调用递归函数。遇到对象，同样再次调用递归函数。 //3、先Array后对象 function deepCopy(newObj,oldObj){ for (let k in oldObj){ if (oldObj[k] instanceof Array){ newObj[k]=[] deepCopy(newObj[k],oldObj[k]) } else if(oldObj[k] instanceof Object){ newObj[k]={} deepCopy(newObj[k],oldObj[k]) } else{ newObj[k]=oldObj[k] } } }
- 方法2：利用lodash
//1、引用lodash.min.js <script src="./lodash.min.js"></script> //2、用_cloneDeep(拷贝对象)方法进行深拷贝 <script> const obj={ uname:'pink', age:18, hobby:['乒乓球','足球'], family:{ baby:'小pink' } } const o =_.cloneDeep(obj) </script>
- 方法3：利用JSON
//利用JSON.stringify()把JSON转换为字符串 //JSON.parse可以将字符串转换为对象 //因为通过对象转换成字符串再转为对象，和原来的对象已经不一样了，修改新对象不会被影响 const o=JSON.parse(JSON.stringify(obj))
九、 异常处理
1、throw 抛异常
//会自动抛出异常并中断程序 //经常配合Error使用 function counter(x,y){ if(!x || !y){ throw new Error("没有参数传递过来") } return x+y } counter()2、try/catch/finally 捕获异常
//可能发生错误的代码，要写到try //拦截错误，提示浏览器提供的错误信息，但不中断程序的执行 function fn(){ try{ const p=document.querSelector('.p') p.style.color='red' } catch(err){ console.log(err.message) throw new Error("你看看，选择器错误了吧") } finally { //finally 不管你程序对不对，一定会执行的代码 alert("执行") } }3、debugger
打断点——可以直接跳转到改行代码调试
十、处理this
1、this指向
（1）普通函数的指向：谁调用指向谁
//1、指向window （1） console.log(this) //指向window （2） function fn (){ console.log(this) } //指向window （3） setInterval(function(){ console.log(this) },1000) //指向window （4） <button>点击</button> document.querySelector('button').addEventLisener('click',function(){ console.log(this) }) //指向window //2、指向对象 const obj={ sayHI:function(){ console.log(this) } } obj.sayHI() //指向obj（2）箭头函数的指向
与普通函数不同，箭头函数this不受调用方式的影响
箭头函数不存在this，沿用的是上一级的
- 不适用：构造函数，原型函数，dom事件函数等等
//箭头函数中断this为函数声明函数的this一致 const user={ name:'小明' walk:()=>{ console.log(this) } } user.walk() //指向window!!!注：原型对象最好不 要用箭头函数，否则this不指向实例对象
2、改变this
（1）call() - 了解
调用函数，同事只当被调用函数的this的值
fn.call(thisArg,arg1,arg2,...)
const obj={ uname:'pink' } function fn (x,y){ console.log(this)//指向window console.log(x+y) } fn.call() //单纯调用fn，指向window fn.call(obj,1,2) //调用fn，改变this，指向obj（2）apply() -理解
fn.call(thisArg,[argsArray]) 第二个参数必须是数组
const obj={ uname:'pink' } function fn (x,y){ console.log(this)//指向window console.log(x+y) } fn.call(obj,[1,2])//指向obj，打印3使用场景：求数组的最大值
1、用数组遍历
2、扩展运算符
Math.max(...[arr])3、用apply方法
Math.max/min.apply(Math/null,数组名)
//传统写法 const max = Math.max(1,2,3) console.log(max) //数组求最大值 const arr=[1,2,3] const max = Math.max.apply(Math,arr) const min = Math.min.apply(null,arr)（3）bind()
call()、apply() 会调用函数，但bind()不会调用函数
会改变函数内部this指向
返回值是一个函数，这个函数的this是更改的obj
const obj={ age:18 } function fn(){ console.log(this) } const fun=fn.bind(obj) fun() //打印obj对象应用：有一个按钮，点击立马禁用，2s后开启
<button>按钮</button> const btn=document.querySelector('.button') btn.addEventListener('click',function(){ this.disabled=true window.setTimeout(function(){ // this.disabled=false //无法打开按钮 //btn.disabled=false //可以打开按钮 },2000) //或者 window.setTimeout(function(){ // this.disabled=false //无法打开按钮 //btn.disabled=false //可以打开按钮 }.bind(btn),2000) //或者 window.setTimeout(function(){ // this.disabled=false //无法打开按钮 //btn.disabled=false //可以打开按钮 }.bind(this),2000) //上一层的this指向btn //或者 window.setTimeout(=>{ this.disabled=false //可以打开按钮，箭头函数没有this，沿用上一层的this },2000) //上一层的this指向btn })（4）改变this的三种方法及区别（面试常考）
十一、性能优化
1、防抖 debounce
（1）特点
- 单位时间内，频繁触发事件，只执行最后一次
- 王者回城，只要被打断，就需要重新来
（2）语法：_.debounce(fun,时间)
（3）使用场景
- 搜索框搜索输入，只需要用户最后一次输入完，再发送请求
- 手机号、邮箱验证输入检测
（4）案例
要求：鼠标在盒子上移动，里面的数字就会变化+1
const box=document.querySelector('.box') let i=1 function mousemove(){ box.innerHTML=i++ } box.addEventListener('mousemove',mousemove) //数字变化很快（改造：不是移动1像素就+1）
方法1、lodash提供的防抖函数 _.debounce(func,[wait=0],[option=])<script src="./lodash.min.js"></script> const box=document.querySelector('.box') let i=1 function mousemove(){ box.innerHTML=i++ } box.addEventListener('mousemove',_.debounce(mousemove,500))方法2、手写一个防抖函数来处理（面试常考）
//核心：利用setTimeout进行实现 //1、声明定时器变量 //2、每次鼠标移动（事件触发）就判断是否有定时器，如果有就先清除定时器 //3、没有就开启定时器，存入到定时器变量里面 //4、定时器里面写函数调用 const box=document.querySelector('.box') let i=1 function mousemove(){ box.innerHTML=i++ } function(fn,t){ let timer //这里用return是因为要反复调用该函数 return function(){ if(timer) clearTimeout(timer) timer=setTimeout(function{ fn() },t) } } box.addEventListener('mousemove',_.debounce(mousemove,500))2、节流
（1）特点
- 单位时间内，频繁触发事件，只执行一次
- 王者荣耀技能冷却，期间无法继续释放技能
（2）语法：_.throttle(fun,时间)
（3）使用场景
高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等
（4）案例
要求：鼠标再盒子上移动，不管移动多少次，每隔500ms才+1
方法1：使用lodash库实现节流，500ms之后采取+1
<script src="./lodash.min.js"></script> const box=document.querySelector('.box') let i=1 function mousemove(){ box.innerHTML=i++ } box.addEventListener('mousemove',_.throttle(mousemove,500))方法2：手写节流函数
//核心：利用setTimeout进行实现 //1、声明定时器变量 //2、每次鼠标移动（事件触发）就判断是否有定时器，如果有就先清除定时器 //3、没有就开启定时器，存入到定时器变量里面 //4、定时器里面写函数调用 const box=document.querySelector('.box') let i=1 function mousemove(){ box.innerHTML=i++ } function(fn,t){ let timer //这里用return是因为要反复调用该函数 return function(){ if(!timer) { timer = setTimeout(function(){ fn() timer=null //在setTimeout函数中不能用clearTimeout(timer)，因为定时器在运行 },t) } } box.addEventListener('mousemove',_.debounce(mousemove,500))
1272
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
