巧用JavaScript中apply()和call()

2023年12月20日 142次阅读 来源: 李响同學

在学习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()都有着不可或缺的作用。

既然说到这，那下一篇文章我就带大家认识函数柯里化。今天有点晚了，先休息啦~

    原文作者：李响同學
    原文地址: https://www.jianshu.com/p/d32dfa43261b
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