JavaScript之手写call、apply、bind函数

henu_Newxc03

发布于 2022-05-11 08:42:10

2910

发布于 2022-05-11 08:42:10

文章被收录于专栏：Newxc03的前端之路

😎 手写call函数

实现步骤：

判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用call等方式调用的情况
判断传入上下文对象是否存在，如果不存在，则设置为window
处理传入的参数，截取第一个参数后的所有参数
将函数作为上下文对象的一个属性
使用上下文对象来调用这个方法，并保存返回结果
删除刚才新增的属性

 Function.prototype.myCall=function(context){
    //判断调用对象
    if(typeof this !== 'function'){
      console.error("type error")
    }
    //获取参数
    let args=[...arguments].slice(1),result=null;
    //判断context是否传入，如果未传入则设置为window
    context=context||window;
    //将调用函数设为对象的方法
    context.fn=this;
    //调用函数
    result=context.fn(...args);
    //将属性删除
    delete context.fn;
    return result;
  }

🧐 手写apply函数

Function.prototype.myApply=function(context){
    //判断调用对象
    if(typeof this !== 'function'){
      console.error("type error")
    }
    //获取参数
    let result=null;
    //判断context是否传入，如果未传入则设置为window
    context=context||window;
    //将调用函数设为对象的方法
    context.fn=this;
    //调用函数
    if(arguments[1]){
      result=context.fn(...arguments[1])
    }else{
      result=context.fn()
    }
    //将属性删除
    delete context.fn;
    return result;
  }

🤔 手写bind函数

实现步骤：

判断调用对象是否为函数，即使我们是定义在函数的原型上的，但是可能出现使用call等方式调用的情况
保存当前函数的引用，获取其余传入参数值
创建一个函数返回
函数内部使用apply来绑定函数调用，需要判断函数作为构造函数的情况，这个时候需要传入当前函数的this给apply调用，其余情况都传入指定的上下文对象

  Function.prototype.myBind=function(context){
    //判断调用对象
    if(typeof this !== 'function'){
      console.error("type error")
    }
    //获取参数
    let args=[...arguments].slice(1),fn=this;
    return function Fn(){
      //根据调用方式，传入不同绑定值
      return fn.apply(
        this instanceof Fn ? this : context,
        args.concat(...arguments)
      )
    }
  }

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2022-05-10，如有侵权请联系 cloudcommunity@tencent.com 删除

apply