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 相关文章推荐
jquery 插件 任意位置浮动固定层
Dec 25 Javascript
常用的JavaScript验证正则表达式汇总
Nov 26 Javascript
JQuery查找DOM节点的方法
Jun 11 Javascript
微信小程序  modal弹框组件详解
Oct 27 Javascript
javascript事件的传播基础实例讲解(35)
Feb 14 Javascript
bootstrap中添加额外的图标实例代码
Feb 15 Javascript
基于vue.js快速搭建图书管理平台
Oct 29 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
基于element-ui组件手动实现单选和上传功能
Dec 06 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
浅谈vue中get请求解决传输数据是数组格式的问题
Aug 03 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
S900/ ETON E1-XM 收音机
2021/03/02 无线电
PHP 得到根目录的 __FILE__ 常量
2008/07/23 PHP
php 文件上传系统手记
2009/10/26 PHP
php提交表单发送邮件的方法
2015/03/20 PHP
php微信公众账号开发之前五个坑(一)
2016/09/18 PHP
Linux平台PHP5.4设置FPM线程数量的方法
2016/11/09 PHP
PHP二维数组去重实例分析
2016/11/18 PHP
jQuery Validation插件remote验证方式的Bug解决
2010/07/01 Javascript
firefox事件处理之自动查找event的函数(用于onclick=foo())
2010/08/05 Javascript
JavaScript 获取当前时间戳的代码
2010/08/05 Javascript
Javascript的各种节点操作实例演示代码
2012/06/27 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
php与js的区别是什么
2013/08/05 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
jquery层级选择器(匹配父元素下的子元素实现代码)
2016/09/05 Javascript
基于jQuery实现滚动切换效果
2016/12/02 Javascript
微信小程序 标签传入数据
2017/05/08 Javascript
React如何将组件渲染到指定DOM节点详解
2017/09/08 Javascript
angularjs结合html5实现拖拽功能
2018/06/25 Javascript
react用Redux中央仓库实现一个todolist
2019/09/29 Javascript
Vue js with语句原理及用法解析
2020/09/03 Javascript
Python中Django 后台自定义表单控件
2017/03/28 Python
用TensorFlow实现lasso回归和岭回归算法的示例
2018/05/02 Python
Python实用技巧之利用元组代替字典并为元组元素命名
2018/07/11 Python
通过 Django Pagination 实现简单分页功能
2019/11/11 Python
Python函数生成器原理及使用详解
2020/03/12 Python
浅谈css3中的前缀
2016/07/20 HTML / CSS
如何判断一段程序是由C 编译程序还是由C++编译程序编译的
2013/08/04 面试题
加拿大留学自荐信
2014/01/28 职场文书
《钱学森》听课反思
2014/03/01 职场文书
葬礼司仪主持词
2014/03/31 职场文书
小学绿色学校申报材料
2014/08/23 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
学生上课迟到检讨书
2015/01/01 职场文书
MySQL Shell的介绍以及安装
2021/04/24 MySQL
bose降噪耳机音能消除人声吗
2022/04/19 数码科技