Javascript call及apply应用场景及实例


Posted in Javascript onAugust 26, 2020

一、作用及应用场景

call和apply是Function的方法,他的第一个参数是this,第二个是Function的参数。call 和 apply 都是为了改变某个函数运行时的 context 即上下文而存在的,换句话说,就是为了改变函数体内部 this 的指向。因为 JavaScript 的函数存在「定义时上下文」和「运行时上下文」以及「上下文是可以改变的」这样的概念。二者的作用完全一样,只是接受参数的方式不太一样。

call 需要把参数按顺序传递进去,而 apply 则是把参数放在数组里。

例如,有一个函数 func1 定义如下:

var func1 = function(arg1, arg2) {};

就可以通过 func1.call(this, arg1, arg2); 或者 func1.apply(this, [arg1, arg2]); 来调用。其中 this 是你想指定的上下文,他可以任何一个 JavaScript 对象(JavaScript 中一切皆对象)。

JavaScript 中,某个函数的参数数量是不固定的,因此要说适用条件的话,当你的参数是明确知道数量时,用 call,而不确定的时候,用 apply,然后把参数 push 进数组传递进去。当参数数量不确定时,函数内部也可以通过 arguments 这个数组来便利所有的参数。

二、存在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。它不能应用Array下的push,pop等方法。我们可以通过:

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

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

三、例子

call中的第一个参数用于指定将要调用此函数的对象,例子中changeStyle函数将被box对象调用,this指向了box对象。

function changeStyle(attr, value){
  this.style[attr] = value;
}
var box = document.getElementById('box');
window.changeStyle.call(box, "height", "200px");

Javascript call及apply应用场景及实例

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS注册/移除事件处理程序(ExtJS应用程序设计实战)
May 07 Javascript
jquery实现div拖拽宽度示例代码
Jul 31 Javascript
浮动的div自适应居中显示的js代码
Dec 23 Javascript
JavaScript中isPrototypeOf函数作用和使用实例
Jun 01 Javascript
浅谈javascript中的DOM方法
Jul 16 Javascript
jQuery实现对无序列表的排序功能(附demo源码下载)
Jun 25 Javascript
Angularjs实现mvvm式的选项卡示例代码
Sep 08 Javascript
基于Node.js的WebSocket通信实现
Mar 11 Javascript
angular4强制刷新视图的方法
Oct 09 Javascript
layui表格数据复选框回显设置方法
Sep 13 Javascript
纯js+css实现仿移动端淘宝网站的弹出详情框功能
Dec 29 Javascript
Javascript异步编程async实现过程详解
Apr 02 Javascript
Javascript类型判断相关例题及解析
Aug 26 #Javascript
Javascript基于OOP实实现探测器功能代码实例
Aug 26 #Javascript
Javascript如何实现扩充基本类型
Aug 26 #Javascript
Javascript var变量删除原理及实现
Aug 26 #Javascript
js实现车辆管理系统
Aug 26 #Javascript
js实现飞机大战小游戏
Aug 26 #Javascript
JS面向对象实现飞机大战
Aug 26 #Javascript
You might like
数据库查询记录php 多行多列显示
2009/08/15 PHP
基于initPHP的框架介绍
2013/04/18 PHP
php float不四舍五入截取浮点型字符串方法总结
2013/10/28 PHP
php编写的一个E-mail验证类
2015/03/25 PHP
原生PHP实现导出csv格式Excel文件的方法示例【附源码下载】
2019/03/07 PHP
JavaScript 验证浏览器是否支持javascript的方法小结
2009/05/17 Javascript
浅谈Javascript事件模拟
2012/06/27 Javascript
artDialog双击会关闭对话框的修改过程分享
2013/08/05 Javascript
jquery通过a标签删除table中的一行的代码
2013/12/02 Javascript
验证控件与Button的OnClientClick事件详细解析
2013/12/04 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
jQuery File Upload文件上传插件使用详解
2016/12/06 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
select2 ajax 设置默认值,初始值的方法
2018/08/09 Javascript
简单了解node npm cnpm的具体使用方法
2019/02/27 Javascript
Vue批量图片显示时遇到的路径被解析问题
2019/03/28 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
Vue Cli3 打包配置并自动忽略console.log语句的方法
2020/04/23 Javascript
[43:43]完美世界DOTA2联赛PWL S2 LBZS vs Forest 第三场 11.29
2020/12/02 DOTA
Python中logging模块的用法实例
2014/09/29 Python
详解python进行mp3格式判断
2016/12/23 Python
在Python的一段程序中如何使用多次事件循环详解
2017/09/07 Python
解决pyqt5中QToolButton无法使用的问题
2019/06/21 Python
Python Django模板之模板过滤器与自定义模板过滤器示例
2019/10/18 Python
django Layui界面点击弹出对话框并请求逻辑生成分页的动态表格实例
2020/05/12 Python
python -v 报错问题的解决方法
2020/09/15 Python
Tessabit美国:集世界奢侈品和设计师品牌的意大利精品买手店
2020/06/29 全球购物
区域总监的岗位职责
2013/11/21 职场文书
生产副总岗位职责
2013/11/28 职场文书
服装设计专业毕业生求职信
2014/04/09 职场文书
司法建议书范文
2014/05/13 职场文书
三提三创主题教育活动查摆整改措施
2014/10/25 职场文书
爱国电影观后感
2015/06/19 职场文书
Django + Taro 前后端分离项目实现企业微信登录功能
2022/04/07 Python