js函数的apply()与call()

2019-11-05 admin

每个函数都包含两个非继承而来的方法:apply()与call()。

这两个方法除了接收的参数不同,功能上相差无几,二者用途皆为在某作用域中调用函数,修改函数体内的this指向。


用例子通俗易懂的解释:

window.color = 'red'
let obj = {color: 'blue'}
function ff() {
    console.log(this)
    return this.color
}

我们在全局中定义一个color和一个对象,一个函数。


直接执行 ff() 函数:

因为是在全局中调用,所以this指向全局,打印的值为:red。


使用 ff.apply(obj)

此时的this指向obj对象,所以打印的值为:blue。

QQ图片20191105151815.png


使用 ff.call(obj):

与apply一样,this指向obj对象,打印的值为:blue。

QQ图片20191105151815.png


我们可以看到,二者在不传参的情况下,作用一致,接下来我们看一下传参各自的表现.

修改一下代码,打印接收到arguments
window.color = 'red'
let obj = {color: 'blue'}
function ff() {
    console.log('arguments.length',arguments.length)
    console.log(arguments)
    return this.color
}

使用 ff.apply(obj,['one','two','three'])

我们可以的看到,传入的参数是一个具有三个项的数组,但是打印出来的是三个分开单独参数,且arguments的长度也为3。

11.png

传入非数组参数apply会报错,因为只能接收数组或类数组对象。
ff.apply(obj,'one')

44.png


使用 ff.call(obj,['one','two','three']):

使用call()和apply的不同点是,传入的是一个数组,打印出来的参数也就是一个数组,rguments的长度为1。

22.png

如果我们想让其分别传递,就只能将参数分开传递:ff.call(obj,'one','two','three')

33.png


总结 二者在功能上并无差异,仅仅只是在处理传递进来的参数上有所区别,何时使用apply何时使用call,完全取决于使用场景,如果我们想要传入数组参数或者arguments,apply更方便,否则就是call方便,但是我们要记得,apply只能接收数组或arguments,call是其他类型都能接收。

[转载]原文链接:https://segmentfault.com/a/1190000020914086

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78847.html

文章标题:js函数的apply()与call()

相关文章
一些前端学习中好的书籍,整理
一、Javascript方面的书籍: 1 JavaScript权威指南(第6版):号称javascript圣经,前端必备;前端程序员学习核心JavaScript语言和由Web浏览器定义的JavaScript API的指南和综合参考手册; 2...
2015-11-12
为什么要选择Nodejs?Nodejs有什么好处?
什么?JavaScript还能用作服务器编程! Caleb Madrigal是来自美国密尔沃基市的一名软件顾问。四年前,他在听说“将JavaScript用作服务器端语言”这样的说法时,认为那是一个荒唐的想法。有那么多服务器端语言可供选择,为...
2015-11-12
js性能优化 如何更快速加载你的JavaScript页面
确保代码尽量简洁 不要什么都依赖JavaScript。不要编写重复性的脚本。要把JavaScript当作糖果工具,只是起到美化作用。别给你的网站添加大量的JavaScript代码。只有必要的时候用一下。只有确实能改善用户体验的时候用一下。 ...
2015-11-12
10个强大的纯CSS3动画案例分享
我们的网页外观主要由CSS控制,编写CSS代码可以任意改变我们的网页布局以及网页内容的样式。CSS3的出现,更是可以让网页增添了不少动画元素,让我们的网页变得更加生动有趣,并且更易于交互。本文分享了10个非常炫酷的CSS3动画案例,希望大家...
2015-11-16
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
Node.js 2014这一年发生了什么
Node.js 的 2014 年充满了不幸和争议. 这一年 Noder 们经历了太多的伤心事, 经历了漫长的等待, 经历了沉重的分裂之痛. 也许 Noder 们不想回忆14年 Node.js land 发生的事情, 但正因为痛才更有铭记的价...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
Vue.js组件tab实现选项卡切换
本文实例为大家分享了vue插件tab选项卡的具体代码,供大家参考,具体内容如下 效果图: 代码如下: <!DOCTYPE html> <html lang="en"> <head> ...
2017-03-13
React.js编程思想
JavaScript框架层出不穷,在很多程序员看来,React.js是创建大型、快速的Web应用的最好方式。这一款由Facebook出品的JS框架,无论是在Facebook还是在Instagram中,它的表现都非常出色。 使用React.j...
2015-11-12
从2014年的发展来展望JS的未来将会如何
<font face="寰�杞�闆呴粦, Arial, sans-serif ">2014骞达紝杞�浠惰�屼笟鍙戝睍杩呴€燂紝鍚勭�嶈��瑷€灞傚嚭涓嶇┓锛屼互婊¤冻鐢ㄦ埛涓嶆柇鍙樺寲鐨勯渶姹傘€傝繖浜涜��...
2015-11-12
回到顶部