JavaScript中的普通函数和箭头函数的区别和用法详解


Posted in Javascript onMarch 21, 2017

最近被问到了一个问题:

javaScript 中的箭头函数 ( => ) 和普通函数 ( function ) 有什么区别?

我当时想的就是:这个问题很简单啊~(flag),然后做出了错误的回答……

箭头函数中的 this 和调用时的上下文无关,而是取决于定义时的上下文

这并不是很正确的答案……虽然也不是完全错误

箭头函数中的 this

首先说我的回答中没有错误的部分:箭头函数中的 this 确实和调用时的上下文无关

function make () {
  return ()=>{
    console.log(this);
  }
}
const testFunc = make.call({ name:'foo' });
testFunc(); //=> { name:'foo' }
testFunc.call({ name:'bar' }); //=> { name:'foo' }

这个例子可以看到,确实箭头函数在定义之后,this 就不会发生改变了,无论用什么样的方式调用它,this 都不会改变;

但严格来说,这并不是“取决于定义时的上下文”, 因为箭头函数根本就没有绑定自己的 this,在箭头函数中调用 this 时,仅仅是简单的沿着作用域链向上寻找,找到最近的一个 this 拿来使用罢了;
从效果上看,这和我之前的理解并没有多大偏差,但它们的本质却是截然不同,箭头函数并不是普通函数新增了 this 不受调用时上下文影响的特性,而是减少了很多特性;

箭头函数其实是更简单的函数

实际上箭头函数中并不只是 this 和普通函数有所不同,箭头函数中没有任何像 this 这样自动绑定的局部变量,包括:this,arguments,super(ES6),new.target(ES6)……

借用别人的一个例子:

function foo() {
  setTimeout( () => {
   console.log("args:", arguments);
  },100);
}
foo( 2, 4, 6, 8 );
// args: [2, 4, 6, 8]

在普通函数中,会自动绑定上的各种局部变量,箭头函数都是十分单纯的沿着作用域链向上寻找……

箭头函数就是这么个简单、纯粹的东西;

所以我个人认为箭头函数更适合函数式编程,除了它更短以外,使用箭头函数也更难被那些没有显示声明的变量影响,导致你产生意料之外的计算结果;

那么普通函数能否实现和箭头函数一样的效果呢?

如果是像当初的我一样简单的考虑固定住 this 这个易变的家伙……那倒是很简单,有些常用的方法,比如这样:

function make () {
  var self = this;
  return function () {
    console.log(self);
  }
}

或者

function make () {
  return function () {
    console.log(this);
  }.bind(this);
}

然而第二种方法只能固定 this 这一个变量而已,如前文所述,箭头函数中的 arguments 等变量也是从作用域链中寻找的,为了实现类似的效果,我们只有重新定义一个局部变量这一种方式,而 babel 也是使用这种方式对箭头函数进行处理的。

function make () {
  return ()=>{
    console.log(this);
    console.log(arguments);
  }
}
//babel it...
function make() {
  var _this = this,
    _arguments = arguments;
  return function () {
    console.log(_this);
    console.log(_arguments);
  };
}

那么……如果我想在箭头函数中使用 arguments 该怎么办?

……我觉得如果你有这个需求,可能还是用普通函数更合适一点……

但并不是说在箭头函数中无法以类似数组的形式取到所有参数,我们可以利用展开运算符来接收参数,比如这样:

const testFunc = (...args)=>{
  console.log(args) //数组形式输出参数
}

或许真的有场景需要用到这种写法,但我还是认为,箭头函数更适合那些接受固定的参数,返回一个计算结果的简单情况;

以上所述是小编给大家介绍的JavaScript中的普通函数和箭头函数的区别和用法详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js arguments.callee的应用代码
May 07 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
js 如何实现对数据库的增删改查
Nov 23 Javascript
js 控制页面跳转的5种方法
Sep 09 Javascript
javascript结合CSS实现苹果开关按钮特效
Apr 07 Javascript
安装使用Mongoose配合Node.js操作MongoDB的基础教程
Mar 01 Javascript
js精准的倒计时函数分享
Jun 29 Javascript
微信小程序 地图map实例详解
Jun 07 Javascript
详解RequireJs官方使用教程
Oct 31 Javascript
详解Webpack + ES6 最新环境搭建与配置
Jun 04 Javascript
关于ES6尾调用优化的使用
Sep 11 Javascript
vue实现简单全选和反选功能
Sep 15 Javascript
JavaScript 中 apply 、call 的详解
Mar 21 #Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 #Javascript
Bootstrap警告框(Alert)插件使用方法
Mar 21 #Javascript
Bootstrap标签页(Tab)插件使用方法
Mar 21 #Javascript
JavaScript数组和对象的复制
Mar 21 #Javascript
Vue响应式添加、修改数组和对象的值
Mar 20 #Javascript
zTree实现节点修改的实时刷新功能
Mar 20 #Javascript
You might like
一个ubbcode的函数,速度很快.
2006/10/09 PHP
刚才在简化php的库,结果发现很多东西
2006/12/31 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
PHP验证码函数代码(简单实用)
2013/09/29 PHP
PHP实现更新中间关联表数据的两种方法
2014/09/01 PHP
PHP使用数组实现矩阵数学运算的方法示例
2017/05/29 PHP
js sort 二维数组排序的用法小结
2014/01/24 Javascript
遍历DOM对象内的元素属性示例代码
2014/02/08 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
JavaScript DOM基础
2015/04/13 Javascript
js中利用tagname和id获取元素的方法
2016/01/03 Javascript
ionic组件ion-tabs选项卡切换效果实例
2016/08/27 Javascript
Vue.js每天必学之方法与事件处理器
2016/09/06 Javascript
vue构建单页面应用实战
2017/04/10 Javascript
JavaScript限制在客户区可见范围的拖拽(解决scrollLeft和scrollTop的问题)(2)
2017/05/17 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
Vuex提升学习篇
2018/01/11 Javascript
RequireJS用法简单示例
2018/08/20 Javascript
对vux点击事件的优化详解
2018/08/28 Javascript
利用pandas将numpy数组导出生成excel的实例
2018/06/14 Python
python实现诗歌游戏(类继承)
2019/02/26 Python
Python中py文件转换成exe可执行文件的方法
2019/06/14 Python
python如何实现复制目录到指定目录
2020/02/13 Python
python3将变量输入的简单实例
2020/08/19 Python
python音频处理的示例详解
2020/12/23 Python
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
自我鉴定书范文
2013/10/02 职场文书
体育教育毕业生自荐信
2013/11/21 职场文书
手机被没收检讨书
2014/02/22 职场文书
广告学专业求职信
2014/06/19 职场文书
建筑施工安全责任书
2014/07/24 职场文书
付款委托书范本
2014/10/05 职场文书
尼克胡哲观后感
2015/06/08 职场文书
申请吧主发表的感言
2015/08/03 职场文书
2016年小学植树节活动总结
2016/03/16 职场文书
电脑关机速度很慢怎么办 提升电脑关机速度设置教程
2022/04/08 数码科技