开发网站需要注意,企业开发网站用什么技术,知名网站建设怎么样,北京电力交易中心电话号码9.1 this指向-普通函数
普通函数的调用方式决定了this的值#xff0c;即【谁调用this的值 指向谁】 普通函数没有明确调用者时this值为window#xff0c;严格模式下没有调用者时this的值为undefined
9.2 this指向-箭头函数
箭头函数中的this与普通函数完全不同#xff0…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传递的其他参数 ➢返回值就是函数的返回值因为它就是调用函数 【示例】
bodyscriptconst obj {name: Kai}function fn() {console.log(this) // obj}// 调用函数改变this指向fn.call(obj)/script
/body2.apply()-理解 使用apply方法调用函数同时指定被调用函数中this的值 ●语法: ➢thisArg: 在fun函数运行时指定的this值 ➢argsArray: 传递的值必须包含在数组里面 ➢返回值就是函数的返回值因为它就是调用函数 ➢因此apply主要跟数组有关系比如使用Math.max() 求数组的最大值 【示例】
bodyscriptconst obj {age: 18}function fn(x, y) {console.log(this) // {age: 18}console.log(x y) // 3}fn.apply(obj, [1, 2])/script
/body3.bind()-重点 ●bind() 方法不会调用函数。但是能改变函数内部this指向 ●语法: ➢thisArg: 在fun函数运行时指定的this值 ➢arg1, arg2传递的其他参数 ➢返回由指定的this值和初始化参数改造的 原函数拷贝新函数 ➢因此当我们只是想改变this指向并且不想调用这个函数的时候可以使用bind比如改变定时器内部的this指向 【示例】
bodybutton发送短信/buttonscript// 有一个按钮点击后禁用1s后开启const btn document.querySelector(button)btn.addEventListener(click, function () {this.disabled truewindow.setTimeout(function () {// 在这个普通函数里要将this由原来的window 改为 btnthis.disabled false}.bind(this), 1000)})/script
/body4.call apply bind 总结
9.4防抖(debounce)
●防抖单位时间内频繁触发事件只执行最后一次 ●使用场景: ➢搜索框搜索输入。只需用户最后一次输入完再发送请求 ➢手机号、邮箱验证输入检测
利用防抖来处理-鼠标滑过盒子显示文字 要求鼠标在盒子上移动鼠标停止500ms之后里面的数字才会变化1 实现方式:
1.lodash提供的防抖来处理 【示例】
bodydiv classbox/divscript srclodash.min.js/scriptscriptconst box document.querySelector(.box)let i 1function move() {box.innerHTML i}// 利用lodash库实现防抖 - 500毫秒后执行1// 语法_.debounce(fun, 时间)box.addEventListener(mousemove, _.debounce(move, 500))/script
/body2.手写一个防抖函数来处理 【示例】
bodydiv classbox/divscriptconst box document.querySelector(.box)let i 1function move() {box.innerHTML i}// 手写防抖函数// 利用setTimeout实现// 1.声明定时器变量// 2.每次鼠标移动事件触发的时候都要先判断是否有定时器有就先清除// 3.没有则开启定时器// 4.定时器里面写函数调用function debounce(fn, t) {let timer// return 返回一个匿名函数return function () {// 2.3.4if (timer) clearTimeout(timer)timer setTimeout(function () {fn()}, t)}}box.addEventListener(mousemove, debounce(move, 500))/script
/body9.5节流-throttle
●节流单位时间内频繁触发事件只执行一次 ●使用场景: ➢高频事件鼠标移动mousemove、页面尺寸缩放resize、 滚动条滚动scroll等等
1.lodash提供的节流来处理 【示例】
bodydiv classbox/divscript srclodash.min.js/scriptscriptconst box document.querySelector(.box)let i 1function move() {box.innerHTML i}// 利用lodash库实现节流 - 500毫秒后执行 1// 语法_.throttle(fun, 时间)box.addEventListener(mousemove, _.throttle(move, 500))/script
/body2.手写一个节流函数来处理 【示例】
bodydiv classbox/divscript srclodash.min.js/scriptscriptconst box document.querySelector(.box)let i 1function move() {box.innerHTML i}// 手写节流函数 利用setTimeout实现// 1.声明定时器变量// 2.每次鼠标移动事件触发的时候都要先判断是否有定时器有就不开启新的定时器// 3.没有则开启定时器// 4.定时器里面写函数调用,定时器里面要把定时器清空function throttle(fn, t) {let timer nullreturn function () {if (!timer) {timer setTimeout(function () {fn()// 清空定时器// 在 setTimeout 中是无法删除定时器的,因为定时器还在运作// 所以使用timer null 而不是clearTimeout(timer)timer null}, t)}}}box.addEventListener(mousemove, throttle(move, 500))/script
/body3.防抖和节流总结 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.currentTimevideo.onloadeddata () {video.currentTime localStorage.getItem(now) || 0}/script
