深入理解bind/call/apply以及手写

bind/call/apply都是用来重新定义（改变）函数内部的this指向。

例子： 菜鸟的例子更加清晰

var year = 2021
function getDate(month, day) {
    return this.year + '-' + month + '-' + day
}

let obj = {year: 2022}
getDate.call(null, 3, 8)    //2021-3-8
getDate.call(obj, 3, 8)     //2022-3-8
getDate.apply(obj, [6, 8])  //2022-6-8
getDate.bind(obj, 3, 8)()     //2022-3-8

区别：

• call 的参数是直接放进去的，第二第三第 n 个参数全都用逗号分隔，直接放到后面getDate.call(obj, ... ,'string'/number/object/fun...)
• apply所有参数都必须放在一个数组里面传进去 getDate.call(obj, ['string'/number/object/fun...])
• bind除了返回是函数以外，它 的参数和call一样

实现bind/call/apply

• bind

Function.prototype.bind = function(context, ...args1) {
  context = (context === undefined || context === null) ? window : context
    let _this = this
  return function(...args2) {
    context.__fn = _this
    let result = context.__fn(...[...args1, ...args2])
    delete context.__fn
    return result
  }
}

• call

Function.prototype.call = function(context, ...args) {
  context = (context === undefined || context === null) ? window : context
    context.__fn = this
  let result = context.__fn(...args)
  delete context.__fn
  return result
}

• apply

Function.prototype.apply = function(context, args) {
  context = (context === undefined || context === null) ? window : context
    context.__fn = this
  let result = context.__fn(...args)
  delete context.__fn
  return result
}

调用手写的bind/call/apply： apply和call除了入参不一样，剩下的都一样

let P = {name: '李三'}
function fun(...arg){
  console.log(this.name + '真', ...arg);
}
fun.bind(P, '试试？', '试试就试试')('2222'); //李三真 试试？ 试试就试试 2222
fun.bind(P, '试试？', '试试就试试')(); //李三真 试试？ 试试就试试
fun.call(P, '试试？', '试试就试试'); //李三真 试试？ 试试就试试 
fun.apply(P, ['试试？', '试试就试试']); //李三真 试试？ 试试就试试

手写bind/call/apply的输出结果