作用:

替换当前对象的方法中的this。

理解:

call和apply是为了动态改变this出现的,当一个object没有某个方法,但是其他的有,我们可以借助call或apply用其它对象的方法来操作。

用的比较多的,通过document.getElementsByTagName选择的dom 节点是一种类似array的array。

它不能应用Array下的push,pop等方法。我们可以通过:

var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));

这样domNodes就可以应用Array下的所有方法了。

语法:

call([thisObj[,arg1[, arg2[,   [,.argN]]]]])  ##没提供thisObj , Global 对象将被用作 thisObj。参数用逗号分隔。

apply([thisObj [,argArray]])  ##没提供 thisObj , Global 对象将被用作 thisObj。参数为一个数组,与call的主要区别就在参数形式上,这样如果参数个数确定可以用call,如果参数个数不确定就用apply。

技巧:

1.把arguments转为数组

function args2arr() {
return [ ].slice.call(arguments, 0);
//return Array.prototype.slice.call(arguments, 0); //和上边的写法效果相同
}
args2arr(1, 2, 3, 5, 6, 7, 8); //[1, 2, 3, 5, 6, 7, 8]
arguments对象:该对象代表正在执行的函数和调用它的函数的参数。不能显式创建 arguments 对象。arguments 对象只有函数开始时才可用。函数的 arguments 对象并不是一个数组,访问单个参数的方式与访问数组元素的方式相同。
slice: 返回一个数组的一段。arrayObj.slice(start, [end]) [start是开始的下标,end是结束的下标,end不是长度]
所以[ ].slice.call(arguments, 0)是调用了数组的slice方法,但是对象被替换成了arguments,并且传入start参数0,就是把全部参数slice成一个新数组。

2.返回数组中的最大值

function argsMax() {
// 找出对象 arguments 当中数字最大的值
return Math.max.apply(null,arguments);
} argsMax(1, 2, 3, 5, 6, 7, 8) //

Math.max([number1[, number2[. . . [,numberN]]]]) : 返回给出的零个或多个数值表达式中较大者。

max本身接收用逗号分隔的参数,通过apply方法传入数组形式的参数,第一个参数给了一个null,这个是因为没有对象去调用这个方法,我只需要用这个方法帮我运算,得到返回的结果就行,.所以直接传递了一个null过去。

3.合并两个数组

var arr1=new Array("1","2","3");
var arr2=new Array("4","5","6");
Array.prototype.push.apply(arr1,arr2);

arrayObj.push([item1 [item2[. . . [itemN ]]]]) : 将新元素添加到一个数组中,并返回数组的新长度值。

这里arr1作为劫持Array的push方法的对象,把arr2当做参数传入。


例子:

1.借用函数

function getName() {
return this.name
}
var obj = {name: "jack"};
getName.call(obj) //jack,js 中的函数其实是对象,函数名是对 Function 对象的引用。

2.借用对象方法

var obj1 = {
name: "panxuepeng",
getName: function() {return this.name}
}
var obj2 = {name: "jack"};
obj1.getName.call(obj2) //jack

3.稍复杂的对象

 //构造函数,对应的对象就是Animal.
function Animal(){
this.name = "Animal";
this.showName = function(){
alert(this.name);
}
} function Cat(){
this.name = "Cat";
} var animal = new Animal();
var cat = new Cat(); animal.showName.call(cat); //Cat,调用对象中的方法必须先实例化类
/*
*调用Animal对象的方法showName必须先实例化Animal类,如果只是调用属性
*可以直接Animal.property就行
*所以上边的写成Animal.showName.call会报错
*/
//animal.showName.apply(cat,[]);

4.继承

    function Animal(name){
this.name = name;
this.showName = function(){
alert(this.name);
}
} function Cat(name){
Animal.call(this, name);
} var cat = new Cat("Black Cat");
cat.showName(); //Black Cat

