解析call、apply、bind三者区别及实现原理

let obj = { name: 'wujia', fn: function (a, b, c) {    console.log(this.name, a, b, c)  }}window.name = '吴佳'
let nFn = obj.fn.bind(window, '第一个参数')nFn('第二个参数', '第三个参数') // 最后输出：吴佳，第一个参数，第二个参数，第三个参数

let obj = { name: 'wujia', fn: function (a, b, c) { this.age = 20 console.log(this.name, a, b, c) }}window.name = '吴佳'
let nFn = obj.fn.bind(window, '第一个参数')new nFn('第二个参数','第三个参数')// 最后输出结果：Undefined，第一个参数，第二个参数，第三个参数

let obj = { name: 'wujia', fn: function (a, b, c) { this.age = 20    console.log(a, b, c)    return this.name }}window.name = '吴佳'
const name1 = obj.fn.call(window, '第一个参数', '第二个参数', '第三个参数')const name2 = obj.fn.apply(window, ['第一个参数', '第二个参数', '第三个参数'])// 两个方法的打印输出：第一个参数, 第二个参数, 第三个参数 // name1 & name2 值都为吴佳

function fn () { console.log(this)}// call方法的输出与apply一致fn.apply(undefined) // windowfn.apply(null) // windowfn.apply('') // String {""}fn.apply(1) // Number {1}fn.apply(true) // Boolean {true}

Function.prototype.call = function (context) {  // 基础类型转包装对象  if (context === undefined || context === null) {    context = window  } else if (typeof context === 'string') {    context = new String(context)  } else if (typeof context === 'number') {    context = new Number(context)  } else if (typeof context === 'boolean') {    context = new Boolean(context)  }  // 保存原函数至指定对象的fn属性上  context.fn = this  // 获取除第一个参数之后的所有参数  const args = Array.from(arguments).slice(1)  // 通过指定对象的fn属性执行原函数并出入参数  const fnValue = context.fn(...args)  delete context.fn // 从context中删除fn原函数  return fnValue}

Function.prototype.apply = function (context, arr) { // 基础类型转包装对象 if (context === undefined || context === null) { context = window } else if (typeof context === 'string') { context = new String(context) } else if (typeof context === 'number') { context = new Number(context) } else if (typeof context === 'boolean') { context = new Boolean(context) }  // 非对象，非undefined，非null的值才会抛错  if (typeof arr !== 'object' && typeof arr !== 'undefined' && typeof arr !== 'null') throw new TypeError('CreateListFromArrayLike called on non-object')  arr = Array.isArray(arr) && arr || [] // 非数组就赋值空数组 // 保存原函数至指定对象的fn属性上  context.fn = this  // 通过指定对象的fn属性执行原函数并出入参数 const fnValue = context.fn(...arr) delete context.fn // 从context中删除fn原函数 return fnValue}

Function.prototype.bind = function (context) {  // 保存原函数 const ofn = this // 获取除第一个参数之后的所有参数 const args = Array.from(arguments).slice(1) function O() {}  function fn() {    // 第一个参数的判断是为了忽略使用new实例化函数时让this指向它自己，否则就指向这个context指定对象    // 第二个参数的处理做了参数合并， 就是 bind & fn 两个函数的参数合并    ofn.apply(this instanceof O ? this : context, args.concat(Array.from(arguments)))  }  O.prototype = this.prototype  fn.prototype = new O()  return fn}