JS中 bind()的用法，call(),apply(),bind()异同点及使用，如何手写一个bind()

✨什么是bind()

bind()的MDN地址

bind() 方法创建一个新函数，当调用该新函数时，它会调用原始函数并将其 this 关键字设置为给定的值，同时，还可以传入一系列指定的参数，这些参数会插入到调用新函数时传入的参数的前面。

🍧 call(),apply(),bind()的异同

🎐 相同点

三者都是动态的修改函数内部的this指向

🎶 不同点

• 传参方式不同，call()和bind()是按照顺序传参，apply()是通过数组/伪数组传参。
• 执行机制不同，call()和apply()是立即执行函数，bind()不会立即执行函数，而是会返回一个修改过this的新函数。

🍿 call()

函数名.call(修改后的this,形参1,形参2…)

    person = {
      name: 'zhangsan'
    }
    function fn (a, b,) {
      console.log(this) //{name: 'zhangsan'}
      console.log(a, b) //1 2 
      console.log(a + b) //3
    }
    //call 立即执行函数 没有返回值
    let res = fn.call(person, 1, 2)
    console.log(res); //undefined

🎄apply()

函数名.apply(修改后的this,数组/伪数组)

    person = {
      name: 'zhangsan'
    }
    function fn (a, b) {
      console.log(this) //{name: 'zhangsan'}
      console.log(a, b) //1 2 
      console.log(a + b) //3
    }
    //apply 立即执行函数 没有返回值
    let res = fn.apply(person, [1, 2])
    console.log(res) //undefined

🎡 bind()

函数名.bind(修改后的this，形参1,形参2…)

  person = {
      name: 'zhangsan'
    }
    function fn (a, b, c, d) {
      console.log(this) //{name: 'zhangsan'}
      console.log(a, b, c, d) //1 2 3 4
      console.log(a + b + c + d) //10
    }
    //bind 不会立即执行函数，而是返回一个修改this的新函数
    let newFn = fn.bind(person, 1, 2)
    newFn(3, 4)

✨ 手写bind() :myBind()

可参照上一篇文章 手写call()

🎡代码

Function.prototype.myBind = function (thisArg, ...args) {
       
      return (...reArgs) => {
        // this:原函数(原函数.myBind)
        return this.call(thisArg, ...args, ...reArgs)
      }
    }
    
    // ------------- 测试代码 -------------
    const person = {
      name: 'zhangsan'
    }

    function func(numA, numB, numC, numD) {
      console.log(this)
      console.log(numA, numB, numC, numD)
      return numA + numB + numC + numD
    }

    const bindFunc = func.myBind(person, 1, 2)

    const res = bindFunc(3, 4)
    console.log('返回值:', res)

🎉 测试