js方法call和apply实例解析

在js编程中实现继承时
用到了两个很特殊的方法,call和apply。

在ECMAScript
v3中,给Function原型定义了这两个方法,这两个方法的作用都是一样的:使用这两个方法可以像调用其他对象方法一样调用函数,这句话是从书上抄的,至少我是没读明白这是什么意思。
下面说简单易懂的,先看段代码:


function Introduce(name,age)
{
document.write("My name is "+name+".I am "+age);
}
var p=new People();
Introduce.call(p,"Windking",20);

就说上面的这段代码,用了call之后,Introduce就成了p的方法,不知道这样说你明白了么?

使用了call方法,上述的代码就等同于了这个代码:


function People(name,age)
{
this.name=name;
this.age=age;
this.Introduce=function(){
document.write("My name is "+name+".I am "+age);
};
}

明白意思了么?apply也是一样的作用。

好,我们不管这个方法到底能在实际中用到什么,先讲语法。

call接受至少一个参数,call的第一个参数是指你所需要的对象,比如说上面的那个例子,Introduce方法希望他能够被对象p所调用,那么就把p作为call的第一个参数。剩余的参数个数是任意的,作用是作为Introduce方法的参数。顺序按照Introduce参数声明的顺序。比如Introduce.call(p,"Windking",20),假如Introduce是p的一个实例方法,那么也就是这样的:p.Introduce("Windking",20)。明白了么?记住,传入参数的顺序要与函数声明参数的顺序保持一致。
 www.jbxue.com
了解了call,apply方法就容易理解了,apply和call唯一的区别是call接受至少一个参数,而apply只接受两个参数,第一个参数与call一样,第二个参数是一个带下标的集合,比如说Introduce.call(p,"Windking",20)就可以改写成Introduce.apply(p,["Windking",20])了。这次明白了么?

那究竟这两个方法有什么用呢?如果我们只是为了实现上面的那个功能,把Introduce实现为People的方法不是更好么?

我把应用总结为两条:
1.共享方法。先看代码:


function Introduce(name,age)
{
document.write("My name is "+name+".I am "+age);
}

这是一个自我介绍的方法,现在假设有一个男孩的类,和一个女孩的类(在这里我只是为了演示,在实际中,会用一个People的父类),因为他们的Introduce都是一样的,于是我们就可以共享这个方法。


function Boy()
{
this.BoyIntroduce=function(){
Introduce.call(this,name,age);
};
}

同理,Girl中也是一样,这样的话,我们就可以避免写代码了。其实这个有些牵强,因为我们完全也可以写成:


function Boy()
{
this.BoyIntroduce=function(){
Introduce(name,age);
}
}

但是这个时候,我们如果用Apply的话,就看上去简单多了:


function Boy()
{
this.BoyIntroduce=function(){
Introduce.apply(this,arguments);
};
}

是不是简单了很多呢?如果参数很多的话,那么是不是不用再写那么一场串密密麻麻的参数了呢!

2.跨域调用 www.jbxue.com
一个简单的例子(仅为演示,无任何价值):


function Boy(name,age)
{
this.BoyIntroduce=function(){
document.write("My name is "+name+".I am "+age);
}
}
function Girl(name,age)
{

}

这是一个Boy和一个Girl类,然后我们写如下的代码:


var b=new Boy("Windking",20);
b.BoyIntroduce();

这没有任何异议。假设有一天有一个女孩也希望做一下自我介绍,只是偶然用一下,那么我就没有必要修改Girl类,因为其他的女孩比较害羞,不喜欢自我介绍。那么这个时候我就可以这样。


var g=new Girl("Xuan",22);
Introduce.call(g,"Xuan",22);

3,真正用处——继承

下面才是call和apply最广泛的应用,就是用于构造继承。

时间: 2024-10-10 12:16:35

js方法call和apply实例解析的相关文章

jQuery CSS()方法改变CSS样式实例解析

