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 相关文章推荐
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
利用javascript的面向对象的特性实现限制试用期
Aug 04 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
THREE.JS入门教程(2)着色器-上
Jan 24 Javascript
JavaScript简介
Feb 15 Javascript
JS图片定时翻滚效果实现方法
Jun 21 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 Javascript
详解Node.js异步处理的各种写法
Jun 09 Javascript
jquery插件开发模式实例详解
Jul 20 jQuery
Vue 利用指令实现禁止反复发送请求的两种方法
Sep 15 Javascript
JavaScript canvas实现流星特效
May 20 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
全国FM电台频率大全 - 6 辽宁省
2020/03/11 无线电
让PHP开发者事半功倍的十大技巧小结
2010/04/20 PHP
php验证手机号码
2015/11/11 PHP
PHP与Perl之间知识点区别整理
2019/03/19 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
2013/01/06 Javascript
DOM基础教程之使用DOM控制表格
2015/01/20 Javascript
使用jQuery加载html页面到指定的div实现方法
2016/07/13 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
Node.js 使用流实现读写同步边读边写功能
2017/09/11 Javascript
Bootstrap Table快速完美搭建后台管理系统
2017/09/20 Javascript
微信小程序实现左右联动的实战记录
2018/07/05 Javascript
详解webpack打包后如何调试的方法步骤
2018/11/07 Javascript
如何使用puppet替换文件中的string
2018/12/06 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
原生javascript的ajax请求及后台PHP响应操作示例
2020/02/24 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
JavaScript实现与web通信的方法详解
2020/08/07 Javascript
python追加元素到列表的方法
2015/07/28 Python
使用Python编写一个最基础的代码解释器的要点解析
2016/07/12 Python
利用Django内置的认证视图实现用户密码重置功能详解
2017/11/24 Python
Python中xrange与yield的用法实例分析
2017/12/26 Python
Python爬虫将爬取的图片写入world文档的方法
2018/11/07 Python
python 获得任意路径下的文件及其根目录的方法
2019/02/16 Python
pandas数据集的端到端处理
2019/02/18 Python
Django--权限Permissions的例子
2019/08/28 Python
Python常用库大全及简要说明
2020/01/17 Python
英国护肤品购物网站:Beauty Expert
2016/08/19 全球购物
波兰在线运动商店:YesSport
2020/07/23 全球购物
总经理工作职责范文
2014/03/14 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
2014院党委领导班子对照检查材料思想汇报
2014/09/24 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
初中团支书竞选稿
2015/11/21 职场文书
德劲DE1107指针试高灵敏度全波段收音机机评
2022/04/05 无线电