apply()函数,在功能上类似于call(),只是传递参数的格式有所不同。

dog.eat.call(cat, '鱼', '肉');
dog.eat.apply(cat, ['鱼', '肉']);

因此我们完全可以套用 '上一篇对call()的分析‘,得到下列代码。

Function.prototype.myApply = function(obj){
  // 判断调用对象是否为函数
  if(typeof this !== 'function'){
    console.error('type error!')
  }
  // 判断绑定的对象
  obj = obj || window;
  obj.fn = this;
  // 将执行结果保存并返回
  let result = obj.fn();
  // 删除context.fn属性
  delete obj.fn;
  return result;
}

最后考虑下方法中使用的参数(是传递过来的第二个参数),并且格式就是数组,可以之间使用。

Function.prototype.myApply = function(obj){
  if(typeof this !== 'function'){
    console.error('type error!')
  }
  obj = obj || window;
  obj.fn = this;
  // 之间使用传递过来的数组
  let result = obj.fn(...arguments[1]);
  delete obj.fn;
  return result;
}

当没有数组传递过来的时候,arguments[1]获取不到,会报错,因此要再加一层判断。

Function.prototype.myApply = function(obj){
  if(typeof this !== 'function'){
    console.error('type error!')
  }
  obj = obj || window;
  obj.fn = this;
  // 判断arguments[1]是否存在
  if(arguments[1]){
    result = obj.fn(...arguments[1]);
  }else{
    result = obj.fn();
  }
  delete obj.fn;
  return result;
}

最后通过一个例子,来验证是否达到apply()的功能要求。

Function.prototype.myApply = function(obj){
  if(typeof this !== 'function'){
    console.error('type error!')
  }
  obj = obj || window;
  obj.fn = this;
  // 判断arguments[1]是否存在
  if(arguments[1]){
    result = obj.fn(...arguments[1]);
  }else{
    result = obj.fn();
  }
  delete obj.fn;
  return result;
}
let dog = {   
  name: '狗',   
  eat(food1, food2) {     
    console.log(this.name + '爱吃' + food1 + food2);   
  }
}
let cat = {   
  name: '猫',
}
dog.eat.apply(cat, ['鱼', '肉']); // 猫爱吃鱼肉
dog.eat.myApply(cat, ['鱼', '肉']); // 猫爱吃鱼肉

另外两篇:'对apply()函数的分析' 和 '对bind()函数的分析' 。

理解并手写 apply() 函数的更多相关文章

  1. 理解并手写 call() 函数

    手写自己的call,我们要先通过call的使用,了解都需要完成些什么功能? call()进行了调用,是个方法,已知是建立在原型上的,使用了多个参数(绑定的对象+传递的参数). 我们把手写的函数起名为m ...

  2. 理解并手写 bind() 函数

    有了对call().apply()的前提分析,相信bind()我们也可以手到擒来. 参考前两篇:'对call()函数的分析' 和 '对apply()函数的分析',我们可以先得到以下代码: Functi ...

  3. WPF启动流程-自己手写Main函数

    WPF一般默认提供一个MainWindow窗体,并在App.Xaml中使用StartupUri标记启动该窗体.以下通过手写实现WPF的启动. 首先先介绍一下VS默认提供的App.Xaml的结构,如下图 ...

  4. 前端面试题整理——手写bind函数

    var arr = [1,2,3,4,5] console.log(arr.slice(1,4)) console.log(arr) Function.prototype.bind1 = functi ...

  5. python 精华梳理(已理解并手写)--全是干货--已结

    基础部分 map,reduce,filter,sort,推导式,匿名函数lambda , 协程,异步io,上下文管理 自定义字符串转数字方法一不使用reduce import re def str2i ...

  6. 手写bind函数

    实现bind函数 参考MDN提供的Polyfill方案 Function.prototype.myBind = function(context){ //这里对调用者做一个判断,如果不是函数类型,直接 ...

  7. C++之手写strlen函数

    代码: int strlen(const char *str){ assert(str!=NULL); intlen=; while((*str++)!='\0') len++; return len ...

  8. js面试题之手写节流函数和防抖函数

    函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 /* 节流函数:fn:要被节流的函数,delay:规定的时间 */ function throttle(fn,dela ...

  9. 常见的JS手写函数汇总(代码注释、持续更新)

    最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...

随机推荐

  1. git 撤销,放弃本地修改,放弃已提交修改

    一, 未使用 git add 缓存代码时. 可以使用 git checkout -- filepathname (比如: git checkout -- readme.md ,不要忘记中间的 &quo ...

  2. vue中mapGetters和...mapGetters

    vuex中的...mapGetters(['name'])如何实现的 vuex vue.js 根据文档介绍 https://vuex.vuejs.org/zh-cn/... 和看了 http://ww ...

  3. TCP三次握手和四次挥手【转】

    一. TCP/IP协议族 TCP/IP是一个协议族,通常分不同层次进行开发,每个层次负责不同的通信功能.包含以下四个层次: 1. 链路层,也称作数据链路层或者网络接口层,通常包括操作系统中的设备驱动程 ...

  4. Serializable接口中serialVersionUID字段的作用

    序列化运行时使用一个称为 serialVersionUID 的版本号与每个可序列化类相关联,该序列号在反序列化过程中用于验证序列化对象的发送者和接收者是否为该对象加载了与序列化兼容的类. 如果接收者加 ...

  5. BumbleBee: 如丝般顺滑构建、交付和运行 eBPF 程序

    本文地址:https://www.ebpf.top/post/bumblebee 1. 前言 不久前,Solo.io 公司在官网博客宣布了开源了一个名称为 BumbleBee 的新项目.该项目专注于简 ...

  6. Python解释器安装、多版本共存以及手动添加环境变量教程

    Python解释器安装.多版本共存以及手动添加环境变量教程 一.Python解释器下载 1. 先进入官网(python.org) 下图为网站的主页,依次按顺序点击"①Download&quo ...

  7. Solution -「Gym 102759C」Economic One-way Roads

    \(\mathcal{Description}\)   Link.   给定一个含 \(n\) 个点 \(m\) 条边的简单无向图,每条边的两种定向方法各有权值,求使得图强连通且定向权值和最小的方法. ...

  8. Solution -「洛谷 P4389」付公主的背包

    \(\mathcal{Description}\)   Link.   容量为 \(n\),\(m\) 种物品的无限背包,求凑出每种容量的方案数,对 \(998244353\) 取模.   \(n,m ...

  9. c++ istream_iterator ostream_iterator

    istream_iterator/ostream_iterator void stream_iter_odd_even(const string &in_file, const string ...

  10. Spring Boot自动配置SpringMVC(二)

    Spring Boot自动配置SpringMVC(一) - 池塘里洗澡的鸭子 - 博客园 (cnblogs.com)讲述了关于DispatcherServlet注册到诸如tomcat容器中的自动配置过 ...