理解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 ...
随机推荐
- TCP 连接关闭及TIME_WAIT探究
这里主要记录一下TCP连接在关闭的时刻,有哪些细节问题.方便在以后的程序设计中能够注意这些细节, 以避免出现这些错误.首先我们来看一下TCP的状态转换图.如<unix网络编程>卷一所示如下 ...
- 使用async和wait进行异步编程
本文来源于博客园-钱智慧,转载请注明出处 代码示例 // 要让一个方法成为异步方法: // - async修饰符. // - 返回类型是 Task 或者 Task<T>. 具体来说,如果函 ...
- async generator promise异步方案实际运用
es7 async方案 /******************async***********************/ var timeFn=function(time){ return new P ...
- java实现单链表的增删功能
JAVA 实现单链表的增删功能 package linked; class LinkedTable{ } public class LinkedTableTest { public static vo ...
- http,socks4,socks5代理的区别
HTTP代理 能够代理客户机的HTTP访问,主要是代理浏览器访问网页,它的端口一般为80.8080.3128等: SOCKS代理 SOCKS代理与其他类型的代理不同,它只是简单地传递数据包,而并不关心 ...
- ES6 中 Promise 详解
Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可以获取异步操作的消息.Promise 提供统一的 API ...
- [poj2152]fire_树形dp
fire poj-2152 题目大意:给出一颗树,给出两个相邻节点的距离,以及每个节点的接受范围,还有当前节点的代价.我们想要求出覆盖整个图的最小代价. 注释:一个点被覆盖,当且仅当该点有防火站或者这 ...
- Factorials
Factorials 阶乘 题目大意:给你一个数n,求出n ! 的最后一个非零位. 注释:n<=4200 想法:开始的想法是觉得这道题应该比较的有趣,因为我们知道,一个数的阶乘的最后的非零位后面 ...
- touch事件过程
local function onTouchBegan(touch, event) local point = touch:getLocation() --获取touch位置, 基于openGL坐标 ...
- 用 Go 编写一个简单的 WebSocket 推送服务
用 Go 编写一个简单的 WebSocket 推送服务 本文中代码可以在 github.com/alfred-zhong/wserver 获取. 背景 最近拿到需求要在网页上展示报警信息.以往报警信息 ...