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中的事件
Sep 23 Javascript
用js实现多域名不同文件的调用方法
Jan 12 Javascript
javascript判断用户浏览器插件安装情况的代码
Jan 01 Javascript
推荐10个超棒的jQuery工具提示插件
Oct 11 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
Dec 15 Javascript
JS多物体实现缓冲运动效果示例
Dec 20 Javascript
javascript 正则表达式去空行方法
Jan 24 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
layui结合form,table的全选、反选v1.0示例讲解
Aug 15 Javascript
详解微信小程序的 request 封装示例
Aug 21 Javascript
解决vue v-for 遍历循环时key值报错的问题
Sep 06 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 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
PHP3 safe_mode 失效漏洞
2006/10/09 PHP
php+mysql 实现身份验证代码
2010/03/24 PHP
JavaScript 动态改变图片大小
2009/06/11 Javascript
JavaScript 面向对象编程(2) 定义类
2010/05/18 Javascript
IE6中使用position导致页面变形的解决方案(js代码)
2011/01/09 Javascript
js 分页全选或反选标识实现代码
2011/08/09 Javascript
jQuery中unbind()方法用法实例
2015/01/19 Javascript
DOM基础教程之使用DOM设置文本框
2015/01/20 Javascript
ES6中的数组扩展方法
2016/08/26 Javascript
JS与jQuery实现隔行变色的方法
2016/09/09 Javascript
Vue.js实现拖放效果的实例
2016/09/30 Javascript
javascript对浅拷贝和深拷贝的详解
2016/10/14 Javascript
大白话讲解JavaScript的Promise
2017/04/06 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
Node.js Express安装与使用教程
2018/05/11 Javascript
解决vue axios的封装 请求状态的错误提示问题
2018/09/25 Javascript
vue源码中的检测方法的实现
2019/09/26 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
vue2和vue3的v-if与v-for优先级对比学习
2020/10/10 Javascript
Python的函数嵌套的使用方法
2014/01/24 Python
python避免死锁方法实例分析
2015/06/04 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
Python实现统计给定字符串中重复模式最高子串功能示例
2018/05/16 Python
python检测主机的连通性并记录到文件的实例
2018/06/21 Python
python代码过长的换行方法
2018/07/19 Python
python程序变成软件的实操方法
2019/06/24 Python
群胜软件Java笔试题
2012/09/29 面试题
什么是Rollback Segment
2013/04/22 面试题
家长会主持词开场白
2014/03/18 职场文书
大学专科求职信
2014/07/02 职场文书
运动会加油稿100字
2014/09/19 职场文书
住房抵押登记委托书
2014/09/27 职场文书
2015年文明创建工作总结
2015/04/30 职场文书
2015年企业员工工作总结范文
2015/05/21 职场文书
go goroutine 怎样进行错误处理
2021/07/16 Golang
Redis实现主从复制方式(Master&Slave)
2022/06/21 Redis