理解JavaScript中的call和apply方法
call方法
总的来说call方法有这几种作用:1.可以借用另一个对象的方法。2.改变this的指向(重要)。3.将arguments数组化。下面详细介绍这三种作用:
1.可以借用另一个对象的方法:当一个对象需要借用另一个对象的方法时,此时需要用到call方法。
//对象1
var myclass={
getNumbers:function(sum,sum1){
return sum+sum1;
}
};
//对象2
var student={
getDetail:function(){
return {name:'张三',habits:'打篮球'}
}
};
//借用
console.log(myclass.getNumbers.call(student,10,200)); //
这里student对象想要借用myclass对象中的getNumbers方法,需要借用谁的,就将它写在前头。这样就可以实现调用,需要注意的是函数也是对象,同样可以用call方法。
2.改变this的指向(重要)。
先来看个例子: 用户名:<input type="text" id=“text" value="张三" />
var value="李四";
//函数中默认this指向window
function fn1(){
console.log(this.value);
}
fn1();//李四
可以看出此时要想获得表单中的value值是获取不到的。那要如何才能获取到呢,这时call的作用就体现出来了。可以用以下方式获取:
function fn1(){
console.log(this.value);
}
fn1.call(document.getElementById('text')); //张三
这个时候this指向input元素对象。
总结一下:call是函数下的一个方法,call方法的第一个参数可以改变函数执行过程中内部this的指向,第二个参数开始就是原来函数的参数列表。
3.将arguments数组化。
这里先简单介绍一下什么是arguments:arguments是一个数组对象,用于保存函数的参数,准确点说应该是一个伪数组,你可以使用arguments对象在函数中引用函数的参数,它只有在代码运行的时候才起作用。如:
function add() {
var sum = 0,
len = arguments.length;
for (var i = 0; i < len; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add()); //
console.log(add(1)); //
console.log(add(1, 2, 3, 4)); //
前面说arguments是一个伪数组,那什么是伪数组,伪数组就是它类似于数组,但除了length属性和索引元素之外没有任何数组的属性方法,比如没有push方法。在JavaScript中arguments和通过document获取的dom集合都属于伪数组。
所以我们很有必要将这些伪数组转换成真数组以便可以使用数组的属性方法。我们可以用call方法将它转换成一个真正的数组:Array.prototype.slice.call(arguments)。利用这个固定用法就可以实现,用一个例子说明一下。
function add(){
var sum=0;
/*arguments.push(10) //直接这样写则会报错*/
var arr = Array.prototype.slice.call(arguments)
arr.push(10)
for(var i=0;i<arr.length;i++){
sum+=arr[i]
}
return sum;
}
var sum = add(1,2,3,4,5)
console.log(sum) //
apply方法
其实apply方法与call方法的作用是一样的,他们的不同点在于:接收参数的方式不一样。apply方法的第一个参数与call一样,第二个参数是一个参数数组,而call方法传递给函数的参数必须列举出来,还是上面那个例子:
1 //对象1
2 var myclass={
3 getNumbers:function(sum,sum1){
4 return sum+sum1;
5 }
6 };
7 //对象2
8 var student={
9 getDetail:function(){
10 return {name:'张三',habits:'打篮球'}
11 }
12 };
13 //借用
14 console.log(myclass.getNumbers.call(student,10,20)); //20
15 console.log(myclass.getNumbers.apply(student,[10,10)]); //
那么我们在什么情况下用apply,什么情况下用call呢?如果参数形式是数组的时候,比如传递参数arguments这种数组类型的,并且他们的参数列表是一一对应的就可以采用apply方法。若参数列表不一致,比如getNumbers的参数列表是(sum,sum1),而student的参数列表是(10,10,20)的,这样就可以用call方法,当然apply的作用不止这些。
apply的其他用法。
1.利用Math.max()函数和Math.min()函数获取数组的最大最小值。我们知道JavaScript中的Math.max()函数,接收的是任意个参数:
console.log(Math.max(1,5,9,2,7,6)) //
但在很多情况下,我们需要找到数组中的最大元素。想这么写肯定是不行的:
var arr=[2,4,9,1]
console.log(Math.max(arr))
我们传统的方法是遍历每一个元素:
function getMax(arr){
for(var i=0,max=arr[0];i<arr.length;i++){
max=Math.max(max,arr[i]);
}
return max;
}
console.log(getMax([1,3,5,6])); //
这么写比较低效,换成apply:
function getMax2(arr){
return Math.max.apply(null,arr);
/* return Math.max.call(null,1,3,5,6);*/
}
console.log(getMax2([1,3,5,6])) //
这样明显效率要高很多。
2.将一个数组合并到另一个数组中。我们传统写法是这样的:
var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
function PushArray(arr1,arr2){
for(var i=0;i<arr2.length;i++){
arr1.push(arr2[i])
}
return arr1;
}
var result = PushArray(arr1,arr2);
console.log(result); //["1", "2", "3", "4", "5", "6"]
换成apply方法需要这么写:Array.prototype.push,可以实现两个数组合并。同样push方法没有提供push一个数组,但是它提供了push(param1,param,…paramN),所以同样也可以通过apply来转换一下这个数组,即
var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);
apply用的多是因为函数可以接收不限个参数,这样我们就只能使用arguments老管理可变参数,比如max min push join split replace等方法,apply虽然传递的是数组,但是使用的时候是把数组拆开的。
3.apply不仅仅是使用上面列到的几个函数而已,它还有更加高层的用途:
function add(a, b) {
return a + b;
}
function add(){
var sum=0;
for(var i=0;i<arguments.length;i++){
sum+=arguments[i]
}
return sum;
}
var sum = add(1,2,3,4,5)
console.log(sum); //
//如何计算数组的和
var sum2 = add.apply(null,[1,2,3,4,5])
console.log(sum2); //
有什么不足的请指出。
改变
理解JavaScript中的call和apply方法的更多相关文章
- 简单理解Javascript中的call 和 apply
javascript中面向对像的能力是后来加进来的, 为了兼容性, 所以整出了很多奇特的东西, function Animal(){ this.name = "Animal"; t ...
- javascript中的call()和apply()方法的使用
1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[, [,.argN]]]]]) 定义:调用一个对象的一个方法,以另一个对象替换当前对象. 说明: call ...
- 浅谈javascript中的call与apply方法
call方法与apply方法都是为了改变函数体内部this的指向. call方法与apply方法,这二者的作用完全一样,只是接受参数的方式不太一样. apply()方法: Function.apply ...
- 浅谈javascript中的call()和apply()方法
话说在js中,每个函数都包含两个非继承而来的放方法,apply()和call(),使得我们能在特定的作用域中调用函数. 官方定义: 语法: fun.call(thisArg[, arg1[ ...
- Javascript中call方法和apply方法用法和区别
第一次在博客园上面写博客,知识因为看书的时候发现了一些有意思的知识,顺便查了一下资料,就发到博客上来了,希望对大家有点帮助. 连续几天阅读<javascript高级程序设计>这本书了,逐渐 ...
- 理解JS中的call、apply、bind方法(*****************************************************************)
在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...
- 【原】理解javascript中的this
最近的文章基本都是总结javascript基础内容的,因为我觉得这些东西很重要.而且很多时候你觉得你理解了,其实并没有你自认为的那么理解.十月份没怎么写文章,因为国庆出去玩的比较久,心变野了,现在是时 ...
- js笔记——理解js中的call及apply
call及apply在js里经常碰得到,但一直感觉很陌生,不能熟练使用.怎样才能熟练应用呢? 为什么存在call和apply? 在javascript OOP中,我们经常会这样定义: function ...
- 深入理解JavaScript中创建对象模式的演变(原型)
深入理解JavaScript中创建对象模式的演变(原型) 创建对象的模式多种多样,但是各种模式又有怎样的利弊呢?有没有一种最为完美的模式呢?下面我将就以下几个方面来分析创建对象的几种模式: Objec ...
随机推荐
- return false与return true的区别
<a href="http://www.baidu.com" onclick="alert(11);return true;alert(22)">链 ...
- redis客户端可以连接集群,但JedisCluster连接redis集群一直报Could not get a resource from the pool
一,问题描述: (如题目)通过jedis连接redis单机成功,使用JedisCluster连接redis集群一直报Could not get a resource from the pool 但是使 ...
- 15分钟理解HTTPS——通俗篇
| 导语 它很深奥吗?你肯定常常见过它,使用它,甚至离不开它... 它很浅显吗?你可能觉得看透它,理解它,甚至懂它... 让我们用15分钟,不那么学术地将它的深挖到底~ 什么?如何证明我是我?本文要上 ...
- 生产者/消费者问题的多种Java实现方式
实质上,很多后台服务程序并发控制的基本原理都可以归纳为生产者/消费者模式,而这是恰恰是在本科操作系统课堂上老师反复讲解,而我们却视而不见不以为然的.在博文<一种面向作业流(工作流)的轻量级可复用 ...
- http的CA证书安装(也就是https)
近几年随着安全意识的提高,https流行起来,很多小伙伴不太了解https是什么,其实http和https并没有区别,简单的来说,https就是将http通信进行了加密和解密的一个过程.加上谷歌浏览器 ...
- apache实现301永久性重定向代码
301重定向(301 redirect)又叫301代表永久性转移(Permanently Moved),将各种网络请求重新定个方向转到其它位置,是网页更改地址后对搜索引擎友好的最好方法,只要不是暂时搬 ...
- Restful风格,PUT修改功能请求,表单中存在文件报错-HTTP Status 405 - Request method 'POST' not supported
解决方案配置如下 <!-- 配置文件上传解析器 --> <bean id="multipartResolver" class="org.springfr ...
- [BZOJ 4417][Shoi2013]超级跳马
4417: [Shoi2013]超级跳马 Time Limit: 10 Sec Memory Limit: 256 MBSubmit: 379 Solved: 230[Submit][Status ...
- Django--入门篇:下载与项目生成
django作为python web应用开发最火的框架,没有之一,今天就给大家介绍django的一些入门知识. 我们选择pycharm工具,首先得要有django. 1.下载django --pip ...
- Alpha冲刺No.9
一.站立式会议 继续解决真实手机中的问题,如果不能解决,请教助教学姐 数据库备忘录的获取和上传 细化界面设计 二.项目实际进展 用一种奇怪的方式解决了真实手机中的问题,在总结里细说. 完成数据库备忘录 ...