原生js实现call、apply以及bind方法的功能

1.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
}

2. apply()方法

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
}

3.bind()方法

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
    }
  }

总结:三种方法中前两种都是调用函数并改变this指向,而最后一种只改变this指向;前两种的区别为参数的接收形式,第一种的多个参数直接传递,第二种的参数放在数组中传递,因此多处理数组相关。

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值