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的动态添加控件并取值的实现代码
Sep 24 Javascript
javascript textContent与innerText的异同分析
Oct 22 Javascript
js动画(animate)简单引擎代码示例
Dec 04 Javascript
鼠标经过显示二级菜单js特效
Aug 13 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
Sort()函数的多种用法
Mar 20 Javascript
深入浅析JavaScript中的3DES
Aug 24 Javascript
Angular2学习教程之ng中变更检测问题详解
May 28 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
vue中如何动态绑定图片,vue中通过data返回图片路径的方法
Feb 07 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
Apr 21 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 中的str_replace 函数总结
2007/04/27 PHP
PHPLog php 程序调试追踪工具
2009/09/09 PHP
PHP 抓取新浪读书频道的小说并生成txt电子书的代码
2009/12/18 PHP
ThinkPHP CURD方法之where方法详解
2014/06/18 PHP
thinkphp如何获取客户端IP
2015/11/03 PHP
Laravel使用支付宝进行支付的示例代码
2017/08/16 PHP
jQuery效果 slideToggle() 方法(在隐藏和显示之间切换)
2011/06/28 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
JavaScript实现时间倒计时跳转(推荐)
2016/06/28 Javascript
jquery.validate表单验证插件使用方法解析
2016/11/07 Javascript
详解javascript获取url信息的常见方法
2016/12/19 Javascript
Javascript 使用ajax与C#获取文件大小实例详解
2017/01/13 Javascript
浅谈JavaScript异步编程
2017/01/20 Javascript
jQuery文字轮播特效
2017/02/12 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
javascript数据结构之串的概念与用法分析
2017/04/12 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
React Form组件的实现封装杂谈
2018/05/07 Javascript
vue中引用swiper轮播插件的教程详解
2018/08/16 Javascript
分享5个小技巧让你写出更好的 JavaScript 条件语句
2018/10/20 Javascript
小程序云开发教程如何使用云函数实现点赞功能
2019/05/18 Javascript
用Python中的字典来处理索引统计的方法
2015/05/05 Python
Python中处理字符串之isalpha()方法的使用
2015/05/18 Python
python 实现将字典dict、列表list中的中文正常显示方法
2018/07/06 Python
Python第三方Window模块文件的几种安装方法
2018/11/22 Python
Python 动态变量名定义与调用方法
2020/02/09 Python
python使用for...else跳出双层嵌套循环的方法实例
2020/05/17 Python
css3的过滤效果简单实例
2016/08/03 HTML / CSS
马来西亚综合购物网站:Lazada马来西亚
2018/06/05 全球购物
大学班级计划书
2014/04/29 职场文书
单位承诺书格式
2014/05/21 职场文书
2014年教师学期工作总结
2014/11/08 职场文书
2015年教师党员承诺书
2015/04/27 职场文书
走近毛泽东观后感
2015/06/04 职场文书
邓小平文选读书笔记
2015/06/29 职场文书
Python查找算法的实现 (线性、二分,分块、插值查找算法)
2022/04/24 Python