Javascript apply与call函数详解

原创 2016年06月01日 15:17:08

一、apply

1、apply的作用:委托或者代理一个方法
apply的作用,说白了,其实就是用来调用一个函数,并更改被调用函数的this所指向的对象的。我觉得其实apply就是委托或者代理。这句话看着有点抽象,先看下面例子再回看这句话


2、示例1:无参的和一个参数的apply
apply()的参数为空时,默认调用全局对象

var x = 0;
function test(){
  alert(this.x);
}
var Q={};
Q.x = 1;
Q.m = test;
Q.m.apply(); //弹框内容为全局的x的0,而不是Q的x的1

因为Q.m=test所以其实Q.m.apply()这句代码的意思就是,执行test,并使test函数里面的this为全局对象。说白了,Q.m()和Q.m.apply()并没有什么区别,都是执行test,不同的是apply改变了test内的this,使其为全局对象。
若把最后一行改为Q.m.apply(Q);这句代码的意思是Q.m的this为Q,即此时test的this为Q,于是弹框内容为Q的x的1


3、apply本质
结合一跟二来看,在二中的代码的最后一行Q.m.apply();这句代码的本质含义,其实就是apply调用Q.m,也就是test函数,然后apply把test的this改为全局对象window。再说的详细点,或许可以这么说,Q.m把自己委托给了apply,嗯,没错,就是委托。看到这里,基本就可以很好的把握apply了。


4、示例2:两个参数的apply与继承
来个老掉牙的例子吧:

function Person(name,age){      //定义一个人
this.name=name;     
this.age=age;       
    this.sayhello=function(){alert("hello")};
}

function Student(name,age,grade){    //学生类 
    Person.apply(this,arguments);       //这里实现了继承,后面会有解释
this.grade=grade;                               
}

然后我们可以:
var s=new Student(“小明”,18,5);
s. sayhello();
我们在定义Student的时候,并没有为Student添加sayhello函数,但是Student却有sayhello函数,这个函数是怎么来的?应当注意到,我们的Student里面有这么一句代码:
Person.apply(this,arguments);由于这句代码是在Student里面的,并且Student是通过new来调用的,所以这句代码里面的this就是Student。所以这句代码的意思,就是执行Person函数,但是Person函数里面的this指向Student,arguments则作为Person的参数。也就是Person.apply(this,arguments);这句代码相当于执行下面这样的代码:

function Person(name,age){      //定义一个人
Student.name=name;     
Student.age=age;       
    Student.sayhello=function(){alert("hello")};
}

于是Student就有了sayhello函数。


5、apply参数文档
Parameters
thisArg
The value of this provided for the call to fun. Note that this may not be the actual value seen by the method: if the method is a function in non-strict mode code, null and undefined will be replaced with the global object, and primitive values will be boxed.
argsArray
An array-like object, specifying the arguments with which fun should be called, or null or undefined if no arguments should be provided to the function. Starting with ECMAScript 5 these arguments can be a generic array-like object instead of an array. See below for browser compatibility information.


二、call

call与apply功能相同,用法以及原理也一样,参数略有不同。前面的apply的第二个参数arguments是一个参数数组而call的第一个参数跟apply一样,是一个this,剩下参数都是call调用的参数,call是变参的。示例:

function Product(name, price) {
  this.name = name;
  this.price = price;
}

function Food(name, price) {
  Product.call(this, name, price);
  this.category = 'food';
}

相关文章推荐

JavaScript中的apply和call函数详解

注:本文转自 http://www.jb51.net/article/52416.htm         每个JavaScript函数都会有很多附属的(attached)方法,包括toStrin...

JavaScript中bind、call、apply函数用法详解

在给我们项目组的其他程序介绍 js 的时候,我准备了很多的内容,但看起来效果不大,果然光讲还是不行的,必须动手。前几天有人问我关于代码里 call() 函数的用法,我让他去看书,这里推荐用js 写服务...

javascript 函数中的apply()和call()方法。

ECMAScript 中的函数是对象,因此函数也有属性和方法,每个函数都包括两个属性length 和prototype,每个函数都包含有两个非继承而来的方法,apply()和call(),今天主要学习...

关于javascript的apply和call函数

====================================================== 注:本文源代码点此下载 =============================...

javascript中函数call方法和apply方法

javascript函数call()方法与apply()方法

javascript基础(函数属性arguments,方法:call,apply)(二十)

1.函数属性arguments,方法:call,apply: /* * 除了this,在调用函数时,浏览器还传递了另一个隐含的参数 * 还有...

Javascript中bind、call、apply函数用法

转自:http://developer.51cto.com/art/201503/466978.htm js 里函数调用有 4 种模式:方法调用、正常函数调用、构造器函数调用、apply/c...

JavaScript中call、apply、bind函数的用法

call、apply、bind函数的应用

javascript 的bind/apply/call函数

javascript有三个使用频率非常高的内建函数:bind/apply/call。许多高级点的技巧都是基于这几个函数来实现的。这三个函数都用于改变函数的执行环境.从而达到代码复用的目的。 先来...

javascript 函数 function arguments caller callee apply() call()

在JavaScript中,函数
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript apply与call函数详解
举报原因:
原因补充:

(最多只允许输入30个字)