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 相关文章推荐
JavaScript与C# Windows应用程序交互方法
Jun 29 Javascript
javascript 写类方式之九
Jul 05 Javascript
window.open以post方式将内容提交到新窗口
Dec 26 Javascript
js onload事件不起作用示例分析
Oct 09 Javascript
ie中js创建checkbox默认选中问题探讨
Oct 21 Javascript
Bootstrap入门教程一Hello Bootstrap初识
Mar 02 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
jquery实现图片上传前本地预览
Apr 28 jQuery
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
vue 实现复制内容到粘贴板clipboard的方法
Mar 17 Javascript
Vue.js项目中管理每个页面的头部标签的两种方法
Jun 25 Javascript
vue登录注册实例详解
Sep 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生成静态HTML速度快类库
2007/03/18 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
PNG背景在不同浏览器下的应用
2009/06/22 Javascript
jquery1.5.1中根据元素ID获取元素对象的代码
2011/04/02 Javascript
JS Loading功能的简单实现
2013/11/29 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
JavaScript设计模式开发中组合模式的使用教程
2016/05/18 Javascript
Node.js如何自动审核团队的代码
2016/07/20 Javascript
JavaScript兼容浏览器FF/IE技巧
2016/08/14 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
2017/07/17 Javascript
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
用Python实现web端用户登录和注册功能的教程
2015/04/30 Python
Python模拟用户登录验证
2017/09/11 Python
MySQL适配器PyMySQL详解
2017/09/20 Python
Python+matplotlib实现计算两个信号的交叉谱密度实例
2018/01/08 Python
Python基于matplotlib实现绘制三维图形功能示例
2018/01/18 Python
python 提取tuple类型值中json格式的key值方法
2018/12/31 Python
python把转列表为集合的方法
2019/06/28 Python
Python JSON编解码方式原理详解
2020/01/20 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python自定义聚合函数merge与transform区别详解
2020/05/26 Python
Python图像处理二值化方法实例汇总
2020/07/24 Python
python3 googletrans超时报错问题及翻译工具优化方案 附源码
2020/12/23 Python
python urllib和urllib3知识点总结
2021/02/08 Python
丝芙兰巴西官方商城:SEPHORA巴西
2016/10/31 全球购物
英国豪华真皮和布艺沙发销售网站:Darlings of Chelsea
2018/01/05 全球购物
以色列的身体护理及家居香薰品牌:Sabon NYC
2018/02/23 全球购物
Java基础面试题
2014/07/19 面试题
实验室的标语
2014/06/20 职场文书
七一党日活动总结
2014/07/08 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
2015大学迎新标语
2015/07/16 职场文书
导游词之苏州盘门景区
2019/11/12 职场文书
用Python爬虫破解滑动验证码的案例解析
2021/05/06 Python
Python 使用 Frame tkraise() 方法在 Tkinter 应用程序中的Frame之间切换
2022/04/24 Python
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers