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 相关文章推荐
jQuery的强大选择器小结
Dec 27 Javascript
Javascript面象对象成员、共享成员变量实验
Nov 19 Javascript
Javascript实现DIV滚动自动滚动到底部的代码
Mar 01 Javascript
简介AngularJS的视图功能应用
Jun 17 Javascript
jquery实现点击弹出可放大居中及关闭的对话框(附demo源码下载)
May 10 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
详解Vue中状态管理Vuex
May 11 Javascript
vue-router单页面路由
Jun 17 Javascript
详解Vue.js组件可复用性的混合(mixin)方式和自定义指令
Sep 06 Javascript
JavaScript使用indexOf()实现数组去重的方法分析
Sep 04 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
微信小程序实现多行文字滚动
Nov 18 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在字符断点处截断文字的实现代码
2011/04/21 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
Mysql中分页查询的两个解决方法比较
2013/05/02 PHP
PHP中的常见魔术方法功能作用及用法实例
2015/07/01 PHP
基于CI框架的微信网页授权库示例
2016/11/25 PHP
JQery 渐变图片导航效果代码 漂亮
2010/01/01 Javascript
JavaScript打字小游戏代码
2011/12/26 Javascript
Node.js模拟浏览器文件上传示例
2014/03/26 Javascript
javascript实用方法总结
2015/02/06 Javascript
jQuery动态添加元素无法触发绑定事件的解决方法分析
2018/01/02 jQuery
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
2018/12/11 Javascript
微信小程序MUI导航栏透明渐变功能示例(通过改变opacity实现)
2019/01/24 Javascript
理理Vue细节(推荐)
2019/04/16 Javascript
Vue.js中的extend绑定节点并显示的方法
2019/06/20 Javascript
Vue 路由间跳转和新开窗口的方式(query、params)
2019/12/25 Javascript
[03:39]DOTA2英雄梦之声_第05期_幽鬼
2014/06/23 DOTA
python标准日志模块logging的使用方法
2013/11/01 Python
python list使用示例 list中找连续的数字
2014/01/27 Python
Python新手们容易犯的几个错误总结
2017/04/01 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
解决Matplotlib图表不能在Pycharm中显示的问题
2018/05/24 Python
python实现自动获取IP并发送到邮箱
2018/12/26 Python
python对象与json相互转换的方法
2019/05/07 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
python不相等的两个字符串的 if 条件判断为True详解
2020/03/12 Python
Python中的Cookie模块如何使用
2020/06/04 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
Vinatis德国:法国领先的葡萄酒邮购公司
2020/09/07 全球购物
上海方立数码笔试题
2013/10/18 面试题
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
数控专业大学生的自我鉴定
2013/11/13 职场文书
博士学位自我鉴定范文
2013/12/26 职场文书
租房协议书样本
2014/08/20 职场文书
难以忽视的真相观后感
2015/06/05 职场文书
春风化雨观后感
2015/06/11 职场文书
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android