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实现trim()的解决办法
Apr 16 Javascript
JavaScript fontsize方法入门实例(按照指定的尺寸来显示字符串)
Oct 17 Javascript
jQuery手动点击实现图片轮播特效
Apr 20 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
Sep 19 Javascript
JS实现的邮箱提示补全效果示例
Jan 30 Javascript
小程序实现展开/收起的效果示例
Sep 22 Javascript
Iview Table组件中各种组件扩展的使用
Oct 20 Javascript
微信小程序全局变量改变监听的实现方法
Jul 15 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
vue element-ui实现input输入框金额数字添加千分位
Dec 29 Javascript
JavaScript canvas实现雨滴特效
Jan 10 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 图片加水印与上传图片加水印php类
2010/05/12 PHP
yii框架配置默认controller和action示例
2014/04/30 PHP
centos+php+coreseek+sphinx+mysql之一coreseek安装篇
2016/10/25 PHP
PHP foreach遍历多维数组实现方式
2016/11/16 PHP
PHP使用new StdClass()创建空对象的方法分析
2017/06/06 PHP
jquery的颜色选择插件实例代码
2008/10/02 Javascript
jQuery 添加/移除CSS类实现代码
2010/02/11 Javascript
读取input:file的路径并显示本地图片的方法
2013/09/23 Javascript
深入理解JavaScript高级之词法作用域和作用域链
2013/12/10 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
使用Jquery实现每日签到功能
2015/04/03 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
Nodejs Stream 数据流使用手册
2016/04/17 NodeJs
jQuery Ajax 全局调用封装实例代码详解
2016/06/02 Javascript
JS FormData上传文件的设置方法
2017/07/05 Javascript
Vue单文件组件基础模板小结
2017/08/10 Javascript
微信小程序使用map组件实现路线规划功能示例
2019/01/22 Javascript
JS关闭子窗口并且刷新上一个窗口的实现示例
2020/03/10 Javascript
vue 点击其他区域关闭自定义div操作
2020/07/17 Javascript
[09:37]DOTA2卡尔工作室 英雄介绍圣堂刺客篇
2013/06/13 DOTA
python 连接各类主流数据库的实例代码
2018/01/30 Python
python实现合并多个list及合并多个django QuerySet的方法示例
2019/06/11 Python
Python flask框架post接口调用示例
2019/07/03 Python
django与vue的完美结合_实现前后端的分离开发之后在整合的方法
2019/08/12 Python
Flask项目中实现短信验证码和邮箱验证码功能
2019/12/05 Python
Python unittest discover批量执行代码实例
2020/09/08 Python
python 中 .py文件 转 .pyd文件的操作
2021/03/04 Python
YSL圣罗兰美妆俄罗斯官网:Yves Saint Lauret RU
2020/09/23 全球购物
优秀毕业生推荐信
2013/11/02 职场文书
日化店促销方案
2014/03/26 职场文书
年检委托书
2014/08/30 职场文书
计算机实训报告范文
2014/11/05 职场文书
2014保险公司个人工作总结
2014/12/09 职场文书
高三毕业感言
2015/07/30 职场文书
你有一份《诚信考试承诺书》待领取
2019/11/13 职场文书
Css预编语言及区别详解
2021/04/25 HTML / CSS