玩转方法: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)。明白了么？记住，传入参数的顺序要与函数声明参数的顺序保持一致。
了解了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最广泛的应用，就是用于构造继承。

赞 (0)

相关推荐

  • 玩转方法:call和apply

    在ECMAScript v3中,给Function原型定义了这两个方法,这两个方法的作用都是一样的:使用这两个方法可以像调用其他对象方法一样调用函数,这句话是从书上抄的,至少我是没读明白这是什么意思. 下面说简单易懂的,先看段代码: 复制代码 代码如下: function Introduce(name,age) {     document.write("My name is "+name+".I am "+age); } var p=new People(); I

  • JS中改变this指向的方法(call和apply、bind)

    this是javascript的一个关键字,随着函数使用场合不同,this的值会发生变化.但是总有一个原则,那就是this指的是调用函数的那个对象. this一般指向的是当前被调用者,但也可以通过其它方式来改变它的指向,下面将介绍三种方式: 1.call用作继承时: function Parent(age){ this.name=['mike','jack','smith']; this.age=age; } function Child(age){ Parent.call(this,age);

  • 浅谈angular.js中实现双向绑定的方法$watch $digest $apply

    Angular.js 中的特性,双向绑定. 多么神奇的功能,让视图的改变直接反应到数据中,数据的改变又实时的通知到视图,如何做到的? 这要归功于 scope 下面3个重要的方法: $watch $digest $apply 他们的区别是什么,我们来介绍下: $watch 这是一个监听 scope 上数据的监听器 方法说明: $scope.$watch('参数',function(newValue,oldValue){ //逻辑处理 }) 上面我们就是创建了一个监听器. '参数' 就是$scope

  • apply和call方法定义及apply和call方法的区别

    如果没接触过动态语言,以编译型语言的思维方式去理解javaScript将会有种神奇而怪异的感觉,因为意识上往往不可能的事偏偏就发生了,甚至觉得不可理喻.如果在学JavaScript这自由而变幻无穷的语言过程中遇到这种感觉,那么就从现在形始,请放下的您的"偏见",因为这对您来说绝对是一片新大陆.好了,不给大家唠嗑了,言归正传吧,先给大家讲下apply和call方法的定义. 具体内容如下所示: 1.方法定义 call, apply都属于Function.prototype的一个方法,它是J

  • Javascript玩转继承(一)

    Javascript玩转继承(一)

    Javascript究竟是一门面向对象的语言,还是一门支持对象的语言,我想每个人都有着自己的看法.那些Javascript忠实的Fans一定讲Javascript是一门面向对象的语言,像<Javascript王者归来>一书中对Javascript的说法是基于原型的面向对象.我谈谈我个人的看法.面向对象的三个特征,继承,多态,封装,Javascript虽然实现起来不像Java,C#等面向对象的语言来得快,但是毕竟也有着一定的支持.因此说Javascript是面向对象的语言是有着一定道理的,但是从

  • Javascript学习笔记8 用JSON做原型

    代码如下: 复制代码 代码如下: <script type="text/javascript"> var People = { name: "kym", age: 21, SayHello: function () { alert("Hello,My name is " + this.name + ".I am " + this.age); } } alert(People.name); People.SayHel

  • angularJS中$apply()方法详解

    对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 复制代码 代码如下: "scope is an object that refers to the application model. It is an execution c

  • JS中使用apply方法通过不同数量的参数调用函数的方法

    apply()方法定义 函数的apply()方法和call方法作用相同,区别在于接收的参数的方式不同. apply()方法接收两个参数,一个是对象,一个是参数数组. apply()作用 1.用于延长函数的作用域 示例: var color='red'; var o={color:'blue'}; function sayColor(){ console.log(this.color); } sayColor();//"red" sayColor.apply(o);//"blu

  • Javascript中的apply()方法浅析

    之前我们说过 Javascript Call方法,这次我们就说说和Call方法类似的apply方法. apply vs call 两者间的不同在于:传递的是参数,还是参数数组 这个是call的用法 复制代码 代码如下: theFunction.call(valueForThis, arg1, arg2, ...) 而这个则是apply 复制代码 代码如下: theFunction.apply(valueForThis, arrayOfArgs) 故而 复制代码 代码如下: arrayOfArgs

  • 基于JavaScript实现继承机制之调用call()与apply()的方法详解

    call() 方法call() 方法是与经典的对象冒充方法最相似的方法.它的第一个参数用作 this 的对象.其他参数都直接传递给函数自身.例如: 复制代码 代码如下: function sayHello(sPrefix,sSuffix) {    alert(this.name + "says" + sPrefix + sSuffix);}; var obj = new Object();obj.name = "Tom"; sayHello.call(obj, &

随机推荐