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 相关文章推荐
js实现网页标题栏闪烁提示效果实例分析
Nov 20 Javascript
使用JavaScript实现旋转的彩圈特效
Jun 23 Javascript
浅谈jQuery效果函数
Sep 16 Javascript
Bootstrap源码解读模态弹出框(11)
Dec 28 Javascript
jQuery编写设置和获取颜色的插件
Jan 09 Javascript
微信小程序本地缓存数据增删改查实例详解
May 24 Javascript
ES6 javascript中Class类继承用法实例详解
Oct 30 Javascript
vue-cli开发环境实现跨域请求的方法
Apr 07 Javascript
微信小程序学习笔记之表单提交与PHP后台数据交互处理图文详解
Mar 28 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
使用refresh_token实现无感刷新页面
Apr 26 Javascript
取选中的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
php猜单词游戏
2015/09/29 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
漂亮的thinkphp 跳转页封装示例
2019/10/16 PHP
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
Jquery实现无刷新DropDownList联动实现代码
2010/03/08 Javascript
jQuery 美元符冲突的解决方法
2010/03/28 Javascript
jquery动画1.加载指示器
2012/08/24 Javascript
多个datatable共存造成多个表格的checkbox都被选中
2013/07/11 Javascript
聊聊JavaScript如何实现继承及特点
2017/04/07 Javascript
vue 1.0 结合animate.css定义动画效果
2018/07/11 Javascript
微信小程序表单验证form提交错误提示效果
2020/06/19 Javascript
vue-cli项目无法用本机IP访问的解决方法
2018/09/20 Javascript
从零开始在NPM上发布一个Vue组件的方法步骤
2018/12/20 Javascript
Vue 组件注册实例详解
2019/02/23 Javascript
vue路由--网站导航功能详解
2019/03/29 Javascript
基于Vue的侧边目录组件的实现
2020/02/05 Javascript
vue实现商品列表的添加删除实例讲解
2020/05/14 Javascript
antd vue table跨行合并单元格,并且自定义内容实例
2020/10/28 Javascript
Python 字符串定义
2009/09/25 Python
Python中摘要算法MD5,SHA1简介及应用实例代码
2018/01/09 Python
Python实现对字典分别按键(key)和值(value)进行排序的方法分析
2018/12/19 Python
浅谈python requests 的put, post 请求参数的问题
2019/01/02 Python
python 猴子补丁(monkey patch)
2019/06/26 Python
python操作excel让工作自动化
2019/08/09 Python
基于Django实现日志记录报错信息
2019/12/17 Python
Python单元测试及unittest框架用法实例解析
2020/07/09 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
CSS3 display知识详解
2015/11/25 HTML / CSS
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
html5的websockets全双工通信详解学习示例
2014/02/26 HTML / CSS
学生生病请假条范文
2014/02/16 职场文书
员工教育培训协议书
2014/09/27 职场文书
代办社保委托书范文
2014/10/06 职场文书
Python的三个重要函数详解
2022/01/18 Python
《艾尔登法环》1.03.3补丁上线 碎星伤害调整
2022/04/06 其他游戏
oracle设置密码复杂度及设置超时退出的功能
2022/06/28 Oracle