JS中call的功能及用法实例分析_javascript技巧_脚本之家

本文实例探讨了JS中FRAME的操作问题,分享给大家供大家参考。具体分析如下:

本文实例讲述了JS数组splice操作。分享给大家供大家参考,具体如下:

本文实例讲述了JS中apply()的应用。分享给大家供大家参考,具体如下:

本文实例讲述了JS中call的功能及用法。分享给大家供大家参考,具体如下:

以上图为例,在这里把frame之间的互相操作简单列为:1变量2方法3页面之间元素的互相获取。

node2:/var/www/html/js#cat h23.js

先从Math.max()函数说起,Math.max后面可以接收任意个参数,最后返回所有参数中的最大值。

1.call的作用

一、 首先从 父——->子

var narr=['a','b','c','d','e'];console.log;for (var j=0;j<narr.length;j++){ console.log;};console.log;for (var j=0;j<narr.length;j++){ console.log; if { narr.splice; };};console.log;for (var j=0;j<narr.length;j++){ console.log;};
alert;//8alert);//9

首先引出问题:用call的目的是什么?

① 访问变量名name

ps:数组长度相应改变,但是原来的数组索引也相应改变,splice参数中第一个2,是删除的起始索引,在此是数组第二个元素。第二个1,是删除元素的个数,在此只删除一个元素,即test[2];

但是在很多情况下,我们需要找出数组中最大的元素。

来看个例子,在javascript OOP中,我们经常会这样定义:

假如在frameABC中操作那么可以:复制代码
代码如下:window.frames.contentWindow.name

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具

/* * 找出数组中最大的数 */var arr = [1,4,9,6];//alert;//NaN,这种用法不对function max{ var arrLen = arr.length; var maxValue = arr[0]; for{ var maxValue = Math.max; } return maxValue;}alert;//9
function cat(){}cat.prototype={ food:"fish", say: function(){ alert; }}var blackCat = new cat;blackCat.say();

或者复制代码
代码如下:document.getElementById.contentWindow.name

更多关于JavaScript相关内容感兴趣的读者可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript遍历算法与技巧总结》、《javascript面向对象入门教程》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript错误与调试技巧总结》

上面的写法麻烦而且低效。我们用apply()试试。

但是如果我们有一个对象whiteDog = {food:"bone"},我们不想对它重新定义say方法,那么我们可以通过call或apply用blackCat的say方法:blackCat.say.call;

或者复制代码
代码如下:jquery:window.$[0].contentWindow.name

希望本文所述对大家JavaScript程序设计有所帮助。

