理解并手写 apply() 函数
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() 函数的更多相关文章
- 理解并手写 call() 函数
手写自己的call,我们要先通过call的使用,了解都需要完成些什么功能? call()进行了调用,是个方法,已知是建立在原型上的,使用了多个参数(绑定的对象+传递的参数). 我们把手写的函数起名为m ...
- 理解并手写 bind() 函数
有了对call().apply()的前提分析,相信bind()我们也可以手到擒来. 参考前两篇:'对call()函数的分析' 和 '对apply()函数的分析',我们可以先得到以下代码: Functi ...
- WPF启动流程-自己手写Main函数
WPF一般默认提供一个MainWindow窗体,并在App.Xaml中使用StartupUri标记启动该窗体.以下通过手写实现WPF的启动. 首先先介绍一下VS默认提供的App.Xaml的结构,如下图 ...
- 前端面试题整理——手写bind函数
var arr = [1,2,3,4,5] console.log(arr.slice(1,4)) console.log(arr) Function.prototype.bind1 = functi ...
- python 精华梳理(已理解并手写)--全是干货--已结
基础部分 map,reduce,filter,sort,推导式,匿名函数lambda , 协程,异步io,上下文管理 自定义字符串转数字方法一不使用reduce import re def str2i ...
- 手写bind函数
实现bind函数 参考MDN提供的Polyfill方案 Function.prototype.myBind = function(context){ //这里对调用者做一个判断,如果不是函数类型,直接 ...
- C++之手写strlen函数
代码: int strlen(const char *str){ assert(str!=NULL); intlen=; while((*str++)!='\0') len++; return len ...
- js面试题之手写节流函数和防抖函数
函数节流:不断触发一个函数后,执行第一次,只有大于设定的执行周期后才会执行第二次 /* 节流函数:fn:要被节流的函数,delay:规定的时间 */ function throttle(fn,dela ...
- 常见的JS手写函数汇总(代码注释、持续更新)
最近在复习面试中常见的JS手写函数,顺便进行代码注释和总结,方便自己回顾也加深记,内容也会陆陆续续进行补充和改善. 一.手写深拷贝 <script> const obj1 = { name ...
随机推荐
- MySQL不建议delete删除数据
InnoDB存储架构 从这张图可以看到,InnoDB存储结构主要包括两部分:逻辑存储结构和物理存储结构. 逻辑上是由表空间tablespace -> 段segment或者inode -> ...
- 统信UOS系统部署.Net Core 5.0
平时很少用Linux,需要的时候才查资料,记录下遇到的问题和解决办法.这次部署的系统是统信UOS,arm64位CPU 第一步:安装.Net Core 5.0运行环境 统信UOS是基于Debian 10 ...
- css自定义属性(css变量)
感谢原文作者:Kuku殿下 原文链接:https://segmentfault.com/a/1190000015948538 前言 刚开始的"css变量",经扩展之后,称为&quo ...
- 基于java处理.docx格式的word合并
如下实例是将 2.docx和3.docx合并,写到empty.docx中,不适用于.doc格式,public static void main(String[] args) { File file1 ...
- JAVA多线程学习七-线程池
为什么用线程池 1.创建/销毁线程伴随着系统开销,过于频繁的创建/销毁线程,会很大程度上影响处理效率 例如: 记创建线程消耗时间T1,执行任务消耗时间T2,销毁线程消耗时间T3 如果T1+T3> ...
- 长时间不操作Navicat或Putty会断线?
问题描述 今天发现只要一直不使用Putty,发现就会"卡住",还有Navicat连接数据库也有类似问题. 问题分析 Linux或者数据库都想节省连接资源呗. 问题解决 那就隔一段时 ...
- Docker容器之搭建本地私有仓库
Docker容器之搭建本地私有仓库 本地私有仓库搭建的具体步骤 首先下载 registry 镜像 docker pull registry 在 daemon.json 文件中添加私有镜像仓库的地址并重 ...
- TCP的报文详细解读
这张图好像挺有名的,其实一开始我看见的时候是一脸懵逼的,但是通过翻书(大学时代最害怕的计算机网络),查阅他人博客等等办法,最后终于有了一个系统的了解,当然,这里知识点多而杂,大家可以多看几遍,结合上面 ...
- linux_18
简述keepalived工作原理 编译安装haproxy 总结haproxy各调度算法的实现方式及其应用场景 使用haproxy的ACL实现基于文件后缀名的动静分离
- PHP面试常考之会话控制
你好,是我琉忆,欢迎您来到PHP面试专栏.本周(2019.2-25至3-1)的一三五更新的文章如下: 周一:PHP面试常考之会话控制周三:PHP面试常考之网络协议周五:PHP面试常考题之会话控制和网络 ...