函数原型中的 call 和 apply 方法的区别

tinna 发布于2019-08-26 14:06 / 1256人阅读

摘要：都属于的方法它们是在引擎内在实现的，因为属于，所以每个对象实例，也就是每个方法都有属性。与调用参数不同不同之处在于调用函数时，参数可以使用数组要求明确列出参数。助记法的表示即数组而的表示即逗号。

call, apply都属于Function.prototype的方法

它们是在 JavaScript 引擎内在实现的，因为属于Function.prototype，所以每个Function对象实例，也就是每个方法都有call, apply属性。它们的作用一样，只是使用方式不同。

call 与 apply 调用参数不同

不同之处在于调用apply函数时，参数可以使用数组; call要求明确列出参数。

助记法: Apply 的A表示 Array, 即数组, 而 Call 的 C 表示 Comma, 即逗号。

更多请参阅MDN的文档。

伪语法：

theFunction.apply(valueForThis, arrayOfArgs)
theFunction.call(valueForThis, arg1, arg2, ...)

从ES6开始，还有展开spread数组与该call功能一起使用的可能性，你可以在这里看到兼容性。

示例代码：

function theFunction(name, profession) {
    console.log("My name is " + name + " and I am a " + profession +".");
}
theFunction("John", "fireman");
theFunction.apply(undefined, ["Susan", "school teacher"]);
theFunction.call(undefined, "Claude", "mathematician");
theFunction.call(undefined, ...["Matthew", "physicist"]); // 使用展开语法

搞这么复杂，直接调用函数不好吗？

主要是为了模拟面向对象，对状态进行封装的同时，不同实例可以有不同的内部状态，如：

var module = {
  x: 42,
  getX: function() {
    return this.x;
  }
}

var unboundGetX = module.getX;
console.log(unboundGetX()); // 函数在全局范围内调用，this=window
// 会输出: undefined， 因为window下没有定义x
unboundGetX.call(module) //输出 42, 或使用 bind 也有同样的效果
var module1 ={
   x:123,
   getX: unboundGetX  //this 变为module1
}
module1.getX() //返回123

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

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

理解 JavaScript call()/apply()/bind()

摘要：理解文章中已经比较全面的分析了在中的指向问题，用一句话来总结就是的指向一定是在执行时决定的，指向被调用函数的对象。与和直接执行原函数不同的是，返回的是一个新函数。这个新函数包裹了原函数，并且绑定了的指向为传入的。理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题，用一句话来总结就是：this 的指向一定是在执行时决定的，...

duan199226 2019-08-23 14:27 评论0 收藏0
【JavaScript】call与apply兄弟列传

摘要：具体可参考下面代码定义到原型链上的方法这里没有继承父类中的方法张三张三太史公曰总结一下与兄弟俩的任务使用一个指定的值和若干个指定的参数值的前提下调用某个函数或方法。本篇人物小传自此结束。在JavaScript中，有这么俩货，一个叫call,一个叫apply，它们俩工作几乎一毛一样，但是也有所区别，曾经对这个知识点非常困惑，看过几篇博客也没搞清楚这哥俩到底打算要干个啥，直到某天仔细研究...

tuniutech 2019-08-22 10:38 评论0 收藏0
详解call bind apply - 区别/使用场景/es6实现/es3实现

摘要：的区别接收数组一连串参数返回一个函数的使用场景将类数组含有属性的对象转化为数组类数组例如通过获取的元素含有属性的对象具有属性，并且可以通过下标来访问其中的元素，但是没有中的等方法。 call,apply,bind的区别 apply接收数组 func.apply(obj, [arus]) call一连串参数 func.call(obj, param1, param2....) bind...

Alex 2019-08-23 17:07 评论0 收藏0
【面试篇】寒冬求职季之你必须要懂的原生JS(上)

摘要：循环可以使用的范围包括数组和结构某些类似数组的对象对象，以及字符串。只能遍历数组，不能中断，返回值是修改后的数组。除了之外，等，也有同样的问题。声明一个只读的常量。这在语法上，称为暂时性死区。暂时性死区也意味着不再是一个百分百安全的操作。互联网寒冬之际，各大公司都缩减了HC，甚至是采取了裁员措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。一年前，也许你搞清楚闭包...

AlphaWatch 2019-05-23 16:25 评论0 收藏0
【面试篇】寒冬求职季之你必须要懂的原生JS(上)

摘要：只能遍历数组，不能中断，返回值是修改后的数组。这在语法上，称为暂时性死区。作用域链无论是还是查询，都会在当前的作用域开始查找，如果没有找到，就会向上级作用域继续查找目标标识符，每次上升一个作用域，一直到全局作用域为止。互联网寒冬之际，各大公司都缩减了HC，甚至是采取了裁员措施，在这样的大环境之下，想要获得一份更好的工作，必然需要付出更多的努力。一年前，也许你搞清楚闭包，this，原...

宠来也 2019-08-23 16:49 评论0 收藏0