快速理解JavaScript中apply()和call()的用法和用途

chenjiang3 发布于2019-08-19 17:49 / 1040人阅读

摘要：在学习之前，我们必须对的作用和使用方法有所了解，可以参考我前一篇文章快速理解中的用法与陷阱。和的作用十分相似，只是参数类型上的差别，以适应不同的使用场景。

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

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

idc机房托管专线服务 JS中bind、call和apply的作 js中的call和apply apply与call的区别 javascript中apply

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78874.html

JavaScript 函数作用域、执行环境(this)、call、apply、bind 的用法

摘要：什么是函数的作用域函数作用域在中，作用域为可访问变量，对象，函数的集合。函数作用域作用域在函数内修改。与函数又有什么关系呢对象是在运行时基于函数的执行环境绑定的。什么是函数的作用域函数作用域：在 JavaScript 中，作用域为可访问变量，对象，函数的集合。JavaScript 函数作用域: 作用域在函数内修改。 this 与函数又有什么关系呢？ this对象是在运行时基于函数的...

1fe1se 2019-08-26 13:47 评论0 收藏0
JavaScript也玩私人订制——玩转函数柯里化

摘要：而柯里化是一个属于函数式编程的一个常见的技巧。简单来说，函数柯里化就是对高阶函数的降阶处理。让你意外的是，这就是柯里化的基本思想，简单地让人猝不及防。函数式编程是一种被部分JavaScript程序员推崇的编程风格，更别说 Haskell 和 Scala 这种以函数式为教义的语言。原因是因为其能用较短的代码实现功能，如果掌握得当，能达到代码文档化（代码本身具有很高可读性甚至可以代替文档...

MRZYD 2019-08-19 17:50 评论0 收藏0
「前端面试题系列6」理解函数的柯里化

摘要：原题如下写一个方法，当使用下面的语法调用时，能正常工作这道题要考察的，就是对函数柯里化的理解。当参数只有一个的时候，进行柯里化的处理。这其实就是函数柯里化的简单应用。 showImg(https://segmentfault.com/img/bVbopGm?w=620&h=350); 前言这是前端面试题系列的第 6 篇，你可能错过了前面的篇章，可以在这里找到： ES6 中箭头函数的...

liaorio 2019-08-23 15:15 评论0 收藏0
Know this, use this! (总结 this 的常见用法)

摘要：而当做普通函数调用的话，实际上即第种情况下，对函数普通调用，此时的指向这是正常情况下，会正确返回并且指向该对象，但是在构造函数当中，如果返回了一个对象，那么会指向返回的那个对象。 this应该是一个讨论了很久的话题了。其中，关于this的文章，在很多的博客当中也有很多介绍，但是，以前我都是一知半解的去了解它，就是看博客当中，只介绍了一些情况下的 this 的使用方式，但是也并没有自己去...

zorro 2019-08-21 14:21 评论0 收藏0
学习JavaScript之this,call,apply

摘要：在全局对象中调用，自然读取的是全局对象的值构造器调用说明作为构造器调用时，指向返回的这个对象。最直观的表现就是，去看一些优秀框架的源代码时，不再是被绕的晕乎乎的。学习起因：在之前的JavaScript学习中，this,call,apply总是让我感到迷惑，但是他们的运用又非常的广泛。遂专门花了一天，来弄懂JavaScript的this,call,apply。中途参考的书籍也很多，以...

wenhai.he 2019-08-19 17:30 评论0 收藏0