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编程起步(第二课)
Jan 10 Javascript
IE FF OPERA都可用的弹出层实现代码
Sep 29 Javascript
兼容IE和Firefox火狐的上下、左右循环无间断滚动JS代码
Apr 19 Javascript
js showModalDialog参数的使用详解
Jan 07 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
JavaScript中的parse()方法使用简介
Jun 12 Javascript
JavaScript判断表单为空及获取焦点的方法
Feb 12 Javascript
jQuery日历插件datepicker用法详解
Mar 03 Javascript
简述JavaScript提交表单的方式 (Using JavaScript Submit Form)
Mar 18 Javascript
javascript 单例模式详解及简单实例
Feb 14 Javascript
jQuery实现手势解锁密码特效
Aug 14 jQuery
JS实现520 表白简单代码
May 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 Switch 语句之学习笔记
2013/09/21 PHP
php单态设计模式(单例模式)实例
2014/11/18 PHP
Laravel 5框架学习之路由、控制器和视图简介
2015/04/07 PHP
Smarty foreach控制循环次数的一些方法
2015/07/01 PHP
php实现学生管理系统
2020/03/21 PHP
详解yii2实现分库分表的方案与思路
2017/02/03 PHP
PHP ADODB生成HTML表格函数rs2html功能【附错误处理函数用法】
2018/05/29 PHP
TP5(thinkPHP5)框架基于ajax与后台数据交互操作简单示例
2018/09/03 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
初窥JQuery(二)事件机制(2)
2010/12/06 Javascript
解析js原生方法创建表格效率测试
2013/07/08 Javascript
Query中click(),bind(),live(),delegate()的区别
2013/11/19 Javascript
JavaScript中的类数组对象介绍
2014/12/30 Javascript
JavaScript+html5 canvas绘制的小人效果
2016/01/27 Javascript
BootStrap Typeahead自动补全插件实例代码
2016/08/10 Javascript
JavaScript日期选择功能示例
2017/01/16 Javascript
javascript作用域链与执行环境详解
2017/03/25 Javascript
vue+axios实现登录拦截的实例代码
2017/05/22 Javascript
详解vuejs2.0 select 动态绑定下拉框支持多选
2019/04/25 Javascript
vue 动态组件用法示例小结
2020/03/06 Javascript
javascript使用Blob对象实现的下载文件操作示例
2020/04/18 Javascript
JS自定义右键菜单实现代码解析
2020/07/16 Javascript
[45:52]2018DOTA2亚洲邀请赛 4.1小组赛 A组加赛 LGD vs Liquid
2018/04/02 DOTA
python写入xml文件的方法
2015/05/08 Python
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
PyQt5主窗口动态加载Widget实例代码
2018/02/07 Python
python 信息同时输出到控制台与文件的实例讲解
2018/05/11 Python
Python爬虫爬取新浪微博内容示例【基于代理IP】
2018/08/03 Python
HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能
2018/04/23 HTML / CSS
类的返射机制中的包及核心类
2016/09/12 面试题
大学生军训广播稿
2014/01/24 职场文书
党干部专题民主生活会对照检查材料思想汇报
2014/10/06 职场文书
工作疏忽检讨书500字
2014/10/26 职场文书
2016春季运动会前导词
2015/11/25 职场文书
浅析Python实现DFA算法
2021/06/26 Python
SqlServer数据库远程连接案例教程
2021/07/15 SQL Server