JS中call()和apply()的功能及用法实例分析


Posted in Javascript onJune 28, 2019

本文实例讲述了JS中call()和apply()的功能及用法。分享给大家供大家参考,具体如下:

1.call()和apply()的作用

首先引出问题:用call()和apply()的目的是什么?

来看个例子,在javascript OOP中,我们经常会这样定义:

function cat(){
}
cat.prototype={
  food:"fish",
  say: function(){
    alert("I love "+this.food);
  }
}
var blackCat = new cat;
blackCat.say();

但是如果我们有一个对象whiteDog = {food:"bone"},我们不想对它重新定义say方法,那么我们可以通过call或apply用blackCat的say方法:blackCat.say.call(whiteDog);

所以,可以看出call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。

在实际中用的比较多的是,通过document.getElementsByTagName选择的dom 节点是一种类似array的对象。它不能应用Array下的push,pop等方法。我们可以通过:

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

这样domNodes就可以应用Array下的所有方法了。

2.call()和apply()的区别

首先apply的定义如下:

  • apply方法能劫持另外一个对象的方法,继承另外一个对象的属性
  • Function.apply(obj,args)方法能接收两个参数,第一个参数是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是数组,也可以是arguments对象
    • obj:这个对象将代替Function类里this对象
    • args:这个是数组,它将作为参数传给Function(args?>arguments)

apply()的用法

//定义一个人类
function Person(name,age){
  this.name = name;
  this.age = age;
}
//定义一个学生类
function Student(name,age,grade){
  Person.apply(this,arguments);//传入arguments对象
  //Person.apply(this,[num1,num2]);//传入数组
  this.grade = grade;
}
//创建一个学生类
var student = new Student('A','10','一年级');
//测试
console.log('name:'+student.name+'age:'+student.age+'grade:'+student.grade);

学生类里没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处。

分析:Person.apply(this,arguments);

  • this:代表的是student,表示将Person中的this指向student。
  • arguments:是一个数组,在例子中表示[‘A','10','一年级'];

通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就讲属性创建到了student对象里面.

apply()call()的作用是一样的,他们的区别仅在于接收参数的方式不同,call()需要把参数一个个列出来。

call()的用法

在Student函数里面可以将apply中修改成如下:

Person.call(this,name,age);

3.什么情况下用apply(),什么情况下用call()

至于是使用apply()还是call(),取决于采取那种给函数传递参数的方式最方便。

如果打算直接传入arguments对象,或者是数组,并且参数列表相同则使用apply();否则,选择call()可能更合适。

例:apply示例里面传递了参数arguments,并且在调用Person的时候参数的列表是对应一致的,也就是Person和Student的参数列表前两位是一致的,就可以采用apply。

如果我的Person的参数列表是这样的(age,name)而Student的参数列表是(name,age,grade),这样的就可以用call来实现了Person.call(this,age,name,grade);

关于apply()的应用可以参考://3water.com/article/164140.htm

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
javascript常用方法、属性集合及NodeList 和 HTMLCollection 的浏览器差异
Dec 25 Javascript
jQuery中:focus选择器用法实例
Dec 30 Javascript
js实现类似于add(1)(2)(3)调用方式的方法
Mar 04 Javascript
jQuery+canvas实现简单的球体斜抛及颜色动态变换效果
Jan 28 Javascript
jquery ztree实现模糊搜索功能
Feb 25 Javascript
15位和18位身份证JS校验的简单实例
Jul 18 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
Oct 19 jQuery
基于vue实现分页效果
Nov 06 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
解决vue打包css文件中背景图片的路径问题
Sep 03 Javascript
浅析Vue.js中v-bind v-model的使用和区别
Dec 04 Javascript
使用JavaScript获取扫码枪扫描得到的条形码的思路代码详解
Jun 10 Javascript
webpack4.0+vue2.0利用批处理生成前端单页或多页应用的方法
Jun 28 #Javascript
用Vue.js方法创建模板并使用多个模板合成
Jun 28 #Javascript
js实现随机数小游戏
Jun 28 #Javascript
Node爬取大批量文件的方法示例
Jun 28 #Javascript
JavaScript实现单英文金山打字通
Jul 24 #Javascript
javascript实现导航栏分页效果
Jun 27 #Javascript
编写更好的JavaScript条件式和匹配条件的技巧(小结)
Jun 27 #Javascript
You might like
将酷狗krc歌词解析并转换为lrc歌词php源码
2014/06/20 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
PHP工程师VIM配置分享
2015/12/15 PHP
几个javascript操作word的参考代码
2009/10/26 Javascript
传智播客学习之JavaScript基础篇
2009/11/13 Javascript
JavaScript 语言的递归编程
2010/05/18 Javascript
下载文件个别浏览器文件名乱码解决办法
2013/03/19 Javascript
各种页面定时跳转(倒计时跳转)代码总结
2013/10/24 Javascript
jquery easyui combox一些实用的小方法
2013/12/25 Javascript
jquery遍历select元素(实例讲解)
2013/12/31 Javascript
js通过更改按钮的显示样式实现按钮的滑动效果
2014/04/23 Javascript
JavaScript常用验证函数实例汇总
2014/11/25 Javascript
node.js中的console.error方法使用说明
2014/12/10 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
详解使用grunt完成requirejs的合并压缩和js文件的版本控制
2017/03/02 Javascript
仿ElementUI实现一个Form表单的实现代码
2019/04/23 Javascript
解决 viewer.js 动态更新图片导致无法预览的问题
2019/05/14 Javascript
NodeJs 模仿SIP话机注册的方法
2019/06/21 NodeJs
js实现掷骰子小游戏
2019/10/24 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
2021/02/05 Javascript
Python守护进程(daemon)代码实例
2015/03/06 Python
Python下使用Psyco模块优化运行速度
2015/04/05 Python
Python查询阿里巴巴关键字排名的方法
2015/07/08 Python
Python实现通过文件路径获取文件hash值的方法
2017/04/29 Python
详解python中asyncio模块
2018/03/03 Python
在notepad++中实现直接运行python代码
2019/12/18 Python
python如何获得list或numpy数组中最大元素对应的索引
2020/11/16 Python
Python3自带工具2to3.py 转换 Python2.x 代码到Python3的操作
2021/03/03 Python
党员组织关系介绍信
2014/02/13 职场文书
创新社会管理心得体会
2014/09/12 职场文书
预备党员党支部意见
2015/06/02 职场文书
《葡萄沟》教学反思
2016/02/23 职场文书
优秀的商业计划书,让融资一步到位
2019/05/07 职场文书
PHP遍历数组的6种方式总结
2021/11/17 PHP
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
MySQL磁盘碎片整理实例演示
2022/04/03 MySQL