js中apply与call简单用法详解


Posted in Javascript onNovember 06, 2017

你可以直接看例子,也可以先读一下介绍:

call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。

call, apply都属于Function.prototype的一个方法,它是JavaScript引擎内在实现的,因为属于Function.prototype,所以每个Function对象实例,也就是每个方法都有call, apply属性.既然作为方法的属性,那它们的使用就当然是针对方法的了.这两个方法是容易混淆的,因为它们的作用一样,只是使用方式不同.
从上面可以得出 call, apply 是给方法使用的,为了改变调用该方法的 this指针

简单例子:

call

function A() {
  this.getName = function (xx) {
    return xx;
  }
}

function B() {

}

var a = new A();
console.log( a.getName('i am A') ); //i am A

var b = new B() ;
console.log( a.getName.call(b,'i am B') ); // i am B

B 函数中没有 任何方法 , A 函数有个 getName() 方法 ,a.getName() 自然成立 ,但 B 也要使用 getName() 的方法怎么办呢 ? 那就用 call(this,'参数') !!

可以 再理解一下这句话 -- 我们可以借助call或apply调用其它对象的方法来操作,call和apply是为了动态改变this而出现的 ,本来 a.getName() 的 this 指向 a, call 动态的 把 this 指向了 b ,变成了 b.getName()

apply

apply 与 call 只是参数的使用不同而已

function A() {
  this.sun = function (a ,b) {
    return a+b;
  }
}

function B() {

}

var a = new A();
console.log( a.sun(1,2) ); //3

var b = new B() ;
console.log( a.sun.call(b,2,2) ); // 4

console.log( a.sun.apply(b,[3, 3]) ); //6

call和apply一般使用情况

用的比较多的,通过document.getElementsByTagName选择的dom 节点是一种类似array的array。它不能应用Array下的push,pop等方法。我们可以通过:

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

这样domNodes就可以应用Array下的所有方法了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jqPlot Option配置对象详解
Jul 25 Javascript
EASYUI TREEGRID异步加载数据实现方法
Aug 22 Javascript
JavaScript中DOM详解
Apr 13 Javascript
javascript事件冒泡实例分析
May 13 Javascript
jQuery实现进度条效果代码
Dec 17 Javascript
JS工作中的小贴士之”闭包“与事件委托的”阻止冒泡“
Jun 16 Javascript
微信小程序 wx:key详细介绍
Oct 28 Javascript
Angular2学习教程之TemplateRef和ViewContainerRef详解
May 25 Javascript
js 获取元素的具体样式信息getcss(实例讲解)
Jul 05 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
Nov 09 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
在Vue中使用icon 字体图标的方法
Jun 14 Javascript
js实现简单数字变动效果
Nov 06 #Javascript
利用百度地图API获取当前位置信息的实例
Nov 06 #Javascript
原生js封装添加class,删除class的实例
Nov 06 #Javascript
Node.js实现发送邮件功能
Nov 06 #Javascript
快速搭建React的环境步骤详解
Nov 06 #Javascript
基于Two.js实现星球环绕动画效果的示例
Nov 06 #Javascript
two.js之实现动画效果示例
Nov 06 #Javascript
You might like
PHP 安全检测代码片段(分享)
2013/07/05 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
thinkPHP中volist标签用法示例
2016/12/06 PHP
PHP实现动态压缩js与css文件的方法
2018/05/02 PHP
PHP封装的数据库模型Model类完整示例【基于PDO】
2019/03/14 PHP
IE JS无提示关闭窗口不提示的方法
2010/04/29 Javascript
HTML Dom与Css控制方法
2010/10/25 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
javascript中自定义对象的属性方法分享
2013/07/12 Javascript
一个简单的动态加载js和css的jquery代码
2014/09/01 Javascript
JavaScript 模块化编程(笔记)
2015/04/08 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
JavaScript中SetInterval与setTimeout的用法详解
2015/11/10 Javascript
解决vue.js在编写过程中出现空格不规范报错的问题
2017/09/20 Javascript
微信小程序使用二次贝塞尔曲线画波浪
2018/12/25 Javascript
配置eslint规范项目代码风格
2019/03/11 Javascript
antd-DatePicker组件获取时间值,及相关设置方式
2020/10/27 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
python基础教程之类class定义使用方法
2014/02/20 Python
python+matplotlib绘制饼图散点图实例代码
2018/01/20 Python
python实现文件助手中查看微信撤回消息
2019/04/29 Python
使用wxpy实现自动发送微信消息功能
2020/02/28 Python
Pandas实现一列数据分隔为两列
2020/05/18 Python
python opencv 实现读取、显示、写入图像的方法
2020/06/08 Python
基于logstash实现日志文件同步elasticsearch
2020/08/06 Python
Python Selenium自动化获取页面信息的方法
2020/08/31 Python
简单总结CSS3中视窗单位Viewport的常见用法
2016/02/04 HTML / CSS
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
【HTML5】3D模型--百行代码实现旋转立体魔方实例
2016/12/16 HTML / CSS
英国百安居装饰建材网上超市:B&Q
2016/09/13 全球购物
莱德杯高尔夫欧洲官方商店:Ryder Cup Shop
2019/08/14 全球购物
我们的节日清明节活动方案
2014/03/05 职场文书
詹天佑教学反思
2014/04/30 职场文书
住院医师规范化培训实施方案
2014/06/12 职场文书
党员批评与自我批评发言材料
2014/10/14 职场文书
MyBatis自定义SQL拦截器示例详解
2021/10/24 Java/Android