All this points to

Ordinary function heavy this point, wind

The method this in the object points to, the object (is the this pointing of the method in the object, not the this pointing in the object, the object does not have this pointing)

The this point in the event binding, the source of the bound event

this in the timer points to, wind

The this point in the arrow function, the arrow function does not have this point, but if you must use this, then the this point in the arrow function, the scope of the arrow function

The this point in the constructor points to the instantiated object created by the constructor

But now this point can be modified, there are three ways to modify this point

Function name.call (this points to, parameter 1, parameter 2)

Function name.apply(this points to, array)

Function name.bind (this point, parameter 1, parameter 2) Note: the modified this point does not mean that the this point of the function can be changed directly. It is to modify the function first, and then modify it after assignment

    // object no this pointing to, the object method only this direction
    // const boj = {
    //     uname : `1`,
    //     sing : () => {
    //         console.log(this) //win
    // }
    // }
    // boj.sing()
    // .call keyword modification this direction
    let obj = {
        uname : `22`
    }
    function name(a,b) {
        console.log(this)  //direction wind
        console.log(a + b)
    }
    // name.call(this Point to, parameter 1, parameter 2,...)  //The first function is to call the function immediately, and the second function is to change the point of this
    // name.call(obj) //Convert from pointing to wind to pointing to obj
    // name.call(obj,1,5) //Convert from pointing to wind to pointing to obj, adding actual parameters normally
    // apply(this point to, array)keywords  //The first parameter changes the point of this, and the second parameter must be an array format
    // name.apply(obj,[1,2,3]) //point to obj
    // let arr = [1,5,3,7,9]
    // console.log(Math.max(...arr))
    // let a = Math.max.apply(null,arr) //null does not change what this points to
    // let b = Math.max.apply(Math,arr) //null does not change the point of this // the same, pointing to Math
    // console.log(a)
    // console.log(b)
    // fun.bind(this direction,) //He will not call the function immediately, the return value is the changed function
    name.bind(obj) //not called immediately
    const fn = name.bind(obj) // fn Yes name function after function change

Throttling and Stabilization

What is throttling: Throttling means that we set a time period. In this time period, we can only trigger the event once, and then it is useless to trigger it again. Scenario: Verification code, in 60s, we can't always let the server send verification codes for us

What is anti-shake: Anti-shake means that we set a time period. In this time period, if we trigger this event, the time period will count down again. If there is no trigger event in the time period we set, then Our event will fire. Scenario: Case of returning to the city, LOL returning to the city, if we move, the returning to the city will be interrupted, and when returning to the city again, the countdown will be restarted

Throttling case

<style>
    .box {
        width: 500px;
        height: 500px;
        background-color: #ccc;
        color: #fff;
        text-align: center;
        font-size: 100px;
    }
</style>

<div class="box"></div>
<script>
    // Handwritten a anti-shake and a handwritten throttling
    // can also use lodash
    const box = document.querySelector(`.box`)
    console.log(box)
    let i = 0
    // declare a global variable
    // render function
    function red() {
        box.innerHTML = ++i
    }
    box.addEventListener(`mousemove`,fun(red,1000))
    // Agreed on a time range, it will only be executed once
    function fun (fn,time) {
        console.log(red)
        console.log(time)
        // Starting time
        let start = 0
        // calculating time
        let now = +new Date() //The total number of milliseconds of the current time
        return function () {
            let now = +new Date()
            if (now - start >= time){
                // recall function
                fn()
                start = now
            }
        }
    }
    fun(red,1000) //red render function,time is 1 s
</script>

Anti-shake case

  <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>
//source of time
const box = document.querySelector(`.box`)
console.log(box)
let i = 0
//Rendering function, we add 1 each time it is executed
function render() {
  box.innerHTML = ++i
}
box.addEventListener(`mousemove`,AntiShake(render,1000))
function AntiShake(fn,time) {
  //Anti-shake function body,Only executes the last time in a period of time
  let timeId // undefined timer name
  return function () {
    if (timeId) {
      //If there is a timer, clear the previous re-timer
      clearTimeout(timeId)
    }
      // If not, start the timer to start timing
     timeId =  setTimeout(function () {
        fn()
      },time)
  }
}
// AntiShake(render,1000)
</script>

lodash enables anti-shake throttling

  <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
  }
  // Enable anti-shake throttling,When the mouse is still, the text will be superimposed. If the mouse is moved, the text will stop superimposing
  // div.addEventListener(`mousemove`,_.debounce(fun,2000))
  // Turn on throttling, move the mouse once, within the specified time, no matter how much the mouse moves, it will not superimpose
  div.addEventListener(`mousemove`,_.throttle(fun,2000))
</script>