The difference between call, apply and bind in JavaScript

1. The difference between call, apply and bind

call:

Call the function, change the this pointer in the function, receive the passed parameter list, and return the return value of the function

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

thisArg: the this value specified when the function fun is running

arg1, arg2, ...: additional arguments passed

    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) //传递了参数时，可以参与运算

Usage Scenario: Implementing Inheritance

    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}

apply:

Call the function, change the this pointer in the function, receive the passed array, and return the return value of the function

fun.apply(thisArg, [argsArray])

thisArg: the this value specified when the function fun is running

[argsArray]: The passed value must be included in the array

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

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

Usage scenario: For example, you can use apply to find the maximum value with the help of built-in mathematics objects

    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}`)

bind:

Will not call the function, change the this point in the function, and return a function (the new function after the original function changes the this point)

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

thisArg: the this value specified when the function fun is running

arg1, arg2, ...: additional arguments passed

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

Usage scenario: when we just want to change the point of this and don't want to call this function, we can use bind

There are several buttons that disable this button after two seconds and enable this function when clicked

    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. The problem pointed to by this:

In the arrow function, this points to the this under the area where it is declared
In the global scope, this points to window
In a normal function, this points to its caller
Event binding, this points to the event source
Timer, this points to window
Constructor, this points to the instantiated object