彻底搞懂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 相关文章推荐
js模拟实现Array的sort方法
Dec 11 Javascript
探讨js中的双感叹号判断
Nov 11 Javascript
学习JavaScript设计模式(多态)
Nov 25 Javascript
jQuery ready()和onload的加载耗时分析
Sep 08 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
使用jQuery卸载全部事件的思路详解
Apr 03 jQuery
jQuery树插件zTree使用方法详解
May 02 jQuery
原生JS实现Ajax跨域请求flask响应内容
Oct 24 Javascript
vue2 全局变量的设置方法
Mar 09 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
JavaScript数组 几个常用方法总结
Nov 11 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
缓存技术详谈―php
2006/12/14 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
PHP APC的安装与使用详解
2013/06/13 PHP
php将数组存储为文本文件方法汇总
2015/10/28 PHP
PHP实现的策略模式简单示例
2017/08/25 PHP
JavaScript中的16进制字符(改进)
2011/11/21 Javascript
函数式 JavaScript(一)简介
2014/07/07 Javascript
json属性名为什么要双引号(个人猜测)
2014/07/31 Javascript
分享bootstrap学习笔记心得(组件及其属性)
2017/01/11 Javascript
详解Javascript百度地图接口开发文档中的类和方法
2017/02/07 Javascript
浅析JS中常用类型转换及运算符表达式
2017/07/23 Javascript
Express使用html模板的详细代码
2017/09/18 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
vue自定义组件(通过Vue.use()来使用)即install的用法说明
2020/08/11 Javascript
跟老齐学Python之一个免费的实验室
2014/09/14 Python
Python正则表达式如何进行字符串替换实例
2016/12/28 Python
Python设计实现的计算器功能完整实例
2017/08/18 Python
Django ORM框架的定时任务如何使用详解
2017/10/19 Python
将Python字符串生成PDF的实例代码详解
2019/05/17 Python
python的set处理二维数组转一维数组的方法示例
2019/05/31 Python
python处理document文档保留原样式
2019/09/23 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
基于python实现操作git过程代码解析
2020/07/27 Python
在canvas上实现元素图片镜像翻转动画效果的方法
2018/03/20 HTML / CSS
美国知名的时尚购物网站:Anthropologie
2016/12/22 全球购物
美国葡萄酒网上商店:Martha Stewart Wine Co.
2019/03/17 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
某公司C#程序员面试题笔试题
2014/05/26 面试题
母亲80寿诞答谢词
2014/01/16 职场文书
班长自荐书范文
2014/02/11 职场文书
大型会议策划方案
2014/05/17 职场文书
师德师风承诺书
2014/05/23 职场文书
银行求职自荐书
2014/06/25 职场文书
求职信内容一般写什么?
2015/03/20 职场文书
办公室日常管理制度
2015/08/04 职场文书
2016小学新学期寄语
2015/12/04 职场文书