一.异常处理
预估代码执行过程中可能发生的错误，然后最大程度的避免错误的发生导致整个程序无法继续运行
1.throw抛异常
javascript
<body>
<script>
function fn(x,y){
if(!x || !y){
throw new Error('请输入参数')
}
return x+y
}
console.log(fn());
</script>
</body>
1.throw抛出异常信息，程序也会终止执行
2.throw后面跟的是错误提示信息
3.Error对象配合throw使用，能够设置更详细的错误信息
2.try/catch捕获异常
通过try/catch捕获错误信息(浏览器提供的错误信息) try试试 catch拦住 finally最后
正常状态下：
javascript
<body>
<p>哈哈哈</p>
<script>
function fn(){
try{
document.querySelector('p').style.color = 'red'
}catch(err){
// 拦截错误，但不中断程序执行
console.log(err.message);
}finally{
console.log('不管程序对不对，一定会执行的代码');
}
}
fn()
</script>
</body>
异常状态下的代码：
javascript
<body>
<p>哈哈哈</p>
<script>
function fn(){
try{
document.querySelector('.p').style.color = 'red'
}catch(err){
// 拦截错误，但不中断程序执行
console.log(err.message);
}finally{
console.log('不管程序对不对，一定会执行的代码');
}
}
fn()
</script>
</body>
1.try...catch用于捕获错误信息
2.将预估可能发生错误的代码写在try代码段中
3.如果try代码段中出现错误后，会执行catch代码段，并截获到错误信息
4.finally不管是否有错误，都会执行
3.debugger
用于代码调试
二.call方法改变this指向
使用call方法调用函数，同时指定被调用函数中this的值
语法：
javascript
fun.call(thisArg, arg1, arg2, ...)thisArg：在fun函数运行时指定的this值
arg1，arg2：传递的其他参数
返回值就是函数的返回值，因为它就是调用函数
javascript
<body>
<script>
const obj = {
name:'张三',
age:18
}
function fn(a,b){
console.log(this);
console.log(a + b);
}
fn.call(obj,1,2)
</script>
</body>
三.apply方法
使用apply方法调用函数，同时指定被调用函数中this的值
语法：
javascript
fun.apply(thisArg, [argsArray])thisArg：在fun函数运行时指定的this值
argsArray：传递的值，必须包含在数组里面
返回值就是函数的返回值，因为它就是调用函数
因此apply主要跟数组有关系，比如使用Math.max()求数组的最大值
javascript
<body>
<script>
const obj = {
name:'张三',
age:18
}
function fn(a,b){
console.log(this);
console.log(a + b);
}
// fn.apply(this指向谁，数组操作)
fn.apply(obj,[1,2])
</script>
</body>
利用apply求数组最大值和最小值：
javascript
<body>
<script>
const arr = [39,12,67]
// const max = Math.max.apply(null,arr) 也可以
const max = Math.max.apply(Math,arr)
const min = Math.min.apply(Math,arr)
console.log(max,min);
</script>
</body>
四.bind方法
bind()方法不会调用函数，但是能改变函数内部this指向
语法：
javascript
fun.bind(thisArg, arg1, arg2,...)thisArg：在fun函数运行时指定的this值
arg1，arg2：传递的其他参数
返回由指定的this值和初始化参数改造的原函数拷贝(新函数)，返回值是一个函数
当我们只是想改变this指向，并且不想调用这个函数的时候，可以使用bind，比如改变定时器内部
的this指向
javascript
<body>
<script>
const obj = {
name:'张三',
age:18
}
function fn(){
console.log(this);
}
const fn2 = fn.bind(obj)
fn2()
</script>
</body>
javascript
<body>
<button>点击</button>
<script>
// 点击按钮变成禁用，点击后2秒后重新启用
const btn = document.querySelector('button')
btn.addEventListener('click',function(){
this.disabled = true
window.setTimeout(function() {
this.disabled = false
}.bind(btn), 2000);
})
</script>
</body>call apply bind 总结
相同点：
都可以改变函数内部的this指向
区别点：
call和apply会调用函数，并且改变函数内部this指向
call和apply传递的参数不一样, call传递参数aru1,aru2..形式 apply必须数组形式arg
bind不会调用函数，可以改变函数内部this指向
主要应用场景:
call调用函数并且可以传递参数
apply经常跟数组有关系.比如借助于数学对象实现数组最大值最小值
bind不调用函数,但是还想改变this指向.比如改变定时器内部的this指向
五.防抖
单位时间内，频繁触发事件，只执行最后一次
使用场景：
搜索框搜索输入，只需用户最后一次输入完，再发送请求
手机号、邮箱验证输入检测
实现方式:
1.lodash提供的防抖来处理
2.手写一个防抖函数来处理
案例：
利用防抖来处理------鼠标滑过盒子显示文字
要求：鼠标在盒子上移动，里面的数字就会变化+1
方式一（loadsh）
javascript
<style>
.box{
width: 300px;
height: 300px;
background-color: rgb(192, 255, 200);
text-align: center;
line-height: 300px;
font-size: 30px;
color: red;
font-weight: bold;
}
</style>
<body>
<div class="box"></div>
<script src="./node_modules/lodash/lodash.min.js"></script>
<script>
// 利用防抖来处理------鼠标滑过盒子显示文字
// 要求：鼠标在盒子上移动，里面的数字就会变化+1
const box = document.querySelector('.box')
let i = 1
function mouseMove(){
box.innerHTML = i++
}
// 利用loadsh库实现防抖，每1秒只执行一次函数mouseMove
box.addEventListener('mousemove',_.debounce(mouseMove,1000))
</script>
</body>方式二（手写函数）
javascript
<body>
<div class="box"></div>
<script src="./node_modules/lodash/lodash.min.js"></script>
<script>
// 利用防抖来处理------鼠标滑过盒子显示文字
// 要求：鼠标在盒子上移动，里面的数字就会变化+1
const box = document.querySelector('.box')
let i = 1
function mouseMove(){
box.innerHTML = i++
}
function debouce(fn,t){
let timer
return function(){
if(timer)clearTimeout(timer)
timer = setTimeout(function(){
fn()
},t)
}
}
box.addEventListener('mousemove',debouce(mouseMove,1000))
</script>
</body>六.节流
单位时间内，频繁触发事件，只执行一次
使用场景:
高频事件：鼠标移动mousemove、页面尺寸缩放resize、滚动条滚动scroll等等
实现方式:
1.lodash提供的节流函数来处理
2.手写一个节流函数来处理
案例：
利用节流来处理-------鼠标滑过盒子显示文字
要求：鼠标在盒子上移动，不管移动多少次，每隔500ms才+1
方式一（loadsh）
javascript
<body>
<div class="box"></div>
<script src="./node_modules/lodash/lodash.min.js"></script>
<script>
const box = document.querySelector('.box')
let i = 1
function mouseMove(){
box.innerHTML = i++
}
box.addEventListener('mousemove',_.throttle(mouseMove,500))
</script>
</body>方式二（手写函数）
javascript
<body>
<div class="box"></div>
<script src="./node_modules/lodash/lodash.min.js"></script>
<script>
const box = document.querySelector('.box')
let i = 1
function mouseMove(){
box.innerHTML = i++
}
function throttle(fn,t){
let timer = null
return function(){
if(!timer) {
timer = setTimeout(function(){
fn()
timer = null
},t)
}
}
}
box.addEventListener('mousemove',throttle(mouseMove,500))
</script>
</body>