bind、call实现原理

释义

bind()方法主要就是将函数绑定到某个对象，bind()会创建一个函数，函数体内的this对象的值会被绑定到传入bind()中的第一个参数的值，剩下的参数以逗号分隔，与call的传参数一样

bind用法

var person = {
    name: '妖怪'
}

function other (age, sex) {
    console.log(this.name + '的年龄是' + age + ',性别：' + sex)
}

// 注意bind使用时必用在结尾用（）执行，注意与call、apply的区别
other.bind(person, 21, '男')() // 妖怪的年龄是21,性别：男
other.bind(person, 21)('男') // 妖怪的年龄是21,性别：男，也可以在调用时再次传入参数

原理代码

Function.prototype.mybind = function () {
  var that = this // 保存原this指向
  // 这里用Array.prototype.shift.call的方法把类数组对象arguments参数转化为数组，同时用shift方法提取第一个参数作为新的上下文this；
  var context = Array.prototype.shift.call(arguments)
  
  // 因为shift方法会改变原数组，所以args为剩余的参数，并转化为数组
  var args = Array.prototype.slice.call(arguments)
  
  // return为bind()的返回值，还没有进行调用
  return function () {
  
    // 以下为bind(a,b,c)(d)进行调用，新的this上下文context当作第一个参数传入，余下的为剩余的参数，此时的arguments为调用时的入参，用concat进行合并
    that.apply(context, Array.prototype.concat.call(args, Array.prototype.slice.call(arguments)))
  }
}

var person = {
    name: '妖怪'
}

function other (age, sex) {
    console.log(this.name + '的年龄是' + age + ',性别：' + sex)
}

other.mybind(person, 21, '男')() // 妖怪的年龄是21,性别：男
other.mybind(person, 21)('男') // 妖怪的年龄是21,性别：男

附：call实现原理

Function.prototype.myCall = function(context, ...args) { // 解构context 与arguments
  if(typeof this !== 'function') { // this 必须是函数
    throw new TypeError(`It's must be a function`)
  }
  if(!context) context = window; // 没有context，或者传递的是 null undefined，则重置为window
  const fn = Symbol(); // 指定唯一属性，防止 delete 删除错误
  context[fn] = this; // 将 this 添加到 context的属性上
  const result = context[fn](...args); // 直接调用context 的 fn
  delete context[fn]; // 删除掉context新增的symbol属性
  return result; // 返回返回值
}

var bar = {a: 1}
function foo(b) {
  console.log(this.a + b)
  return this.a+b
} 
foo.myCall(bar, 2)