在学习apply()
之前,我们必须对this
的作用和使用方法有所了解,可以参考我前一篇文章《快速理解JavaScript中this的用法与陷阱》。当然如果你已经熟悉this
的相关知识,那么请直接往下看。
call()
和apply()
的作用十分相似,只是参数类型上的差别,以适应不同的使用场景。它们都是为了改变函数运行时的 context(上下文)而存在的,再说的直白一点,就是为了改变函数内部 this
的指向。
恩?什么?我似乎听到你说改变this的指向??那就是说。。。
没错!这样就可以实现继承啦!Exciting!
看下面的代码:
以下代码必须看过《疯狂动物城》才可看懂(逃)
function animal(name,food) {
this.name = name,
this.food = food,
this.say = function() {
console.log(name +" likes " + this.food + '.');
}
}
function rabbit(name,food) {
animal.call(this,name,food);
}
var Judy = new rabbit('Judy','carrot');
Judy.say();// >>> Judy likes carrot.
可以看出,我们声明了一个叫Judy
的对象,我们并没有在rabbit
对象里添加任何属性和方法,但是我们使用call()
继承了原本属于animal
的属性和方法。就可以做到animal
函数所有能做到的事情。
这到底是怎么做到的呢?让我们来看看call()的参数:
第一个是一个对象,这个对象将代替Function
类里原本的this
对象,我们传入的是this
,记住,这个this
在rabbit
函数里指的是未来将要实例化这个函数的对象(我知道这有些拗口),当声明了Judy
的时候,这个this
指的就是Judy
。
除了第一个参数,后面所有的参数都是传给父函数本身使用的参数。
而apply()
和call()
功能几乎一样,唯一的区别就是apply()
第二个参数只能是数组,这个数组将作为参数传给原函数的参数列表arguments
。
其实在实际开发中,JS 继承的方法并不止这一种,使用原型链继承是更加常用的方式,此外还有构造函数继承,这里不展开。而apply使用的场景,更多的使用在这样一个场景:
需要将数组转化为参数列表。
apply()
的这个把数组转化为参数列表的特性,可以让它做一些有趣的事情。
例如,push()
方法的参数只能是一个或者多个参数,而不能是一个数组,当我们想要将数组B
拼接到数组A
后面时,传统的做法是遍历数组B
,每循环一次就push进数组A
后面,这样就浪费了push()
可以传多个参数的功能。
我们可以这样做:
var list1 = [0,1,2];
var list2 = [3,4,5];
[].push.apply(list1,list2);
console.log(list1);// >>> [0,1,2,3,4,5]
看起来有点糊涂吗?可以这样理解:
list1调用了属于数组对象的push方法,这个push方法需要传入一个参数列表,而恰好我们有了list2这个数组类型的参数列表,实现了拼接操作。
第三行就相当于:
list1.push(3,4,5);
看,apply
多么神奇!同样的,Math
对象下的max()
和min()
等方法都只支持参数列表而不是数组,能做什么事情,你应该猜到了吧?
此外还有许多地方apply()
的这个特性带来很多便利:比如函数式编程中的currying(柯里化),apply()
都有着不可或缺的作用。
既然说到这,那下一篇文章我就带大家认识函数柯里化。今天有点晚了,先休息啦~