玩转方法:call和apply_javascript技巧

在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)。明白了么?记住,传入参数的顺序要与函数声明参数的顺序保持一致。
了解了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.跨域调用

看一个简单的例子(仅为演示,无任何价值):

复制代码 代码如下:

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-08-22 15:13:10

玩转方法:call和apply_javascript技巧的相关文章

ps新手教程之学习图层的基础知识-玩转ps的图层操作技巧

  ps新手教程之学习图层的基础知识-玩转ps的图层操作技巧,艺术家使用ps,摄影师使用ps,数码玩家们也使用ps,与此同时,web设计湿更是离不开PS !该软件气势空前鼎盛,无人不知无人不晓.图层面板是自由独立于ps工作空间里面的一个面板.在这个神奇的图层里面,我们可以缩放.更改颜色.设置样式.改变透明度,等等等等.一个图层代表了一个单独的元素,设计师可以任意更改之.图层可以说在网页设计中起着至关重要的作用.他们用来表示网页设计的元素,他们是用来显示文本框.图像.背景.内容和更多其他元素的基底

数据库设计方法、规范与技巧

规范|技巧|设计|数据|数据库|数据库设计 数据库设计方法.规范与技巧(推荐)   一.数据库设计过程数据库技术是信息资源管理最有效的手段.数据库设计是指对于一个给定的应用环境,构造最优的数据库模式,建立数据库及其应用系统,有效存储数据,满足用户信息要求和处理要求.数据库设计中需求分析阶段综合各个用户的应用需求(现实世界的需求),在概念设计阶段形成独立于机器特点.独立于各个DBMS产品的概念模式(信息世界模型),用E-R图来描述.在逻辑设计阶段将E-R图转换成具体的数据库产品支持的数据模型如关系

数据库设计方法、规范与技巧(推荐)

规范|技巧|设计|数据|数据库|数据库设计 数据库设计方法.规范与技巧(推荐)   一.数据库设计过程数据库技术是信息资源管理最有效的手段.数据库设计是指对于一个给定的应用环境,构造最优的数据库模式,建立数据库及其应用系统,有效存储数据,满足用户信息要求和处理要求.数据库设计中需求分析阶段综合各个用户的应用需求(现实世界的需求),在概念设计阶段形成独立于机器特点.独立于各个DBMS产品的概念模式(信息世界模型),用E-R图来描述.在逻辑设计阶段将E-R图转换成具体的数据库产品支持的数据模型如关系

moq 的常用使用方法(推荐)_实用技巧

Moq,就是Mock you.读音可以读成Mock~you.是Mock框架的一种.用于测试中的Mock测试.Mock是模拟的意思.Mock是模拟对象的一种技术. 测试方法 // 准备 Mock IFoo 接口 var mock = new Mock<IFoo>(); // 配置准备模拟的方法,当调用接口中的 DoSomething 方法,并传递参数 "bing" 的时候,返回 true mock.Setup(foo => foo.DoSomething("p

我玩百度知道的5个技巧总结

中介交易 http://www.aliyun.com/zixun/aggregation/6858.html">SEO诊断 淘宝客 云主机 技术大厅 相信现在的中国人对百度是没有人不知道,有什么问题百度一下你就知道作为中国最大的搜索引擎百度,流量是巨大的,一旦我们玩好了百度的小小的一个方面那对我们的网站推广是多大的相信大家都能衡量,所以网站推广离不开百度知道,下面讲讲我站怎么从300IP在10天左右的时间稳定的到2000IP技巧,下面从5点来揭晓. 1 自己提问注意方法和技巧,主要是我们提

郭永峰:博客营销方法与微博营销技巧

中介交易 SEO诊断 淘宝客 云主机 技术大厅 博客营销是目前最广泛的推广平台,又好用又实效.既能能打造属于自己的品牌,又可以对sem起到辅助作用,所以用途之大我想是做网络推广都之大.在加之今年火爆的微博,又迅速穿红在网络推广圈子,让众多业内人士多了一个推广平台.那咱就接下来系统的将将博客和微博推广的一些方法和技巧. 博客营销其实他就是一个媒体发布平台,而我们利用博客时千万不能当做单纯发广告的平台,那这样不仅你的博客权重上不来,而且也失去了博客的本身价值利用点了.打造博客可以尝试以下几种策略 1

foxmail基本设置方法、foxmail使用技巧

Foxmail设置: 一.打开 Foxmail,点击"邮箱"菜单中的"新建邮箱帐户": 二.进入 Foxmail 向导,输入"电子邮件地址"."密码"."帐户名称"."邮箱中采用的名称"以及路径选择 ,点击"下一步": 三.接收服务器类型您可以选择POP3或IMAP: <小贴士: 了解POP3.SMTP.IMAP> 如果您选择POP3服务器:请输入您邮箱的

PHP实现上一篇下一篇的方法实例总结_php技巧

本文实例分析了PHP实现上一篇下一篇的方法.分享给大家供大家参考,具体如下: php实现上一篇下一篇这个主要是通过sql来根据当前的id来进行判断然后筛选出当前ID之前的数据或ID之后的数据了就这么简单,具体的我们来看看. 实现网站文章里面上一篇和下一篇的sql语句的写法. 当前文章的id为 $article_id,当前文章对应分类的id是$cat_id,那么上一篇就应该是: 复制代码 代码如下: SELECT max(article_id) FROM article WHERE article

javascript设置文本框光标的方法实例小结_javascript技巧

本文实例总结了javascript设置文本框光标的方法.分享给大家供大家参考,具体如下: 对于text //得到光标位置 function getCaret(textbox) { var control = document.activeElement; textbox.focus(); var rang = document.selection.createRange(); rang.setEndPoint("StartToStart",textbox.createTextRange