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 相关文章推荐
JavaScript Event学习第六章 事件的访问
Feb 07 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
JQuery中clone方法复制节点
May 18 Javascript
延时加载JavaScript代码提高速度
Dec 27 Javascript
关于session和cookie的简单理解
Jun 08 Javascript
同步异步动态引入js文件的几种方法总结
Sep 23 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
深入浅出理解JavaScript闭包的功能与用法
Aug 01 Javascript
教你30秒发布一个TypeScript包到NPM的方法步骤
Jul 22 Javascript
weui中的picker使用js进行动态绑定数据问题
Nov 06 Javascript
详解Vue.js 可拖放文本框组件的使用
Mar 03 Vue.js
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
PHP实现下载断点续传的方法
2014/11/12 PHP
PHP中实现crontab代码分享
2015/03/26 PHP
静态html文件执行php语句的方法(推荐)
2016/11/21 PHP
Laravel5.5新特性之友好报错以及展示详解
2017/08/13 PHP
番茄的表单验证类代码修改版
2008/07/18 Javascript
JS随机生成不重复数据的实例方法
2013/07/17 Javascript
jQuery动画效果-fadeIn fadeOut淡入浅出示例代码
2013/08/28 Javascript
javascript使用onclick事件改变选中行的颜色
2013/12/30 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
2015/08/15 Javascript
JS随机打乱数组的方法小结
2016/06/22 Javascript
JS如何判断json是否为空
2016/07/06 Javascript
基于d3.js实现实时刷新的折线图
2016/08/03 Javascript
js表单登陆验证示例
2016/10/19 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
nodejs遍历文件夹下并操作HTML/CSS/JS/PNG/JPG的方法
2018/11/01 NodeJs
vue实现密码显示与隐藏按钮的自定义组件功能
2019/04/23 Javascript
在pycharm中开发vue的方法步骤
2020/03/04 Javascript
vue实现淘宝购物车功能
2020/04/20 Javascript
easyUI 实现的后台分页与前台显示功能示例
2020/06/01 Javascript
python 多进程通信模块的简单实现
2014/02/20 Python
Python代码调试的几种方法总结
2015/04/15 Python
python获取当前用户的主目录路径方法(推荐)
2017/01/12 Python
python reverse反转部分数组的实例
2018/12/13 Python
基于梯度爆炸的解决方法:clip gradient
2020/02/04 Python
HTML5+WebSocket实现多文件同时上传的实例
2016/12/29 HTML / CSS
将SVG图引入到HTML页面的实现
2019/09/20 HTML / CSS
俄罗斯连接商品和买家的在线平台:goods.ru
2020/11/30 全球购物
当文件系统受到破坏时,如何检查和修复系统?
2012/03/09 面试题
酒店员工检讨书
2014/02/18 职场文书
迟到检讨书2000字(精选篇)
2014/10/07 职场文书
学生逃课检讨书
2015/02/17 职场文书
法定授权委托证明书
2015/06/18 职场文书
2015年新教师个人工作总结
2015/10/14 职场文书
Python实现天气查询软件
2021/06/07 Python
Python使用DFA算法过滤内容敏感词
2022/04/22 Python