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 相关文章推荐
一款JavaScript压缩工具:X2JSCompactor
Jun 13 Javascript
javascript简单事件处理和with用法介绍
Sep 16 Javascript
HTML,CSS,JavaScript速查表推荐
Dec 02 Javascript
JavaScript结合Bootstrap仿微信后台多图文界面管理
Jul 22 Javascript
Jquery表单验证失败后不提交的解决方法
Oct 18 Javascript
深入理解Angularjs向指令传递数据双向绑定机制
Dec 31 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
Feb 09 Javascript
Koa 使用小技巧(小结)
Oct 22 Javascript
Vue项目总结之webpack常规打包优化方案
Jun 06 Javascript
vue element-ui table组件动态生成表头和数据并修改单元格格式 父子组件通信
Aug 15 Javascript
Angular6项目打包优化的实现方法
Dec 15 Javascript
js键盘事件实现人物的行走
Jan 17 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
用ADODB来让PHP操作ACCESS数据库的方法
2006/12/31 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
浅析PHP文件下载原理
2014/12/25 PHP
thinkphp5框架前后端分离项目实现分页功能的方法分析
2019/10/08 PHP
Extjs入门之动态加载树代码
2010/04/09 Javascript
入门基础学习 ExtJS笔记(一)
2010/11/11 Javascript
JAVASCRIPT车架号识别/验证函数代码 汽车车架号验证程序
2012/01/08 Javascript
js中点击空白区域时文本框与隐藏层的显示与影藏问题
2013/08/26 Javascript
基于JQuery实现滚动到页面底端时自动加载更多信息
2014/01/31 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
Jquery Ajax xmlhttp请求成功问题
2015/02/04 Javascript
使用AngularJS处理单选框和复选框的简单方法
2015/06/19 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
使用jquery+CSS3实现仿windows10开始菜单的下拉导航菜单特效
2015/09/24 Javascript
jQuery插件实现表格隔行变色及鼠标滑过高亮显示效果代码
2016/02/25 Javascript
深入浅析JavaScript中的作用域和上下文
2016/03/26 Javascript
实例解析angularjs的filter过滤器
2016/12/14 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Python爬虫文件下载图文教程
2018/12/23 Python
基于PyQt4和PySide实现输入对话框效果
2019/02/27 Python
python中删除某个元素的方法解析
2019/11/05 Python
python百行代码自制电脑端网速悬浮窗的实现
2020/05/12 Python
scrapy实践之翻页爬取的实现
2021/01/05 Python
如何让pre和textarea等HTML元素去掉滚动条自动换行自适应文本内容高度
2019/08/01 HTML / CSS
美国半成品食材配送服务商:Home Chef
2018/01/25 全球购物
戴尔美国官方折扣店:Dell Outlet
2018/02/13 全球购物
我看到了用指针调用函数的不同语法形式
2014/07/16 面试题
UDP协议功能
2013/01/06 面试题
教育孩子心得体会
2014/01/01 职场文书
支教自我鉴定
2014/01/18 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
财务出纳岗位职责
2015/03/31 职场文书
Java 中的 Unsafe 魔法类的作用大全
2021/06/26 Java/Android
解决MySQL Varchar 类型尾部空格的问题
2022/04/06 MySQL