js模拟实现call、apply、bind函数

js的call, apply, bind函数的实现，这是老生常谈了，这些都是改变函数执行上下文的函数；今天我也来实现一下，实现前提是用es5 语法，然后可以直接当做一个polyfill用。

模拟call函数

在Function.prototype上挂载一个newCall函数表示是对call的模拟，具体逻辑看注释

Function.prototype.newCall = function(context){
  // 1 判断context是否为object，如果是object就代表可能是Object 或者 null，如果不是就赋值一个空对象
  if (typeof context === 'object') {
    context = context || window //  context 如果是null就会赋值为window
  } else {
    context = Object.create(null)
  }

  // 2 在context下挂载一个函数，函数所在的key随机生成，防止context上已有同名key
  var fn = +new Date() + '' + Math.random() // 用时间戳+随机数拼接成一个随机字符串作为一个新的key
  context[fn] = this
  // 3 newCall如果还有其他的参数传入也要考虑用到
  var args = []
  for(var i = 1; i < arguments.length; i++) {
    args.push('arguments['+ i + ']')
  }
  // 4 重点在这里，执行context[fn]这个函数，只能用eval，因为newCall的入参参数不确定
  var result = eval('context[fn]('+args+')') // args是一个数组，但是当它和字符串相加时自动调用内部的toString方法转成字符串

  delete context[fn] // 用完后从context上删除这个函数
  // 5 返回结果
  return result
}

原理：

• 在要挂载的对象context上临时添加一个方法 f
• 用eval执行这个临时添加的方法f，并拿到执行后的结果result
• 删除这个额外的方法f，并返回执行结果result

模拟apply函数

apply与call原理基本一样，只是入参不一样，区别是apply(context, Array)，call(context, arg1,arg2,arg3...)

调用的参数：apply是用数组表示，call是一个个传

Function.prototype.newApply = function(context){
  if (typeof context === 'object') {
    context = context || window
  } else {
    context = Object.create(null)
  }

  var fn = +new Date() + '' + Math.random()
  context[fn] = this

  // 敲黑板！！！
  var args = null
  if(arguments[1]){
    args = []
    for(var i = 0; i < arguments[1].length; i++) {
      args.push('arguments[1]['+ i + ']')
    }
  }
  var result = eval('context[fn]('+args+')') 

  delete context[fn] 
  return result
}

写完之后发现还可以优化，在于apply的第二个入参是数组，这个参数是确定了的，不像call那样需要从argument那里取参数。所以，应该给它一个默认参数,请看优化版：

// 优化版：入参加个array
Function.prototype.newApply = function(context, array){
  if (typeof context === 'object') {
    context = context || window
  } else {
    context = Object.create(null)
  }

  var fn = +new Date() + '' + Math.random()
  context[fn] = this


  var args = null
  if(array){
    args = []
    // 这里不需要argument
    for(var i = 0; i < array.length; i++) {
      args.push('array['+ i + ']')
    }
  }
  var result = eval('context[fn]('+args+')') 

  delete context[fn] 
  return result
}
// 用法：
var fn = function(a,b){console.log(this.name,a,b)}
var context = {name: 'name'}
fn.newApply(context, ['a', 'b']) // 打印 => 'name a b'

bind模拟

实现了apply call 之后，bind更加简单了,在外面包层function壳

Function.prototype.newBind = function(context){
  if (typeof context === 'object') {
    context = context || window
  } else {
    context = Object.create(null)
  }

  var args = []
  for(var i = 1; i < arguments.length; i++) {
    args.push(arguments[i])
  }

  var fn = +new Date() + '' + Math.random()
  context[fn] = this

  // 重点这里包个function形成闭包
  return function(){
    var result = eval('context[fn]('+args+')') 
    delete context[fn] 
    return result
    }
  }

// 或者 newBind1
Function.prototype.newBind1 = function(context){
  var args = []
  for(var i = 1; i < arguments.length; i++) {
    args.push(arguments[i])
  }

  return function(){
    Function.prototype.newApply(context, args)
  }
}

// 或者 newBind2
Function.prototype.newBind2 = function(context){
  var args = []
  for(var i = 1; i < arguments.length; i++) {
    args.push(arguments[i])
  }

  return function(){
    eval('Function.prototype.newCall(context, '+args+')')
  }
}