9.1 this指向-普通函数
普通函数的调用方式决定了this的值,即【谁调用this的值 指向谁】
普通函数没有明确调用者时this值为window,严格模式下没有调用者时this的值为undefined
9.2 this指向-箭头函数
箭头函数中的this与普通函数完全不同,也不受调用方式的影响,事实上箭头函数中并不存在this !
1.箭头函数会默认帮我们绑定外层this的值,所以在箭头函数中this的值和外层的this是一样的
2.箭头函数中的this引用的就是最近作用域中的this
3.向外层作用域中,一层一层查找this,直到有this的定义
注意情况1:
在开发中【使用箭头函数前需要考虑函数中this的值】,事件回调函数使用箭头函数时,this 为全局的window
因此DOM事件回调函数如果里面需要DOM对象的this,则不推荐使用箭头函数
注意情况2:
同样由于箭头函数this的原因,基于原型的面向对象也不推荐采用箭头函数
箭头函数总结:
1.函数内不存在this,沿用上一级的
2.不适用于 构造函数,原型函数,dom事件函数等等
3.适用于 需要使用上层this的地方
9.3改变this指向
JavaScript中还允许指定函数中this的指向,有3个方法可以动态指定普通函数中this的指向
1.call()-了解
使用call方法调用函数,同时指定被调用函数中this的值
●语法:
➢thisArg: 在fun函数运行时指定的this值
➢arg1, arg2:传递的其他参数
➢返回值就是函数的返回值,因为它就是调用函数
【示例】
<body>
<script>
const obj = {
name: 'Kai'
}
function fn() {
console.log(this) // obj
}
// 调用函数,改变this指向
fn.call(obj)
</script>
</body>
2.apply()-理解
使用apply方法调用函数,同时指定被调用函数中this的值
●语法:
➢thisArg: 在fun函数运行时指定的this值
➢argsArray: 传递的值,必须包含在数组里面
➢返回值就是函数的返回值,因为它就是调用函数
➢因此apply主要跟数组有关系,比如使用Math.max() 求数组的最大值
【示例】
<body>
<script>
const obj = {
age: 18
}
function fn(x, y) {
console.log(this) // {age: 18}
console.log(x + y) // 3
}
fn.apply(obj, [1, 2])
</script>
</body>
3.bind()-重点
●bind() 方法不会调用函数。但是能改变函数内部this指向
●语法:
➢thisArg: 在fun函数运行时指定的this值
➢arg1, arg2:传递的其他参数
➢返回由指定的this值和初始化参数改造的 原函数拷贝(新函数)
➢因此当我们只是想改变this指向,并且不想调用这个函数的时候,可以使用bind,比如改变定时器内部的this指向
【示例】
<body>
<button>发送短信</button>
<script>
// 有一个按钮,点击后禁用,1s后开启
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
this.disabled = true
window.setTimeout(function () {
// 在这个普通函数里,要将this由原来的window 改为 btn
this.disabled = false
}.bind(this), 1000)
})
</script>
</body>
4.call apply bind 总结
9.4防抖(debounce)
●防抖:单位时间内,频繁触发事件,只执行最后一次
●使用场景:
➢搜索框搜索输入。只需用户最后一次输入完,再发送请求
➢手机号、邮箱验证输入检测
利用防抖来处理-鼠标滑过盒子显示文字
要求:鼠标在盒子上移动,鼠标停止500ms之后,里面的数字才会变化+1
实现方式:
1.lodash提供的防抖来处理
【示例】
<body>
<div class="box"></div>
<script src="lodash.min.js"></script>
<script>
const box = document.querySelector('.box')
let i = 1
function move() {
box.innerHTML = i++
}
// 利用lodash库实现防抖 - 500毫秒后执行+1
// 语法:_.debounce(fun, 时间)
box.addEventListener('mousemove', _.debounce(move, 500))
</script>
</body>
2.手写一个防抖函数来处理
【示例】
<body>
<div class="box"></div>
<script>
const box = document.querySelector('.box')
let i = 1
function move() {
box.innerHTML = i++
}
// 手写防抖函数
// 利用setTimeout实现
// 1.声明定时器变量
// 2.每次鼠标移动(事件触发)的时候都要先判断是否有定时器,有就先清除
// 3.没有则开启定时器
// 4.定时器里面写函数调用
function debounce(fn, t) {
let timer
// return 返回一个匿名函数
return function () {
// 2.3.4
if (timer) clearTimeout(timer)
timer = setTimeout(function () {
fn()
}, t)
}
}
box.addEventListener('mousemove', debounce(move, 500))
</script>
</body>
9.5节流-throttle
●节流:单位时间内,频繁触发事件,只执行一次
●使用场景:
➢高频事件:鼠标移动mousemove、页面尺寸缩放resize、 滚动条滚动scroll等等
1.lodash提供的节流来处理
【示例】
<body>
<div class="box"></div>
<script src="lodash.min.js"></script>
<script>
const box = document.querySelector('.box')
let i = 1
function move() {
box.innerHTML = i++
}
// 利用lodash库实现节流 - 500毫秒后执行 + 1
// 语法:_.throttle(fun, 时间)
box.addEventListener('mousemove', _.throttle(move, 500))
</script>
</body>
2.手写一个节流函数来处理
【示例】
<body>
<div class="box"></div>
<script src="lodash.min.js"></script>
<script>
const box = document.querySelector('.box')
let i = 1
function move() {
box.innerHTML = i++
}
// 手写节流函数 利用setTimeout实现
// 1.声明定时器变量
// 2.每次鼠标移动(事件触发)的时候都要先判断是否有定时器,有就不开启新的定时器
// 3.没有则开启定时器
// 4.定时器里面写函数调用,定时器里面要把定时器清空
function throttle(fn, t) {
let timer = null
return function () {
if (!timer) {
timer = setTimeout(function () {
fn()
// 清空定时器
// 在 setTimeout 中是无法删除定时器的,因为定时器还在运作
// 所以使用timer = null 而不是clearTimeout(timer)
timer = null
}, t)
}
}
}
box.addEventListener('mousemove', throttle(move, 500))
</script>
</body>
3.防抖和节流总结
9.6案例-页面打开,可以记录上一次的视频播放位置
两个事件:
1.ontimeupdate事件在视频/音频(audio/video) 当前的播放位置发送改变时触发
2.onloadeddata事件在当前帧的数据加载完成且还没有足够的数据播放视频/音频(audio/video)的下一帧时触发
【部分代码示例】
<script>
// 1.获取视频元素
const video = document.querySelector('video')
video.ontimeupdate = _.throttle(function () {
// console.log(video.currentTime) 获得当前的视频时间
// 把当前的时间存储到本地存储
localStorage.setItem('now', video.currentTime)
}, 1000)
// 2.打开页面触发事件,就从本地存储里取出记录的时间,赋值给video.currentTime
video.onloadeddata = () => {
video.currentTime = localStorage.getItem('now') || 0
}
</script>