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中bind、call、apply函数用法详解

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

JavaScript 中的 call() 和 apply() 方法深入理解

1、方法定义 call方法:  语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]])  定义:调用一个对象的一个方法,以另一个对象替换当前对象。  说明:...
  • xuanjiewu
  • xuanjiewu
  • 2016年07月09日 22:57
  • 762

JavaScript中 apply/call 与面向对象语言中继承关系的联系和区别

apply是否可理解为类的继承?
  • sinat_27088253
  • sinat_27088253
  • 2016年10月24日 17:06
  • 618

介绍call,callee,caller,apply的区别与应用

介绍call,callee,caller,apply的区别与应用
  • qq_30628821
  • qq_30628821
  • 2016年04月07日 09:57
  • 468

Javascript中call和apply的区别与详解

转自:http://www.7old.com/jiaocheng/show-1412.html 在js中call和apply它们的作用都是将函数绑定到另外一个对象上去运行,两者仅在定义参数方式有所区...
  • chelen_jak
  • chelen_jak
  • 2014年03月11日 16:12
  • 20249

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

ECMAScript 中的函数是对象,因此函数也有属性和方法,每个函数都包括两个属性length 和prototype,每个函数都包含有两个非继承而来的方法,apply()和call(),今天主要学习...
  • jerryisme
  • jerryisme
  • 2013年01月01日 20:12
  • 436

javascript函数调用,call和apply

在js中我们调用一个自己定义的函数一般都是 函数名() 调用一个函数。 然而在javascript中还有两种调用方式     函数名.call() ,函数名.apply()  其实如我们调用一个普...
  • zhonghua1989
  • zhonghua1989
  • 2012年09月18日 21:02
  • 1506

JS中的call、apply、bind方法详解

一、call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) 定义:调...
  • hj7jay
  • hj7jay
  • 2016年12月13日 14:31
  • 1170

JS中的call()方法和apply()方法用法总结

JacvaScript中的call()方法和apply()方法, 1. 每个函数都包含两个非继承而来的方法:call()方法和apply()方法。 2. 相同点:这两个方法的作用是一样的。都是在特定的...
  • ganyingxie123456
  • ganyingxie123456
  • 2017年04月27日 15:14
  • 12481

Js中apply与call的区别与用法

解析:apply与call是更改对象的内部指针,即改变对象的this指向的内容。 call与apply的第一个参数都是要传入给当前对象的对象,及函数内部的this。后面的参数都是传递给当前对象的参数。...
  • wangji5850
  • wangji5850
  • 2016年03月17日 12:00
  • 1504
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Javascript apply与call函数详解
举报原因:
原因补充:

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