javaScript call 函数的用法说明_javascript技巧

call 方法
请参阅
应用于:Function 对象
要求
版本 5.5
调用一个对象的一个方法,以另一个对象替换当前对象。
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。
如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
-------------------------------------------------------------------------------------------
乍一看,很容易把人看迷胡,先做一些简单的说明
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");
怎么样,觉得有意思了吧,可以让a对象来执行b对象的方法,这是java程序员所不敢想的。还有更有趣的,可以用 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);
}

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

时间: 2024-09-20 23:17:57

javaScript call 函数的用法说明_javascript技巧的相关文章

JavaScript中常见的字符串操作函数及用法汇总_javascript技巧

本文实例总结了JavaScript中常见的字符串操作函数及用法.分享给大家供大家参考.具体分析如下: 最近几次参加前端实习生招聘的笔试,发现很多笔试题都会考到字符串的处理,比方说去哪儿网笔试题.淘宝的笔试题等.如果你经常参加笔试或者也是一个过来人,相信你也跟我一样,发现字符串的处理是前端招聘过程中最常见的题型之一.这些题有一个特点,站在考官的角度去考虑,它考的不是你会不会,而是你能不能在不借用XX手册或者XX指南再或者百度谷歌的情况下,用比较简洁的方式写出答案来.可惜的是,很多开发人员,当然我也

JavaScript里四舍五入函数round用法实例_javascript技巧

本文实例讲述了JavaScript里四舍五入函数round用法.分享给大家供大家参考.具体如下: JavaScript的Math对象包含了一个round方法用于对数字进行四舍五入操作,下面的代码详细演示了其用法 <!DOCTYPE html> <html> <body> <p id="demo"> Click the button to round the number 2.5 to its nearest integer. </p

javascript跨域请求包装函数与用法示例_javascript技巧

本文实例讲述了javascript跨域请求包装函数与用法.分享给大家供大家参考,具体如下: 一.源码 // 定义AJAX跨域请求的JSON (function(){ if(typeof window.$JSON== 'undefined'){ window.$JSON= {}; }; $JSON._ajax = function(config){ config = config[0] || {}; this.url = config.url || ''; this.type = config.t

JavaScript中字符串分割函数split用法实例_javascript技巧

本文实例讲述了JavaScript中字符串分割函数split用法.分享给大家供大家参考.具体如下: 先来看下面这段代码: <script type="text/javascript"> var str="How are you doing today?" document.write(str.split(" ") + "<br />") document.write(str.split("&q

javascript中setAttribute兼容性用法分析_javascript技巧

本文实例分析了javascript中setAttribute兼容性用法.分享给大家供大家参考,具体如下: 1:常规属性建议使用 node.XXXX. 2:自定义属性建议使用node.getAttribute("XXXX"). 3:当获取的目标是JS里的关键字时建议使用node.getAttribute("XXX"),如label中的for. 4:当获取的目标是保留字,如:class,请使用className代替. setAttribute(string name,

javascript常用函数(2)_javascript技巧

文章主要内容列表: 16. 除去数组重复项 17. 操作cookie 18. 判断浏览器类型 19. 判断是否开启cookie 20. 断是否开启JavaScript 21. JavaScript 打字机效果 22. 简单打印 23. 禁止右键 24. 防止垃圾邮件 25.复制(javaeye flash版) 26. 阻止冒泡事件或阻止浏览器默认行为 27. 关闭或跳转窗口时提示 28. 用javascript获取地 址栏参数 29. 计算停留的时间 30. div为空,只有背景时,背景自动增高

javascript insertAfter()定义与用法示例_javascript技巧

本文实例讲述了javascript insertAfter()定义与用法.分享给大家供大家参考,具体如下: HTML部分: <div id="b">bbbbbbbbb</div> <div>dddddd</div> JavaScript部分: window.onload=function(){ var a =document.createElement("span"); var b =document.createTe

javascript常用函数(1)_javascript技巧

文章主要内容列表: 1.  调整图片大小,不走形(FF IE 兼容)/ 剪切图片(overflow:hidden) 2.  控制textarea区域文字数量 3.  点击显示新窗口 4.  input框自动随内容自动变长 5.  添加收藏夹 6.  设置首页 7.  Jquery + Ajax 判断用户是否存在 8.  判断email格式是否正确 9.  综合判断用户名(长度,英文字段等) 10.新闻滚动 11. 只允许输入正整数 (shopping cart 使用) 或者 正数 (正整数和正小

DOM节点深度克隆函数cloneNode()用法实例_javascript技巧

本文实例讲述了DOM节点深度克隆函数cloneNode()用法.分享给大家供大家参考. 具体实现方法如下: 复制代码 代码如下: <html> <head> <script type="text/javascript"> function t(){  var nodeul = document.getElementsByTagName('ul')[0];//获取需要复制的UL节点  var newul = nodeul.cloneNode(true)