La diferencia entre llamar, aplicar y enlazar en JavaScript

1. La diferencia entre call, apply y bind

llamar:

Llame a la función, cambie el puntero this en la función, reciba la lista de parámetros pasados ​​y devuelva el valor de retorno de la función

fun.call(thisArg, arg1, arg2, ...)

thisArg: el valor this especificado cuando se ejecuta la función fun

arg1, arg2, ...: argumentos adicionales pasados

    var o = {
      name: 'zs'
    }
    function fun() {
      console.log(this)
    }
    fun()  //this指向window
    fun.call()  //this指向window
    fun.call(o)  //调用call方法改变了this指向o这个对象

    var o = {
      name: 'zs'
    }
    function fun(a, b) {
      console.log(this)  //调用call方法改变了this指向o这个对象
      console.log(a + b)  //3
    }

    fun.call(o, 1, 2) //传递了参数时，可以参与运算

Escenario de uso: Implementación de la herencia

    function Father(name, age) {
      this.name = name
      this.age = age
    }
    function Son(name, age) {
      Father.call(this, name, age)
    }
    let son = new Son('zs', 18)
    console.log(son)  //Son {name: 'zs', age: 18}

aplicar:

Llame a la función, cambie el puntero this en la función, reciba la matriz pasada y devuelva el valor de retorno de la función

fun.apply(thisArg, [argsArray])

thisArg: el valor this especificado cuando se ejecuta la función fun

[argsArray]: el valor pasado debe incluirse en la matriz

    var o = {
      name: 'zs'
    }
    function fun(arr) {
      console.log(this)  //调用apply方法改变了this指向o这个对象
      console.log(arr)  //ls
    }

    fun.apply(o, ['ls'])

Escenario de uso: por ejemplo, puede usar apply para encontrar el valor máximo con la ayuda de objetos matemáticos integrados

    var arr = [1, 56, 23, 78, 64, 19]
    var max = Math.max.apply(Math, arr)
    //调用求数组里面求最大值   让this指向函数的调用者Math
    var min = Math.min.apply(Math, arr)
    console.log(`最大值是${max}`)
    console.log(`最大值是${min}`)

unir:

No llamará a la función, cambiará este punto en la función y devolverá una función (la nueva función después de la función original cambia este punto)

 fun.bind(thisArg, arg1, arg2, ...)

thisArg: el valor this especificado cuando se ejecuta la función fun

arg1, arg2, ...: argumentos adicionales pasados

    var o = {
      name: 'andy'
    }
    function fun() {
      console.log(this)
    }
    var fn = fun.bind(o)
    fn() //调用bind方法改变了this指向o这个对象

Escenario de uso: cuando solo queremos cambiar el punto de esto y no queremos llamar a esta función, podemos usar bind

Hay varios botones que deshabilitan este botón después de dos segundos y habilitan esta función cuando se hace clic

    let btns = document.querySelectorAll('button')
    for (let i = 0; i < btns.length; i++) {
      btns[i].addEventListener('click', function () {
        this.disabled = true
        setTimeout(function () {
          this.disabled = false
          // 定时器里面的this指向的是window并不是按钮，这个时候就需要改变this的指向，让this指向按钮
        }.bind(this), 2000)
      })
    }

2. El problema señalado por esto:

• En la función de flecha, esto apunta a esto debajo del área donde se declara
• En el ámbito global, esto apunta a la ventana
• En una función normal, esto apunta a su llamador
• Enlace de eventos, esto apunta a la fuente del evento
• Temporizador, esto apunta a la ventana
• Constructor, esto apunta al objeto instanciado.