转自:http://www.jbxue.com/article/24588.html 分享一个jQuery入门实例:使用CSS()方法改变现有的CSS样式表,css()方法在使用上具有多样性.其中有一种可接受两个输入参数:样式属性和样式值,两者之间用逗号分隔.比如要改变链接颜色,可以这样编写代码: $("#61dh a").css('color','#123456');//选择器‘$("#61dh a")'表示ID为‘#61dh'的元素下的所有链接.//.css(‘

jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行?

jsp页面:js方法里嵌套java代码(是操作数据库的),如果这个js 方法没被调用,当jsp页面被解析的时候,不管这个js方法有没有被调用这段java代码都会被执行? 因为在解析时最新解析的就是JAVA代码,不管写哪里,都会最新被解析

Mock.JS拦截HTTP请求实例解析-JS笔记

MockJS是一种比较通用的前端模拟HTTP请求及回复的工具,能够仿真处各类HTTP的请求及返回结果.实现在无后端的情况下,前端对于后端接口的仿真.Mock的基础使用也是比较简单,本文我们主要和大家分享Mock.JS拦截HTTP请求实例解析,希望能帮助到大家. 但,在引入MockJS时,import Mock from 'mockjs'会拦截所有前端发出的HTTP请求,无论是否使用Mock.mock开启Mock仿真,都会拦截HTTP请求. 这也就是为何,就算不Mock.mock也会后端无法获取前

JS中call和apply方法的区别

1.call 方法 先上个小demo: <span style="font-size:14px;">function add(a,b) { alert(a+b); } function sub(a,b) { alert(a-b); } <span style="color:#ff6600;">add</span>.call(sub,2,1); </span> 相信看完这个demo大家都明白了,就是用 add()方法来替

第164天:js方法调用的四种模式

js方法调用的四种模式 1.方法调用模式 1 function Persion() { 2 var name1 = "itcast", 3 age1 = 19, 4 show1 = function() { 5 console.log(this.name); 6 }; 7 8 return { 9 age : age1, 10 name : name1, 11 show : show1 12 }; 13 } 14 15 var p = new Persion(); 16 p.show(

js数组元素由小到大排序实例代码

js数组元素由小到大排序实例代码:有时候需要对数组中的数字进行排序,下面是一段将数组中数字由小到大排序的代码实例,希望能够帮到大家.实例代码如下: var arr=[2,55,55,1,75,3,9,35,70,166,432,678,32,98]; var len=arr.length; console.log(arr.join(",")); var newarr=[]; for(var i=0;i<len;i++){ newarr.push(Math.min.apply(nu

JS中call和apply区别有哪些 记录

一.call和apply区别 传递参数的方式.用法上不同,主要是参数不完全同 (1).B.Function.call(A,arg,arg) 这个例子是讲A对象“调用”B对象的Function(某个具体的方法). 注意call方法中的参数arg: a) arg的个数为零或多个; b) arg可以是任何类型,包括Array. call在这里译为“调用”,在JS中可以理解为“A对象调用B对象的某个方法”: (2).B.Function.apply(A,args) 这个例子是讲A对象“应用”B对象的Fu

js如何是利用apply实现继承

js如何是利用apply实现继承:javascript是一种面向对象的语言,当然继承是它的重要特征之一,比如常规的可以使用原型实现继承,不过使用apply可是可以实现继承的,下面就通过代码实例介绍一下,关于apply函数这里就不介绍了,具体可以参阅javascript的call()和apply()的作用和区别一章节. 下面看代码实例: function Parent(username){ this.username=username; this.sayHello=function(){ aler

搭建NFS文件共享--实例解析

1 NFS简介 NFS 是Network File System的缩写,即网络文件系统.一种使用于分散式文件系统的协定,由Sun公 司开发,于1984年向外公布.功能是通过网络让不同的机器.不同的操作系统能够彼此分享个别的数据, 让应用程序在客户端通过网络访问位于服务器磁盘中的数据,是实现磁盘文件共享的一种方法. NFS 的基本原则是"容许不同的客户端及服务端通过一组RPC分享相同的文件系统",它是独立于操作 系统,容许不同硬件及操作系统的系统共同进行文件的分享. 2 NFS服务器的配