JS中call和apply的更多相关文章

  1. js中call和apply的实现原理

    js中call和apply的实现原理            实现call的思路: /* 还有就是call方法是放在Function().prototype上的也就是构造函数才有的call方法 (我门可 ...

  2. JS中 call() 与apply 方法

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

  3. 区别和详解:js中call()和apply()的用法

    1.关于call()和apply()的疑点: apply和call的区别在哪里 什么情况下用apply,什么情况下用call apply的其他巧妙用法(一般在什么情况下可以使用apply) 2.语法和 ...

  4. JS中call、apply的用法说明

    JS Call()与Apply()的区别 ECMAScript规范给所有函数都定义了Call()与apply()两个方法,call与apply的第一个参数都是需要调用的函数对象,在函数体内这个参数就是 ...

  5. js中call、apply、bind那些事

    前言 回想起之前的一些面试,几乎每次都会问到一个js中关于call.apply.bind的问题,比如- 怎么利用call.apply来求一个数组中最大或者最小值 如何利用call.apply来做继承 ...

  6. js中call、apply和bind的区别

    在JS中,这三者都是用来改变函数的this对象的指向的,他们有什么样的区别呢.在说区别之前还是先总结一下三者的相似之处:1.都是用来改变函数的this对象的指向的.2.第一个参数都是this要指向的对 ...

  7. js中的call,apply,bind区别

    在JavaScript中,call.apply和bind是Function对象自带的三个方法,这三个方法的主要作用是改变函数中的this指向. call.apply.bind方法的共同点和区别:app ...

  8. JS中call和apply区别有哪些 记录

    一.call和apply区别 传递参数的方式.用法上不同,主要是参数不完全同 (1).B.Function.call(A,arg,arg) 这个例子是讲A对象“调用”B对象的Function(某个具体 ...

  9. JS 中 call 和 apply 的理解和使用

    本文受到了知乎问题 如何理解和熟练运用js中的call及apply? 的启发. obj.call(thisObj, arg1, arg2, ...); obj.apply(thisObj, [arg1 ...

随机推荐

  1. ES6新特性:Javascript中Set和WeakSet类型的数据结构

    ES6提供了新的数据结构Set,Set对象不是数组, 可以用来保存对象或者基本类型, 所有保存的值都是唯一的, chrome浏览器>38和FF>13,以及nodeJS,对Set支持良好, ...

  2. Mybatis 操作数据库的主键自增长

    本篇文章将研究mybatis 实现oracle主键自增的机制 首先我们看对于同一张student表,对于mysql,sql server,oracle中它们都是怎样创建主键的 在mysql中 crea ...

  3. mysql-窗口多表连接视图view

    create VIEW view_comment as (' as type FROM wei_comment_comment w) UNION ALL (' as type from review_ ...

  4. HTTP协议学习---(三)摘要认证

    Http 摘要认证 这个认证可以看做是基本认证的增强版本,使用随机数+密码进行md5,防止通过直接的分析密码MD5防止破解. 摘要访问认证最初由 RFC 2069 (HTTP的一个扩展:摘要访问认证) ...

  5. 【HDU 5839】Special Tetrahedron(计算几何)

    空间的200个点,求出至少四边相等,且其余两边必须不相邻的四面体的个数. 用map记录距离点i为d的点有几个,这样来优化暴力的四重循环. 别人的做法是枚举两点的中垂面上的点,再把到中点距离相等的点找出 ...

  6. 【CodeForces 577C】Vasya and Petya’s Game

    链接 某个数x属于[1,n],至少询问哪些数“x是否是它的倍数”才能判断x.找出所有质因数和质因数的幂即可. #include<cstdio> #include<algorithm& ...

  7. 解决PHP生成UTF-8编码的CSV文件用Excel打开乱码的问题

    在要输出的内容前先输出"\xEF\xBB\xBF", eg:要输出的内容保存在$content里$content = "\xEF\xBB\xBF".$conte ...

  8. Leetcode 376. Wiggle Subsequence

    本题要求在O(n)时间内求解.用delta储存相邻两个数的差,如果相邻的两个delta不同负号,那么说明子序列摇摆了一次.参看下图的nums的plot.这个例子的答案是7.平的线段部分我们支取最左边的 ...

  9. 【BZOJ-4592】脑洞治疗仪 线段树

    4592: [Shoi2015]脑洞治疗仪 Time Limit: 20 Sec  Memory Limit: 256 MBSubmit: 69  Solved: 38[Submit][Status] ...

  10. Bzoj1455 罗马游戏

    Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 1622  Solved: 679 Description 罗马皇帝很喜欢玩杀人游戏. 他的军队里面有n个人 ...