/* * 用apply()找出数组中最大的数 */var arr = [1,4,9,6];function getMax1{ return Math.max.apply;//第一个参数也可以填this或null}alert;//9

所以,可以看出call和apply是为了动态改变this而出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。

假如在frameABC中操作那么可以: 复制代码
代码如下:window.frames.contentWindow.func();

这两段代码达到了相同的效果,但是getMax1()却优雅,简洁,而且高效。

在实际中用的比较多的是,通过document.getElementsByTagName选择的dom
节点是一种类似array的对象。它不能应用Array下的push,pop等方法。我们可以通过:

或者复制代码
代码如下:document.getElementById.contentWindow.func();

再比如数组的push方法。

var domNodes = Array.prototype.slice.call(document.getElementsByTagName;

或者复制代码
代码如下:jquery:window.$[0].contentWindow.func();

/* * 把两个数组整合成一个数组 */var arr1 = [1,3,4];var arr2 = [6,7,8];

这样domNodes就可以应用Array下的所有方法了。

③ 访问子页面元素:username

arr1.push;这样是不行的,得到的是[1,3,4,[6,7,8]]。因为push方法没有提供push一个数组,但是提供了push

2.call的区别

假如在frameABC中操作那么可以: 复制代码
代码如下:window.frames.contentWindow.document.getElementById;

可以把arr2展开,然后一个一个追加到arr1中去(当然也可以用 arr1.concat
但是concat方法并不改变 arr1本身)

首先apply的定义如下:

或者复制代码
代码如下:document.getElementById.contentWindow.document.getElementById;

var arrLen=arr2.length;for{ arr1.push;}

apply方法能劫持另外一个对象的方法,继承另外一个对象的属性
Function.apply方法能接收两个参数,第一个参数是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是数组,也可以是arguments对象
obj:这个对象将代替Function类里this对象
args:这个是数组,它将作为参数传给Function

或者复制代码
代码如下:jquery:window.$[0].contentWindow.$;

但通过apply(),事情就变得很简单了

apply()的用法

二、 然后从子————>到父

Array.prototype.push.apply;console.log;//1,3,4,6,7,8
//定义一个人类function Person{ this.name = name; this.age = age;}//定义一个学生类function Student{ Person.apply;//传入arguments对象 //Person.apply;//传入数组 this.grade = grade;}//创建一个学生类var student = new Student;//测试console.log('name:'+student.name+'age:'+student.age+'grade:'+student.grade);

① 访问父页面变量name,假如在frameA中操作那么可以:复制代码 代码如下:window.parent.name;

原理:arr1调用了push方法参数是通过apply将数组装换为参数列表的集合。

学生类里没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处。

② 访问父页面方法func,假如在frameA中操作那么可以:复制代码 代码如下:window.parent.func();

看到这里大家是不是心里想说:有必要这么麻烦吗js明明就有concat
这个强大的方法,concat()
方法用于连接两个或多个数组。该方法不会改变现有的数组,而仅仅会返回被连接数组的一个副本。如下

分析:Person.apply;

③ 访问父页面元素username,假如在frameA中操作那么可以:复制代码 代码如下:window.parent.$

var arr1 = new Array;var arr2 = new Array;console.log;//1,3,4,6,7,8console.log;//1,3,4console.log;//6,7,8

this:代表的是student,表示将Person中的this指向student。
arguments:是一个数组,在例子中表示[‘A’,’10’,’一年级’];

或者:复制代码
代码如下:window.parent.document.getElementById;

其实我想说如果真的需要数组链接的话当然要用concat啊,使用apply只是介绍一下可以这么用并不是只能这么用。

通俗一点讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就讲属性创建到了student对象里面.

总结:

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具

apply的作用是一样的,他们的区别仅在于接收参数的方式不同,call()需要把参数一个个列出来。

frame只是一个页面框架,要想操作子frame中的元素都需要首先进入到window或者contentWindow。从子页面访问父页面,需要计算好父子关系,分几层结构。

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

call()的用法

在网上看了其他帖子,谈到有关页面加载的问题。大概意思是在子frame页面还没加载出来就进行元素操作,会引起bug,感兴趣的朋友可以针对性的测试一下,相信会有新的收获!

希望本文所述对大家JavaScript程序设计有所帮助。

在Student函数里面可以将apply中修改成如下:

希望本文所述对大家的javascript程序设计有所帮助。

Person.call;

3.什么情况下用apply

至于是使用apply()还是call(),取决于采取那种给函数传递参数的方式最方便。

如果打算直接传入arguments对象,或者是数组,并且参数列表相同则使用apply();否则,选择call()可能更合适。

例:apply示例里面传递了参数arguments,并且在调用Person的时候参数的列表是对应一致的,也就是Person和Student的参数列表前两位是一致的,就可以采用apply。

如果我的Person的参数列表是这样的而Student的参数列表是,这样的就可以用call来实现了Person.call;

关于apply()的应用可以参考://www.jb51.net/article/164140.htm

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具

更多关于JavaScript相关内容还可查看本站专题:《JavaScript数组操作技巧总结》、《JavaScript字符与字符串操作技巧总结》、《JavaScript遍历算法与技巧总结》、《JavaScript数学运算用法总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript查找算法技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

发表评论

电子邮件地址不会被公开。 必填项已用*标注