apply()和call()的方法的区别

参考文档https://www.cnblogs.com/lengyuehuahun/p/5643625.html

一直都没太明白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); // /*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); //2
c2.showAdd(3,1); //4

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("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2); //得到合并后数组的长度,因为push就是返回一个数组的长度

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

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

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

apply()和call()的方法的更多相关文章

  1. JavaScript的apply()方法和call()方法

    1 <script type="text/javascript"> 2 /*定义一个人类*/ 3 function Person(name,age) 4 { 5 thi ...

  2. 利用apply和arguments复用方法

    首先,有个单例对象,它上面挂了很多静态工具方法.其中有一个是each,用来遍历数组或对象. var nativeForEach = [].forEach var nativeMap = [].map ...

  3. JavaScript中的apply()方法和call()方法使用介绍

    1.每个函数都包含两个非继承而来的方法:apply()和call(). 2.他们的用途相同,都是在特定的作用域中调用函数. 3.接收参数方面不同,apply()接收两个参数,一个是函数运行的作用域(t ...

  4. 彻底理解了call()方法,apply()方法和bind()方法

    javascript中的每一个作用域中都有一个this对象,它代表的是调用函数的对象.在全局作用域中,this代表的是全局对象(在web浏览器中指的是window).如果包含this的函数是一个对象的 ...

  5. apply方法和call方法。函数属性与方法。

    每个函数都有length属性哥prototype属性. length属性表示的是函数接入参数的个数 在es引用类型语言中,prototype是保存它们所有实例方法的真正所在.换句话来说,类似于toSt ...

  6. AngularJs $scope 里面的$apply 方法和$watch方法

    Angular $scope 里面的$apply 方法 Scope提供$apply方法传播Model变化 <!DOCTYPE html> <html> <head> ...

  7. 【JavaScript】call和apply区别及使用方法

    一.方法的定义call方法: 语法:fun.call(thisArg[, arg1[, arg2[, ...]]])定义:调用一个对象的一个方法,以另一个对象替换当前对象.说明:call 方法可以用来 ...

  8. apply方法和call方法的详解2

    1.apply和call的区别在哪里 2.什么情况下用apply,什么情况下用call 3.apply的其他巧妙用法(一般在什么情况下可以使用apply) 我首先从网上查到关于apply和call的定 ...

  9. apply()方法和call()方法

    obj.func.call(obj1)       //是将obj1看做obj,调用func方法,将第一个参数看做函数调用的对象,可以看做,将obj的方法给obj1使用 ECMAScript规范给所有 ...

随机推荐

  1. vscode 设置 eclipse 快捷键

    点击安装之后,默认就是要ecliplse快捷键了 注意:部分快捷键可能会由于和原来的冲突而失效,例如快速在“下面插入行” ,我还是不能使用ecliplse的Shift+Enter,而要用Ctrl+En ...

  2. 在vue项目中使用element-ui的Upload上传组件

    <el-upload v-else class='ensure ensureButt' :action="importFileUrl" :data="upLoadD ...

  3. js对象和jQuery对象相互转换

    (1)什么是js对象及代码规则 就是使用js-API,即Node接口中的API或是传统JS语法定义的对象,叫做js对象 js代码规则----divElement var divElement = do ...

  4. JavaScript中"Uncaught TypeError: Cannot set property 'innerHTML' of null"错误

    写了一个函数,在调用时出错:"Uncaught TypeError: Cannot set property 'innerHTML' of null" 代码如下: <!DOC ...

  5. web.config 配置无后缀文本的访问

    在 www.sslforfree.com 申请ssl免费证书,我参考了别人分享的方法,采用了文件验证的方式.可是按照步骤把文件放好后,一直访问不了,总是跳到了404. 确定文件路径和上传的文件都没问题 ...

  6. SpringBoot: 1.创建第一个SpringBoot项目(转)

      一.新建项目 二.打开项目的pom文件,在里面添加maven依赖 1 <!--springboot项目依赖的父项目--> 2 <parent> 3 <groupId& ...

  7. VS Code中内置终端运行C中文乱码问题

    环境:Win10 + VS Code + Code Runner插件 原因:VS Code默认文件编码为 UTF-8,生成的可执行文件也是UTF-8编码的,但是系统编码为 GB2312,所以程序中的中 ...

  8. Jmeter接口测试 1=> 接口测试介绍

    第一节 接口测试概念 什么是接口测试概念:接口测试是测试系统组件间接口的一种测试.接口测试主要用于检测外部系统与系统之间以及内部各个子系统之间的交互点. 测试的重点是要检查数据的交换,传递和控制管理过 ...

  9. Claymore's Dua Miner挖矿教程

    一.软件准备:首先需要一款挖矿软件.在这里推荐Claymore's Dua Miner的官方原版. 注意: 1. 如果不了解,请不要在网上随意下载其它版本的挖矿软件或者Claymore's Dua M ...

  10. SpringCloud学习(一)服务的注册与发现Eureka(Finchley版本)

    创建服务注册中心 在这里,我还是采用Eureka作为服务注册与发现的组件. 首先创建一个空项目 首先创建一个空项目,再创建一个maven项目,首先创建一个主Maven工程,在其pom文件引入依赖,sp ...