JavaScript学习点滴 call、apply的区别


Posted in Javascript onOctober 22, 2010

1、call
call 方法
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
简单的列子(函数调用):

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); 复杂点的例子(方法调用):
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");
实现继承
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); 
}

很简单,使用两个 call 就实现多重继承了
当然,js的继承还有其他方法,例如使用原型链,这个不属于本文的范畴,只是在此说明call 的用法
说了call ,当然还有 apply,这两个方法基本上是一个意思
区别在于 call 的第二个参数可以是任意类型,而apply的第二个参数必须是数组

2、apply

对于apply和call两者在作用上是相同的,但两者在参数上有区别的。
对于第一个参数意义都一样,但对第二个参数:
apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])

技巧(代码优雅而其执行效率高)

alert(Math.max(5,8)) //8 
alert(Math.max(5,7,9,3,1,6)) //9 var arr=[5,7,9,1] 
alert(Math.max.apply(null,arr));
Javascript 相关文章推荐
javascript数组使用调用方法汇总
Dec 08 Javascript
javascript 语法基础 想学习js的朋友可以看看
Dec 16 Javascript
JavaScript之引用类型介绍
Aug 10 Javascript
图片上传判断及预览脚本的效果实例
Aug 07 Javascript
JS、DOM和JQuery之间的关系示例分析
Apr 09 Javascript
教你如何使用firebug调试功能了解javascript闭包和this
Mar 04 Javascript
javascript实现详细时间提醒信息效果的方法
Mar 11 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
React Native之TextInput组件解析示例
Aug 22 Javascript
vue2中,根据list的id进入对应的详情页并修改title方法
Aug 24 Javascript
富文本编辑器vue2-editor实现全屏功能
May 26 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
Web 前端设计模式--Dom重构 提高显示性能
Oct 22 #Javascript
jQuery中add实现同时选择两个id对象
Oct 22 #Javascript
jquery下动态显示jqGrid以及jqGrid的属性设置容易出现问题的解决方法
Oct 22 #Javascript
为jQuery.Treeview添加右键菜单的实现代码
Oct 22 #Javascript
使用jQuery模板来展现json数据的代码
Oct 22 #Javascript
jQuery 表单验证扩展(四)
Oct 20 #Javascript
jQuery 表单验证扩展(三)
Oct 20 #Javascript
You might like
PHP利用APC模块实现文件上传进度条的方法
2015/01/26 PHP
js网页中的(运行代码)功能实现思路
2013/02/04 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
Angular 2应用的8个主要构造块有哪些
2016/10/17 Javascript
详解Angular 自定义结构指令
2017/06/21 Javascript
ES6正则表达式扩展笔记
2017/07/25 Javascript
Canvas放置反弹效果随机图形(实例)
2017/08/17 Javascript
前端html中jQuery实现对文本的搜索功能并把搜索相关内容显示出来
2017/11/14 jQuery
基于Vue 实现一个中规中矩loading组件
2019/04/03 Javascript
如何在微信小程序中存setStorage
2019/12/13 Javascript
[04:40]DOTA2-DPC中国联赛1月26日Recap集锦
2021/03/11 DOTA
自己使用总结Python程序代码片段
2015/06/02 Python
Python多线程实现同步的四种方式
2017/05/02 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
Python对象属性自动更新操作示例
2018/06/15 Python
Python 实现数据结构中的的栈队列
2019/05/16 Python
Django框架创建项目的方法入门教程
2019/11/04 Python
使用Bazel编译TensorBoard教程
2020/02/15 Python
Python读取yaml文件的详细教程
2020/07/21 Python
python多线程爬取西刺代理的示例代码
2021/01/30 Python
灵活运用CSS3特性绘制简易版围棋效果
2016/09/28 HTML / CSS
用CSS3实现背景渐变的方法
2015/07/14 HTML / CSS
css3实现文字首尾衔接跑马灯的示例代码
2020/10/16 HTML / CSS
西班牙网上书店:Casa del Libro
2016/11/01 全球购物
暑期培训随笔感言
2014/03/10 职场文书
愚人节活动策划方案
2014/03/11 职场文书
中学感恩教育活动总结
2015/05/05 职场文书
酒店员工手册范本
2015/05/14 职场文书
教师师德工作总结2015
2015/07/22 职场文书
合同补充协议书
2016/03/24 职场文书
《合作意向书》怎么写?
2019/08/20 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS
Mysql中存储引擎的区别及比较
2021/06/04 MySQL
JavaWeb 入门:Hello Servlet
2021/07/16 Java/Android
Redis读写分离搭建的完整步骤
2021/09/14 Redis