彻底搞懂JavaScript中的apply和call方法(必看)


Posted in Javascript onSeptember 18, 2017

call和apply都是为了改变某个函数运行的context上下文而存在的,即为了改变函数体内部this的指向。因为JavaScript的函数存在定义上下文和运行时上下文以及上下文是可以改变的概念。

回到目录定义

fun.apply(thisArg, [argsArray])
fun.call(thisArg, arg1,arg2, ...)

其中thisArg可以为null或undefined,此时表示全局对象,更详细见MDN:apply()、call()

二者的作用完全一样,只是接受参数的方式不太一样。例如,有一个函数定义如下:

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

可以通过func1.call(this, arg1, arg2);或者func1.apply(this, [arg1, arg2])来调用。其中this是你想指定的上下文,它可以是任意一个JavaScript对象(JavaScript一切皆对象),call需要把参数传递进去,而apply则把参数放在数组里。

因为在JavaScript中,某个函数的参数数量是不固定的,当你的参数明确知道数量时,用call,而不确定的时候用apply,然后把参数push进数组传递进去。当参数数量不确定时,函数内部也可以通过arguments这个数组来遍历所有的参数。

回到目录一个例子

在JavaScript OOP中,我们经常会这样定义:

funciton programmer() {
}

programmer.prototype = {
  hobby: 'programming',
  say.function() {
    alert('I love' + this.hobby);
  }
}

var xiaoMing = new programmer();
xiaoMing.say();

此时如果我们有一个设计妹子对象xiaoHua = {hobby: 'designing'};我们不想对它重新定义say方法,那么我们可以通过call或apply使用xiaoMing的say方法:xiaoMing.say.call(xiaoHua)。

由此可看出,call和apply都是为了动态改变this而出现的,当一个object没有某个方法或属性时,但是其他的对象有,则可以借助call或apply来使用其他对象的方法来操作。

obj.call(thisObj, arg1, arg2, ...);
obj.apply(thisObj, [arg1, arg2, ...]);

两者都是把obj(即this)绑定到thisObj,这时候thisObj具备(或继承)了obj的属性和方法

其中比较常见的,通过document.getElementByTagName选择的节点是一种类数组,它不能应用Array下的push,pop等方法。但我们可以通过:

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

Array.prototype.slice.call能所有具有length属性的对象转为数组,这样domNodes就可以应用Array下的所有方法了。

以上这篇彻底搞懂JavaScript中的apply和call方法(必看)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript是否可实现多线程  深入理解JavaScript定时机制
Dec 22 Javascript
File, FileReader 和 Ajax 文件上传实例分析(php)
Apr 27 Javascript
Javascript中的arguments对象
Jun 20 Javascript
全面理解闭包机制
Jul 11 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
javascript 定时器工作原理分析
Dec 03 Javascript
JavaScript实现一个空中避难的小游戏
Jun 06 Javascript
Bootstrap Table使用整理(一)
Jun 09 Javascript
Vue修改mint-ui默认样式的方法
Feb 03 Javascript
layui--select使用以及下拉框实现键盘选择的例子
Sep 24 Javascript
Javascript如何实现双指控制图片功能
Feb 25 Javascript
Element-ui 自带的两种远程搜索(模糊查询)用法讲解
Jan 29 Javascript
angularjs实现猜数字大小功能
May 20 #Javascript
angular指令笔记ng-options的使用方法
Sep 18 #Javascript
jQuery UI 实例讲解 - 日期选择器(Datepicker)
Sep 18 #jQuery
javascript  删除select中的所有option的实例
Sep 17 #Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 #Javascript
浅谈函数调用的不同方式,以及this的指向
Sep 17 #Javascript
基于Bootstrap框架菜鸟入门教程(推荐)
Sep 17 #Javascript
You might like
全国FM电台频率大全 - 7 吉林省
2020/03/11 无线电
PHP处理Oracle的CLOB实例
2014/11/03 PHP
PHP中通过trigger_error触发PHP错误示例
2015/06/23 PHP
Yii2.0中使用js异步删除示例
2017/03/10 PHP
php数据库的增删改查 php与javascript之间的交互
2017/08/31 PHP
为调试JavaScript添加输出窗口的代码
2010/02/07 Javascript
jQuery插件开发全解析
2012/10/10 Javascript
javascript中window.event事件用法详解
2012/12/11 Javascript
通过JS动态创建一个html DOM元素并显示
2014/10/15 Javascript
jQuery延迟加载图片插件Lazy Load使用指南
2015/03/25 Javascript
javascript制作幻灯片(360度全景图片)
2015/07/28 Javascript
多个js毫秒倒计时同时进行效果
2016/01/05 Javascript
基于JavaScript实现动态添加删除表格的行
2016/02/01 Javascript
js实现页面跳转的几种方法小结
2016/05/16 Javascript
微信小程序使用Socket的实例
2017/09/19 Javascript
Vue组件之全局组件与局部组件的使用详解
2017/10/09 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
2018/03/21 Javascript
如何解决vue2.0下IE浏览器白屏问题
2018/09/13 Javascript
VUE2.0 ElementUI2.0表格el-table自适应高度的实现方法
2018/11/28 Javascript
微信小程序常见页面跳转操作简单示例
2019/05/01 Javascript
Vue替代marquee标签超出宽度文字横向滚动效果
2019/12/09 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
浅谈vue 二级路由嵌套和二级路由高亮问题
2020/08/06 Javascript
python smtplib模块发送SSL/TLS安全邮件实例
2015/04/08 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
python实现判断一个字符串是否是合法IP地址的示例
2018/06/04 Python
python实现K近邻回归,采用等权重和不等权重的方法
2019/01/23 Python
python opencv将图片转为灰度图的方法示例
2019/07/31 Python
如何利用python生成MD5并去重
2020/12/07 Python
两则小学生的自我评价分享
2013/11/14 职场文书
孝敬父母的活动方案
2014/08/31 职场文书
信用卡工作证明模板
2014/09/14 职场文书
大班上学期个人总结
2015/02/13 职场文书
坚持不是死撑,更重要的是心态
2019/08/19 职场文书
python数据分析之用sklearn预测糖尿病
2021/04/22 Python
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/06 PostgreSQL