一直都没太明白apply()与call()的具体使用原理,今日闲来无事,决定好好研究一番。

JavaScript中的每一个Function对象都有一个apply()方法和一个call()方法,它们的语法分别为:

/*apply()方法*/
function.apply(thisObj[, argArray]) /*call()方法*/
function.call(thisObj[, arg1[, arg2[, [,...argN]]]]);

它们各自的定义:

apply:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.apply(A, arguments);即A对象应用B对象的方法。

call:调用一个对象的一个方法,用另一个对象替换当前对象。例如:B.call(A, args1,args2);即A对象调用B对象的方法。

它们的共同之处:

都“可以用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由thisObj指定的新对象”。

它们的不同之处:

apply:最多只能有两个参数——新this对象和一个数组argArray。如果给该方法传递多个参数,则把参数都写进这个数组里面,当然,即使只有一个参数,也要写进数组里。如果argArray不是一个有效的数组或arguments对象,那么将导致一个TypeError。如果没有提供argArray和thisObj任何一个参数,那么Global对象将被用作thisObj,并且无法被传递任何参数。

call:它可以接受多个参数,第一个参数与apply一样,后面则是一串参数列表。这个方法主要用在js对象各方法相互调用的时候,使当前this实例指针保持一致,或者在特殊情况下需要改变this指针。如果没有提供thisObj参数,那么 Global 对象被用作thisObj。

实际上,apply和call的功能是一样的,只是传入的参数列表形式不同。

示例代码:

(1)基本用法

function add(a,b){
return a+b;
}
function sub(a,b){
return a-b;
}
var a1 = add.apply(sub,[4,2]);  //sub调用add的方法
var a2 = sub.apply(add,[4,2]);
alert(a1); //6
alert(a2); //2 /*call的用法*/
var a1 = add.call(sub,4,2);

(2)实现继承

function Animal(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
} function Cat(name){
Animal.apply(this,[name]);
} var cat = new Cat("咕咕");
cat.showName(); /*call的用法*/
Animal.call(this,name);

(3)多重继承

function Class10(){
this.showSub = function(a,b){
alert(a - b);
}
} function Class11(){
this.showAdd = function(a,b){
alert(a + b);
}
} function Class12(){
Class10.apply(this);
Class11.apply(this);
// Class10.call(this);
//Class11.call(this);
} var c2 = new Class12();
c2.showSub(3,1); //
c2.showAdd(3,1); //

apply的一些其他巧妙用法

(1)Math.max 可以实现得到数组中最大的一项:

因为Math.max不支持Math.max([param1,param2])也就是数组,但是它支持Math.max(param1,param2...),所以可以根据apply的特点来解决 var max=Math.max.apply(null,array),这样就轻易的可以得到一个数组中的最大项(apply会将一个数组转换为一个参数接一个参

数的方式传递给方法)

这块在调用的时候第一个参数给了null,这是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,所以直接传递了一个null过去。

用这种方法也可以实现得到数组中的最小项:Math.min.apply(null,array)

(2)Array.prototype.push可以实现两个数组的合并

同样push方法没有提供push一个数组,但是它提供了push(param1,param2...paramN),同样也可以用apply来转换一下这个数组,即:

var arr1=new Array("","","");
var arr2=new Array("","","");
Array.prototype.push.apply(arr1,arr2); //得到合并后数组的长度,因为push就是返回一个数组的长度

也可以这样理解,arr1调用了push方法,参数是通过apply将数组转换为参数列表的集合

通常在什么情况下,可以使用apply类似Math.max等之类的特殊用法:

一般在目标函数只需要n个参数列表,而不接收一个数组的形式,可以通过apply的方式巧妙地解决这个问题。

apply()与call()的区别的更多相关文章

  1. 瞬间记住Javascript中apply与call的区别

    关于Javascript函数的apply与call方法的用法,网上的文章很多,我就不多话了.apply和call的作用很相似,但使用方式有区别 apply与call的第一个参数都是一个对象,这个对象就 ...

  2. 改变this指针的apply,call,bind的区别

    apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(context)而存在的,换句话说,就是为了改变函数体内部 this 的指向. Jav ...

  3. apply()和call()的区别

    这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this对象的值. apply()接收两个参数:一个参数是在其中运行的作用域,另一个是参数数组(可以是Array实例,也可以是arg ...

  4. 【JavaScript】apply和call的区别在哪?

    我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家 ...

  5. android SharedPreferences apply和commit的区别

    1.apply没有返回值而commit返回boolean表明修改是否提交成功2.apply是将修改数据原子提交到内存, 而后异步真正提交到硬件磁盘, 而commit是同步的提交到硬件磁盘3.apply ...

  6. JavaScript之apply()和call()的区别

    我 在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示 例,总算是看的有点眉目了,在这里我做如下笔记,希望和 ...

  7. JS 中的this指向问题和call、apply、bind的区别

    this的指向问题 一般情况下this对象指向调用函数的对象,全局环境中执行函数this对象指向window. function a(){ console.log(this); //输出函数a中的th ...

  8. .call() 和 .apply() 的含义和区别

    JavaScript中apply与call的用法意义及区别 apply()与call()的区别 javascript中apply和call方法的作用及区别说明 .apply()用法和call()的区别 ...

  9. apply 和call 的区别,apply实用小技巧

    Js apply方法详解 我在一开始看到javascript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这 ...

  10. this+call、apply、bind的区别与使用

    http://www.ruanyifeng.com/blog/2018/06/javascript-this.html https://segmentfault.com/a/1190000018017 ...

随机推荐

  1. iOS stretchableImageWithLeftCapWidth 图片放大不变形

    转载自:http://www.cnblogs.com/bandy/archive/2012/04/25/2469369.html - (UIImage *)stretchableImageWithLe ...

  2. 【转】memcached工作原理介绍

    FROM: http://my.oschina.net/flynewton/blog/8984 官方主页: http://memcached.org/ 面临的问题  对于高并发高访问的Web应用程序来 ...

  3. ListView Video

    com.baidu.frontia.FrontiaApplication ListView Video <item name="android:windowBackground&quo ...

  4. SQL书写技巧

    SQL书写技巧: 1.针对分区表,如果可以使用分区条件的,一定要加分区条件.分区条件的使用,可以减少不必要的数据访问,加快查询数据,如TB_CSV_ACCEPT_FLOW_OPERATOR表,以acc ...

  5. five kinds of IPC methods

    Shared memory permits processes to communicate by simply reading and writing to a specified memory l ...

  6. [Doc ID 433386.1]JSP Pages Hanging in R12 After Removing Cached Class Files in _pages

    In this Document   Symptoms   Changes   Cause   Solution   References Applies to: Oracle Application ...

  7. angularjs学习总结一(表达式、指令、模型)

    一:自执行匿名函数 (function(){ /*code*/})();自执行匿名函数:常见格式:(function() { /* code */ })();解释:包围函数(function(){}) ...

  8. 关于Ajax的实现

    AJAX:Asynchronous Javascript And XML.异步的JavaScript和XML. 同步请求: 异步请求: 1.1.1    XMLHttpRequest对象的介绍: 方法 ...

  9. 【Fibonacci】BestCoder #28B Fibonacci

    Fibonacci Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/65536 K (Java/Others)Total S ...

  10. update目标在查询返回结果集中的解决方案

     示例: students为学生信息表 Score为成绩表 两个表通过学生号关联 要求:将总成绩小于100的学生名称改为‘天才’ sql如下: error提示:update目标不能在查询返回结果集中 ...