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获得CheckBoxList选中的数量
Oct 27 Javascript
JavaScript 学习笔记(七)字符串的连接
Dec 31 Javascript
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
javaScript基础语法介绍
Feb 28 Javascript
js显示文本框提示文字的方法
May 07 Javascript
值得分享的JavaScript实现图片轮播组件
Nov 21 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
详解在vue-cli中使用路由
Sep 25 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
jquery实现简单自动轮播图效果
Jul 29 jQuery
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
ajax 的post方法实例(带循环)
2011/07/04 PHP
php中sql注入漏洞示例 sql注入漏洞修复
2014/01/24 PHP
PHP判断表单复选框选中状态完整例子
2014/06/24 PHP
SAE实时日志接口SDK用法示例
2016/10/09 PHP
PHP实现简单的模板引擎功能示例
2017/09/02 PHP
ThinkPHP3.2框架自带分页功能实现方法示例
2019/05/13 PHP
php反射学习之依赖注入示例
2019/06/14 PHP
laravel 多图上传及图片的存储例子
2019/10/14 PHP
JS中的异常处理方法分享
2013/12/22 Javascript
jquery form表单序列化为对象的示例代码
2014/03/05 Javascript
JS 获取鼠标左右键的键值方法
2014/10/11 Javascript
JavaScript中的object转换成number或string规则介绍
2014/12/31 Javascript
JavaScript中String.prototype用法实例
2015/05/20 Javascript
javascript随机抽取0-100之间不重复的10个数
2016/02/25 Javascript
js表单验证实例讲解
2016/03/31 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
详谈jQuery.load()和Jsp的include的区别
2017/04/12 jQuery
jQuery实现动态删除LI的方法
2017/05/30 jQuery
JS实现的全排列组合算法示例
2017/10/09 Javascript
jQuery插件jsonview展示json数据
2018/05/26 jQuery
Jquery ajax书写方法代码实例解析
2020/06/12 jQuery
详解Vue的七种传值方式
2021/02/08 Vue.js
python支持断点续传的多线程下载示例
2014/01/16 Python
python分割文件的常用方法
2014/11/01 Python
在Python中处理字符串之isdigit()方法的使用
2015/05/18 Python
Python入门_学会创建并调用函数的方法
2017/05/16 Python
PyQt5每天必学之弹出消息框
2018/04/19 Python
python 实现敏感词过滤的方法
2019/01/21 Python
numpy数组之存取文件的实现示例
2019/05/24 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
水上运动奥特莱斯:Wasterports Outlet
2018/08/08 全球购物
小学生安全保证书
2014/02/01 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
javascript拖曳互换div的位置实现示例
2021/06/28 Javascript
我的收音机情缘
2022/04/05 无线电