Apply和Call
在开始,我们带着这几个疑问
- apply和call的区别是什么?
- 什么情况下使用apply,什么情况下使用call
- apply的其他妙用
Apply
方法可以劫持另外一个对象的方法,继承另外一个对象的属性
Function.apply(obj,args)方法能接受两个参数
obj:这个对象将代替Function类里的this对象
args:这个是数组,他将作为参数传给Function
Call
和apply的意思一样,只不过参数列表不一样
Function.call(obj,[param1[,param2[,…[,paramN]]]])
obj:这个对象将代替Function类里this对象
params:这个是一个参数列表
Apply实例
Function Person (name,age){ this.name = name; this.age = age}Function Student (name,age,grade){ Person.apply(this,arguments); this.grade = grade;}var student = new Student('zhangsan',21,'一年级')//测试 alert("name:"+student.name+"\n"+"age:"+student.age+"\n"+"grade:"+student.grade); //大家可以看到测试结果name:zhangsan age:21 grade:一年级 //学生类里面我没有给name和age属性赋值啊,为什么又存在这两个属性的值呢,这个就是apply的神奇之处. 复制代码
分析:Person.apply(this,arguments);
this:在创建对象的时候代表的是student
arguments:是一个数组,也就是['zhangsan',21,'一年级']
通俗的讲就是:用student去执行Person这个类里面的内容,在Person这个类里面存在this.name等之类的语句,这样就将属性创建到了student对象里面
Call实例
Person.call(this,name,age)复制代码
什么情况下用apply,什么情况用call
在给对象参数的情况下,如果参数的形式是数组的时候,比如apply示例里面传递了参数arguments,这个参数是数组类型,并且
在调用Person的时候参数的列表是对应一致的(也就是Person和Student的参数列表前两位是一致的) 就可以采用 apply
如果我的Person的参数列表是这样的(age,name),而Student的参数列表是(name,age,grade),这样就可以用call来实现了,也就是直接指定参数列表对应值的位置(Person.call(this,age,name,grade));
Apply的一些其他妙用
apply可以将一个数组默认转换为一个参数列表([param1,param2,param3]=>param1,param2,param3) 借助这个特性:
Math.max 可以实现得到数组中最大的一项
Math.max 参数里面不支持Math.max([param1,param2])
var max=Math.max.apply(null,array)
apply会将一个数组装换为一个参数接一个参数的传递给方法
总结:
一般在目标函数只需要n个参数列表,而不接收一个数组的形式([param1[,param2[,…[,paramN]]]]),可以通过apply的方式巧妙地解决这个问题!
数组之间的追加
var array1 = [12 , "foo" , {name:"Joe"} , -2458]; var array2 = ["Doe" , 555 , 100]; Array.prototype.push.apply(array1, array2); 复制代码
上面的array1定义了this只想array1,后面的array2提供了她的参数
类(伪)数组使用数组方法
什么是类数组
- 拥有length属性,其它属性(索引)为非负整数
- 不具有数组所具有的方法
//类数组示例var a = { '1':'gg','2':'love','4':'meimei',length:5};Array.prototype.join.call(a,'+');//'+gg+love++meimei'复制代码
通过Array.isArray(a)方法判断为false
var domNodes = Array.prototype.slice.call(document.getElementsByTagName("*"));复制代码
JavaScript中存在一种名为伪数组的对象结构。比如arguments对象,childNodes之类的,他们返回的NodeList对象都属于伪数组,不可以用Array的push和pop犯法。
但是! 我们可以通过 Array.prototype.slice.call转换为真正的数组带有length属性的对象,然后就可以用Array下的所有方法了
Bind 绑定函数
bind() 最简单的用法是创建一个函数,使这个函数不论怎么调用都有同样的this值。
bind() 的传参顺序是传入的预定义参数+原本的参数
function list() { return Array.prototype.slice.call(arguments);}var list1 = list(1, 2, 3); // [1, 2, 3]// 预定义参数37var leadingThirtysevenList = list.bind(undefined, 37);var list2 = leadingThirtysevenList(); // [37]var list3 = leadingThirtysevenList(1, 2, 3); // [37, 1, 2, 3]复制代码
apply、call、bind比较
var obj = { x: 81,}; var foo = { getX: function() { return this.x; }} console.log(foo.getX.bind(obj)()); //81console.log(foo.getX.call(obj)); //81console.log(foo.getX.apply(obj)); //81复制代码
注:三个输出的都是81,但是注意看使用 bind() 方法的,他后面多了对括号。
即:当你希望改变上下文环境之后并非立即执行,而是回调执行的时候,使用 bind() 方法。而 apply/call 则会立即执行函数。
- apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
- apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文;
- apply 、 call 、bind 三者都可以利用后续参数传参;
- bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。
仅用于个人整理,参考