优雅的理解 call 和 apply 的使用方法
作者在看到一篇优雅的使用 js 的各种方法解决算法的时候产生的疑问,到底什么时候使用 apply 和 call 啦?
每次看到别人用 apply 和 call 其实从以前的懵懵懂懂到现在的明白,但是自己从来未下手去用过,最近比较闲。开始打一下 JavaScript 的算法基础,刷一下简单的算法题目。然后从自己拙劣的解题思路和方法比较大牛的优雅的JavaScript的方法后有所感想。
先来看一个?栗子
Q:将数组 arr 中的元素作为调用函数 fn 的参数
这里面涉及几个知识点,函数调用的方法,apply 和 call 的使用。
- 创建函数
function argsAsArray(fn, arr) {// code here
}
复制代码
- 输入
argsAsArray(function (greeting, name, punctuation) {return greeting + ', ' + name + (punctuation || '!');}, ['Hello', 'Ellie', '!']
)
复制代码
- 输出
Hello, Ellie!
复制代码
看完上面的题目,大家知道怎么解题吗?(答案在本文最后)如果你想到了 apply 和 call,那么恭喜你,基础扎实,然后就是对 call 和 apply 的基本了解和掌握了。看下面?
怎么理解 apply 和 call
- 第一步:看看 MDN 的解释
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/apply
- 第二步:跟着我看一个 demo
function cat(){};cat.prototype = {obj:"fish",say:function(){return "I love" + this.obj;}
}function doggie(){};doggie.prototype = {obj:"bone",eat:function(){return "I love" + this.obj;}
}function ATM(){};ATM.prototype = {obj:"monster",fight:function(){return "I love" + this.obj;}
}复制代码
- 上面的理解?:猫吃鱼,狗吃肉(骨头),奥特曼爱打小怪兽。
突然有一天:
- 有天狗想吃鱼了
cat.say.call(doggie,cat.obj)
//猫.吃鱼.call(狗,鱼)//狗就吃到鱼了复制代码
- 猫成精了,想打怪兽
ATM.fight.call(cat,ATM.obj)//奥特曼.打小怪兽.call(猫,小怪兽)复制代码
就这样记住了。
来训练一下实战怎么优雅(强行)的用上 apply 和 call
- Q:删除数组 arr 最后一个元素。不要直接修改数组 arr,结果返回新的数组
- 输入 : [1,2,3,4]
- 输出 : [1,2,3]
很简单对不对,不删除原来的数组,我们 clone 一个数组。然后使用 JavaScript 自带的数组方法 pop() 就行了。
- 解法一
function truncate(arr) {var newArr = arr.slice(0);// slice(0) 复制数组newArr.pop();return newArr;
}复制代码
当然你可以优雅的使用 slice 来搞定
- 解法二
function truncate(arr) {return arr.slice(0,-1);
}复制代码
现在问题来了,我们要用 apply 来搞定问题咋办啦?(实现一个数组 copy)
还是创建一个新的数组,我们明白了凹凸曼和小猫小狗的用法以后,我们将 newArr 借用 [] 数组的 push 方法,对象是 arr,而达到 copy 一个数组的功能。
function truncate(arr) {var newArr=[];[].push.apply(newArr, arr);newArr.pop();return newArr;
}
复制代码
当然有很多可供实现的 apply 的使用情况,可能我这个不是很确切,大家可以鞭策一下,共同学习和理解
A(最开始题目的答案)
function argsAsArray(fn, arr) {return fn.apply(this,arr);
}
复制代码
这里解释两个点
- 一,调用函数有几种方法?
- 直接调用: obj.func()
- call: func.call(obj,arg) // 列出参数
- apply: func.apply(obj,[a,b,c,...]) // 列出数组
- 二,call 和 apply 的区别
- 般情况下都是对象调用函数,但此处是函数调用数组对象,用call(), apply()。第一个参数是传给当前函数对象。但是call()需要将参数挨个列出,apply直接传入数组对象。
优雅的理解 call 和 apply 的使用方法相关推荐
- 深入理解call、apply、bind(改变函数中的this指向)
在JavaScript中call.apply.bind是Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这三个方法进行 ...
- 理解 call、apply、bind 原理,手写简单的 call、apply、bind 方法
理解 call.apply.bind 原理,手写简单的 call.apply.bind 方法 call 原理及实现 MDN定义:call()方法使用给定的 this 值和单独提供的参数调用函数. 用自 ...
- groupby+(apply+agg+transform)方法的比较
groupby+(apply+agg+transform)方法的比较 分组函数groupby+(apply+agg+transform)方法的比较 pandas模块给数据处理的能力给予了很大的助力,但 ...
- JS中的call、apply、bind方法详解
bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...
- dataframe 一列的不同值_pandas | 详解DataFrame中的apply与applymap方法
点击上方蓝字,关注并星标,和我一起学技术. 今天是pandas数据处理专题的第5篇文章,我们来聊聊pandas的一些高级运算. 在上一篇文章当中,我们介绍了panads的一些计算方法,比如两个data ...
- 关于javascript中apply()和call()方法
ref:http://www.popo4j.com/article/the-differences-of-apply-and-call.html 如果没接触过动态语言,以编译型语言的思维方式去理解ja ...
- apply和call方法
正在找工作,马上要毕业了.在补充js基础方法. 参考博客:http://blog.csdn.net/myhahaxiao/article/details/6952321 这篇博客主要解决三个问题: 1 ...
- 转载 SharedPreference.Editor的apply和commit方法异同
转载别人的转载:https://blog.csdn.net/jake9602/article/details/18414841 在android 中存储数据时经常用SharedPreference, ...
- 总结apply和call方法的使用 bind方法 bind方法的使用 函数中的几个成员
总结apply和call方法的使用 <!DOCTYPE html> <html lang="en"> <head><meta charse ...
最新文章
- 在cuDNN中简化Tensor Ops
- crt mysql中文乱码_CRT 和mysql 中文乱码解决方式
- gel和react哪个厉害_gel、react、boost三种材料的跑鞋,哪个更强?
- 【测试点分析】1081 检查密码 (15分)
- linux 命令整理(持续更新)
- 『数据库』朴实无华且枯燥的数据库文章--关系数据理论
- .net core实现跨域
- 315曝光不良奸商 对企业不能罚酒三杯
- 微软发布PowerShell Core第一个版本:支持多平台开发
- perl学习之:编译、执行与内存关系(转)
- 是按压还是触摸_一文读懂,选联想还是华为?Matebook 14锐龙版和YOGA 14s、小新Pro13怎么选?...
- 设置Android客户端进入时的随机欢迎语
- unity, sceneview 中拾取球体gizmos
- Install Python 3.6 on Ubuntu 16.04, from source
- 【转载】TCP拥塞控制算法 优缺点 适用环境 性能分析
- 机器闹乌龙?Amphetamine 险遭苹果下架
- 推荐几个漂亮实用的JS菜单
- ROS系统学习9---节点间的内存共享(中级篇)---图像收发
- 伺服驱动器方案,迈信ep100 成熟方案STM32源码
- amos里CFA可行性辨别结果怎么看_本科毕业论文做问卷和数据分析应该怎么着手?(1)...
热门文章
- python分块处理功能_Python-numpy实现灰度图像的分块和合并方式
- python数据库安装教程_python MySQLdb Windows下安装教程及问题解决方法
- vue实例没有挂载到html上,vue 源码学习 - 实例挂载
- 【资源分享】The Beatles(披头士)乐队所有专辑带封面
- Solr 中遇到的问题
- php 贝瑟尔曲线,贝塞尔曲线的应用详解
- python读取数据校验数据_Python通过Schema实现数据验证方式
- 基于安卓的考试系统_基于安卓11定制!华为最新手机系统曝光:体验堪比苹果iOS!...
- a标签怎么传参_jsp页面中怎么利用a标签的href进行传递参数以及需要注意的地方...
- 小程序云开发数据库在网站读取