所有的this指向
普通函数重的this指向，wind
对象中的方法this指向，该对象（是对象中的方法的this指向，不是对象中的this指向，对象是没有this指向的）
事件绑定中的this指向，绑定的事件源头
定时器中的this指向，wind
箭头函数中的this指向，箭头函数没有this指向，但是你如果一定要使用this，那么箭头函数中的this指向，箭头函数所在的作用域
构造函数中的this指向，指向构造函数所创建的实例化对象
但是现在this指向是可以修改的，有三种办法修改this指向
函数名.call（this指向，参数1，参数2）
函数名. apply（this指向，数组）
函数名.bind（this指向，参数1，参数2）注意点：这个修改的this指向，不是说，直接就可以使函数的this指向改变。是先修改函数，然后赋值以后才能修改的
// 对象没有this指向，对象方法才有this指向
// const boj = {
// uname : `1`,
// sing : () => {
// console.log(this) //win
// }
// }
// boj.sing()
// .call关键字修改this指向
let obj = {
uname : `22`
}
function name(a,b) {
console.log(this) //指向wind
console.log(a + b)
}
// name.call(this指向，参数1，参数2，...) //第一个作用，可以立即调用函数，第二个作用，改变this指向
// name.call(obj) //从指向wind转换为指向obj
// name.call(obj,1,5) //从指向wind转换为指向obj,正常添加实参
// apply(this指向，数组)关键字 //第一个参数改变this指向，第二个参数必须是数组格式
// name.apply(obj,[1,2,3]) //指向obj
// let arr = [1,5,3,7,9]
// console.log(Math.max(...arr))
// let a = Math.max.apply(null,arr) //null不改变this指向
// let b = Math.max.apply(Math,arr) //null不改变this指向 //一样的，指向Math
// console.log(a)
// console.log(b)
// fun.bind(this指向,) //他不会立即调用函数，返回值是改变之后的函数
name.bind(obj) //不会立即调用
const fn = name.bind(obj) // fn是name函数改变之后的函数
节流和防抖
节流是什么：节流就是我们设定一个时间段，在这个时间段里边，我们只能触发该事件一次，然后再次触发是没有用的。场景：验证码，在60s中，我们不能一直让服务器为我们发送验证码
防抖是什么：防抖就是我们设定一个时间段，在这个时间段里边，我们如果触发了这个事件，那么时间段会重新倒计时，如果在我们设定的时间段里边，没有触发事件，那么我们的事件就会触发。场景：回城案例，LOL回城，如果我们进行了移动，那么会打断回城，重新回城的时候，就要重新倒计时
节流案例
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
<div class="box"></div>
<script>
// 手写一个防抖和手写一个节流
// 也可以使用lodash
const box = document.querySelector(`.box`)
console.log(box)
let i = 0
// 声明一个全局变量
// 渲染函数
function red() {
box.innerHTML = ++i
}
box.addEventListener(`mousemove`,fun(red,1000))
// 约定一个时间范围，只会执行一次
function fun (fn,time) {
console.log(red)
console.log(time)
// 开始时间
let start = 0
// 计算时间
let now = +new Date() //当前时间总的毫秒数
return function () {
let now = +new Date()
if (now - start >= time){
// 重新调用函数
fn()
start = now
}
}
}
fun(red,1000) //red渲染函数,时间是1s
</script>
防抖案例
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
//时间源头
const box = document.querySelector(`.box`)
console.log(box)
let i = 0
//渲染函数，每次执行的时候我们进行加1
function render() {
box.innerHTML = ++i
}
box.addEventListener(`mousemove`,AntiShake(render,1000))
function AntiShake(fn,time) {
//防抖函数体,在一段时间内只会执行最后一次
let timeId // undefined 定时器名字
return function () {
if (timeId) {
//如果有定时器，清除之前的重新计时
clearTimeout(timeId)
}
// 如果没有，开启定时器开始计时
timeId = setTimeout(function () {
fn()
},time)
}
}
// AntiShake(render,1000)
</script>
lodash开启防抖节流
<style>
.box {
width: 500px;
height: 500px;
background-color: #ccc;
color: #fff;
text-align: center;
font-size: 100px;
}
</style>
</head>
<body>
<div class="box"></div>
<script src="./js/lodash.min.js"></script>
<script>
const div = document.querySelector(`div`)
let i = 0
function fun() {
div.innerHTML = ++i
}
// 开启防抖节流,鼠标静止状态下，文字才会叠加，如果鼠标移动了，文字就暂停叠加
// div.addEventListener(`mousemove`,_.debounce(fun,2000))
// 开启节流，鼠标移动一次，在规定时间内，鼠标再怎么移动都不会叠加
div.addEventListener(`mousemove`,_.throttle(fun,2000))
</script>
标签：box,防抖,console,节流,指向,js,let,函数 From： https://www.cnblogs.com/hgng/p/16938159.html