• 作者在看到一篇优雅的使用 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 的使用方法相关推荐

  1. 深入理解call、apply、bind(改变函数中的this指向)

    在JavaScript中call.apply.bind是Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这三个方法进行 ...

  2. 理解 call、apply、bind 原理,手写简单的 call、apply、bind 方法

    理解 call.apply.bind 原理,手写简单的 call.apply.bind 方法 call 原理及实现 MDN定义:call()方法使用给定的 this 值和单独提供的参数调用函数. 用自 ...

  3. groupby+(apply+agg+transform)方法的比较

    groupby+(apply+agg+transform)方法的比较 分组函数groupby+(apply+agg+transform)方法的比较 pandas模块给数据处理的能力给予了很大的助力,但 ...

  4. JS中的call、apply、bind方法详解

    bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...

  5. dataframe 一列的不同值_pandas | 详解DataFrame中的apply与applymap方法

    点击上方蓝字,关注并星标,和我一起学技术. 今天是pandas数据处理专题的第5篇文章,我们来聊聊pandas的一些高级运算. 在上一篇文章当中,我们介绍了panads的一些计算方法,比如两个data ...

  6. 关于javascript中apply()和call()方法

    ref:http://www.popo4j.com/article/the-differences-of-apply-and-call.html 如果没接触过动态语言,以编译型语言的思维方式去理解ja ...

  7. apply和call方法

    正在找工作,马上要毕业了.在补充js基础方法. 参考博客:http://blog.csdn.net/myhahaxiao/article/details/6952321 这篇博客主要解决三个问题: 1 ...

  8. 转载 SharedPreference.Editor的apply和commit方法异同

    转载别人的转载:https://blog.csdn.net/jake9602/article/details/18414841 在android 中存储数据时经常用SharedPreference, ...

  9. 总结apply和call方法的使用 bind方法 bind方法的使用 函数中的几个成员

    总结apply和call方法的使用 <!DOCTYPE html> <html lang="en"> <head><meta charse ...

最新文章

  1. 在cuDNN中简化Tensor Ops
  2. crt mysql中文乱码_CRT 和mysql 中文乱码解决方式
  3. gel和react哪个厉害_gel、react、boost三种材料的跑鞋,哪个更强?
  4. 【测试点分析】1081 检查密码 (15分)
  5. linux 命令整理(持续更新)
  6. 『数据库』朴实无华且枯燥的数据库文章--关系数据理论
  7. .net core实现跨域
  8. 315曝光不良奸商 对企业不能罚酒三杯
  9. 微软发布PowerShell Core第一个版本:支持多平台开发
  10. perl学习之:编译、执行与内存关系(转)
  11. 是按压还是触摸_一文读懂,选联想还是华为?Matebook 14锐龙版和YOGA 14s、小新Pro13怎么选?...
  12. 设置Android客户端进入时的随机欢迎语
  13. unity, sceneview 中拾取球体gizmos
  14. Install Python 3.6 on Ubuntu 16.04, from source
  15. 【转载】TCP拥塞控制算法 优缺点 适用环境 性能分析
  16. 机器闹乌龙?Amphetamine 险遭苹果下架
  17. 推荐几个漂亮实用的JS菜单
  18. ROS系统学习9---节点间的内存共享(中级篇)---图像收发
  19. 伺服驱动器方案,迈信ep100 成熟方案STM32源码
  20. amos里CFA可行性辨别结果怎么看_本科毕业论文做问卷和数据分析应该怎么着手?(1)...

热门文章

  1. python分块处理功能_Python-numpy实现灰度图像的分块和合并方式
  2. python数据库安装教程_python MySQLdb Windows下安装教程及问题解决方法
  3. vue实例没有挂载到html上,vue 源码学习 - 实例挂载
  4. 【资源分享】The Beatles(披头士)乐队所有专辑带封面
  5. Solr 中遇到的问题
  6. php 贝瑟尔曲线,贝塞尔曲线的应用详解
  7. python读取数据校验数据_Python通过Schema实现数据验证方式
  8. 基于安卓的考试系统_基于安卓11定制!华为最新手机系统曝光:体验堪比苹果iOS!...
  9. a标签怎么传参_jsp页面中怎么利用a标签的href进行传递参数以及需要注意的地方...
  10. 小程序云开发数据库在网站读取