js的所有的this指向和节流防抖()-js

发表于： 11月 30, 2022 11月 30, 2022
分类：建站, 编程
标签： js

js的所有的this指向和节流防抖()

所有的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>

————————