JavaScript 学习笔记(九)call和apply方法


Posted in Javascript onJanuary 11, 2010

call和apply方法
call方法可改变上下文this指针,类似的方法还有apply,主要用在js对象各方法互相调用的时候,使当前this实例指针保持一致,或在特殊情况下需要改变this指针。
obj1.method1.call(obj2,argument1,argument2)
如上,call的作用就是把obj1的方法放到obj2上使用,后面的argument1…这些做为参数传入。
举一个具体的例子

function add(a, b) { 
alert(a + b); 
} 
function sub(a, b) { 
alert(a - b); 
} 
add.call(sub, 3, 1);

这个例子中的意思就是用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4); // 注意:js 中的函数其实是对象,函数名是对 Function 对象的引用。
看一个稍微复杂一点的例子
function Class1() { 
this.name = "class1"; this.showNam = function() { 
alert(this.name); 
} 
} 
function Class2() { 
this.name = "class2"; 
} 
var c1 = new Class1(); 
var c2 = new Class2(); 
c1.showNam.call(c2);

注意,call 的意思是把 c1 的方法放到c2上执行,原来c2是没有showNam() 方法,现在是把c1 的showNam()方法放到 c2 上来执行,所以this.name 应该是 class2,执行的结果就是:alert("class2");
另外可以用 call 来实现继承
function Class1() { 
this.showTxt = function(txt) { 
alert(txt); 
} 
} function Class2() { 
Class1.call(this); 
} 
var c2 = new Class2(); 
c2.showTxt("cc");

这样 Class2 就继承Class1了,Class1.call(this) 的 意思就是使用 Class1 对象代替this对象,那么 Class2 中不就有Class1 的所有属性和方法了吗,c2 对象就能够直接调用Class1 的方法以及属性了,执行结果就是:alert(“cc”);
这就是 javaScript 如何来模拟面向对象中的继承的,还可以实现多重继承。
function Class10() { 
this.showSub = function(a, b) { 
alert(a - b); 
} 
} function Class11() { 
this.showAdd = function(a, b) { 
alert(a + b); 
} 
} 
function Class2() { 
Class10.call(this); 
Class11.call(this); 
}

1.call方法
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj 可选项。将被用作当前对象的对象。
arg1, arg2, , argN 可选项。将被传递方法参数序列。
2.apply方法
应用某一对象的一个方法,用另一个对象替换当前对象。
apply([thisObj[,argArray]])
参数
thisObj 可选项。将被用作当前对象的对象。
argArray 可选项。将被传递给该函数的参数数组。

两者的区别
两者实现的功能是完全一样的,只是参数传递方式不一样,call是将各个参数以逗号(,)隔开,而apply是将所有参数组成一个数组进行传递。

Javascript 相关文章推荐
javascript实现淘宝幻灯片广告展示效果
Apr 27 Javascript
Javascript实现计算个人所得税
May 10 Javascript
微信浏览器内置JavaScript对象WeixinJSBridge使用实例
May 25 Javascript
jQuery使用animate实现ul列表项相互飘动效果示例
Sep 16 Javascript
Vue.js组件tree实现省市多级联动
Dec 02 Javascript
深入理解JavaScript 参数按值传递
May 24 Javascript
详解AngularJS2 Http服务
Jun 26 Javascript
nuxt.js 缓存实践
Jun 25 Javascript
从零开始搭建vue移动端项目到上线的步骤
Oct 15 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
微信小程序表单验证插件WxValidate的二次封装功能(终极版)
Sep 03 Javascript
Vue常用API、高级API的相关总结
Feb 02 Vue.js
取选中的radio的值
Jan 11 #Javascript
javascript Object与Function使用
Jan 11 #Javascript
Extjs学习笔记之九 数据模型(上)
Jan 11 #Javascript
JavaScript 事件冒泡简介及应用
Jan 11 #Javascript
Javascript 读书笔记索引贴
Jan 11 #Javascript
Javascript学习笔记9 prototype封装继承
Jan 11 #Javascript
Javascript学习笔记8 用JSON做原型
Jan 11 #Javascript
You might like
linux下 C语言对 php 扩展
2008/12/14 PHP
php文件上传表单摘自drupal的代码
2011/02/15 PHP
解析在apache里面给php写虚拟目录的详细方法
2013/06/24 PHP
Zend Framework+smarty用法实例详解
2016/03/19 PHP
jQuery取得设置清空select选择的文本与值
2014/07/08 Javascript
jQuery实现的经典竖向伸缩菜单效果代码
2015/09/24 Javascript
javascript图片预加载完整实例
2015/12/10 Javascript
js实现简单的省市县三级联动效果实例
2016/02/18 Javascript
laydate.js日期时间选择插件
2017/01/04 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
ng-zorro-antd 入门初体验
2018/12/03 Javascript
微信小程序拼接图片链接无底洞深入探究
2019/09/03 Javascript
使用localStorage替代cookie做本地存储
2019/09/25 Javascript
如何通过vscode运行调试javascript代码
2020/07/24 Javascript
vue-axios同时请求多个接口 等所有接口全部加载完成再处理操作
2020/11/09 Javascript
解决vue-cli输入命令vue ui没效果的问题
2020/11/17 Javascript
[03:02]2020完美世界城市挑战赛(秋季赛)总决赛回顾
2021/03/11 DOTA
python抓取网页中链接的静态图片
2018/01/29 Python
Linux下多个Python版本安装教程
2018/08/15 Python
python中的for循环
2018/09/28 Python
python实现的自动发送消息功能详解
2019/08/15 Python
对django的User模型和四种扩展/重写方法小结
2019/08/17 Python
python线性插值解析
2020/07/05 Python
利用python下载scihub成文献为PDF操作
2020/07/09 Python
解决Python中导入自己写的类,被划红线,但不影响执行的问题
2020/07/13 Python
一套VC试题
2015/01/23 面试题
Linux不知道文件后缀名怎么判断文件类型
2014/08/21 面试题
幼儿教师个人求职信范文
2013/09/21 职场文书
总经理助理的八要求
2013/11/12 职场文书
四年大学自我鉴定
2014/02/17 职场文书
预备党员承诺书
2014/03/25 职场文书
关于奉献的演讲稿
2014/05/21 职场文书
村党支部公开承诺书
2014/05/29 职场文书
学年个人总结范文
2015/03/05 职场文书
考生诚信考试承诺书
2015/04/29 职场文书
Redis基本数据类型Zset有序集合常用操作
2022/06/01 Redis