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字典探测用户名工具
Oct 05 Javascript
JavaScript修改css样式style
Apr 15 Javascript
js静态方法与实例方法分析
Jul 04 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
Jan 03 Javascript
jQuery实现tab标签自动切换的方法
Feb 28 Javascript
javascript中Math.random()使用详解
Apr 15 Javascript
jquery实现点击变换导航样式的方法
Aug 31 Javascript
jQuery Validate设置onkeyup验证的实例代码
Dec 09 Javascript
Vuejs监听vuex中值的变化的方法示例
Dec 02 Javascript
jQuery实现简单全选框
Sep 13 jQuery
解决VUE 在IE下出现ReferenceError: Promise未定义的问题
Nov 07 Javascript
jQuery实现购物车全功能
Jan 11 jQuery
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生成可点击刷新的验证码简单示例
2016/05/13 PHP
PHP查看SSL证书信息的方法
2016/09/22 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
php实现PDO中捕获SQL语句错误的方法
2017/02/16 PHP
laravel框架分组控制器和分组路由实现方法示例
2020/01/25 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
尽可能写"友好"的"Javascript"代码
2007/01/09 Javascript
js获取select标签的值且兼容IE与firefox
2013/12/30 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
js给网页加上背景音乐及选择音效的方法
2015/03/03 Javascript
jquery简单实现幻灯片的方法
2015/08/03 Javascript
JS实现的自定义右键菜单实例二则
2015/09/01 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
学习使用bootstrap基本控件(table、form、button)
2016/04/12 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
react-redux中connect()方法详细解析
2017/05/27 Javascript
使用Angular material主题定义自己的组件库的配色体系
2019/09/04 Javascript
Vue移动端项目实现使用手机预览调试操作
2020/07/18 Javascript
如何在vue-cli中使用css-loader实现css module
2021/01/07 Vue.js
基于vue-simple-uploader封装文件分片上传、秒传及断点续传的全局上传插件功能
2021/02/23 Vue.js
python贪婪匹配以及多行匹配的实例讲解
2018/04/19 Python
python微信公众号之关注公众号自动回复
2018/10/25 Python
python通过TimedRotatingFileHandler按时间切割日志
2019/07/17 Python
pycharm 如何取消连按两下shift出现的全局搜索
2021/01/15 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
List, Set, Map是否继承自Collection接口?
2016/05/16 面试题
《丑小鸭》教学反思
2016/02/19 职场文书
2016年青少年禁毒宣传教育活动总结(学校)
2016/04/05 职场文书
导游词之京东大峡谷旅游区
2019/10/29 职场文书
python将图片转为矢量图的方法步骤
2021/03/30 Python
解决Python中的modf()函数取小数部分不准确问题
2021/05/28 Python
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
pycharm部署django项目到云服务器的详细流程
2021/06/29 Python
MySQL8.0 Undo Tablespace管理详解
2022/06/16 MySQL
css中:last-child不生效的解决方法
2022/08/05 HTML / CSS
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript