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基础学习资料
Nov 23 Javascript
jquery 获取自定义属性(attr和prop)的实现代码
Jun 27 Javascript
圣诞节Merry Christmas给博客添加浪漫的下雪效果基于jquery实现
Dec 27 Javascript
跨域传值即主页面与iframe之间互相传值
Dec 09 Javascript
jQuery插件开发精品教程让你的jQuery提升一个台阶
Jan 27 Javascript
Bootstrap实现水平排列的表单
Jul 04 Javascript
JS实现仿百度文库评分功能
Jan 12 Javascript
vue使用stompjs实现mqtt消息推送通知
Jun 22 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
Feb 21 Javascript
基于jquery ajax的多文件上传进度条过程解析
Sep 11 jQuery
解决vuex数据异步造成初始化的时候没值报错问题
Nov 13 Javascript
Node.js 中判断一个文件是否存在
Aug 24 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
ThinkPHP登录功能的实现方法
2014/08/20 PHP
php截取指定2个字符之间字符串的方法
2015/04/15 PHP
javascript 读取xml,写入xml 实现代码
2009/07/10 Javascript
javascript常见操作汇总
2014/09/03 Javascript
JavaScript监听文本框回车事件并过滤文本框空格的方法
2015/04/16 Javascript
JS实现仿微博可关闭弹出层效果
2015/09/21 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
2015/12/01 Javascript
原生js制作日历控件实例分享
2016/04/06 Javascript
浅谈js中用$(#ID)来作为选择器的问题(id重复的时候)
2017/02/14 Javascript
详谈jQuery Ajax(load,post,get,ajax)的用法
2017/03/02 Javascript
js实现4个方向滚动的球
2017/03/06 Javascript
vue.js中过滤器的使用教程
2017/06/08 Javascript
vue-cli如何添加less 以及sass
2017/07/06 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
layui结合form,table的全选、反选v1.0示例讲解
2018/08/15 Javascript
ES6基础之数组和对象的拓展实例详解
2019/08/22 Javascript
Python写的创建文件夹自定义函数mkdir()
2014/08/25 Python
python操作CouchDB的方法
2014/10/08 Python
python 类对象和实例对象动态添加方法(分享)
2017/12/31 Python
python使用插值法画出平滑曲线
2018/12/15 Python
python向图片里添加文字
2019/11/26 Python
Django多个app urls配置代码实例
2020/11/26 Python
全方位了解CSS3的Regions扩展
2015/08/07 HTML / CSS
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
网络艺术零售业的先驱者:artrepublic
2017/09/26 全球购物
医学院毕业生自荐信
2013/11/08 职场文书
安全员岗位职责
2013/11/11 职场文书
六查六看剖析材料
2014/02/15 职场文书
辅导员评语
2014/05/04 职场文书
出国英文推荐信
2014/05/10 职场文书
公司年会策划方案
2014/05/17 职场文书
财务负责人任命书
2014/06/06 职场文书
2015年度个人工作总结报告
2015/10/24 职场文书
python疲劳驾驶困倦低头检测功能的实现
2022/04/04 Python