你真的了解箭头函数吗（箭头函数和常规函数之间的）
你真的了解箭头函数吗（箭头函数和常规函数之间的）constgreet=(who)=>{ return`Hello ${who}!`; }虽然两者的语法都能够定义函数，但是在开发时该怎么选择呢？这是个好问题。从 ES2015 开始，第二种可用的方法是 箭头函数 语法：在 JavaScript 中，你可以通过多种方式去定义函数。第一种常用的方法是使用关键字 function：//函数声明 functiongreet(who){ return`Hello ${who}!`; } //函数表达式 constgreet=function(who){ return`Hello ${who}`; }代码中的函数声明和函数表达式被称为“常规函数”。
翻译：疯狂的技术宅
作者：Dmitri Pavlutin
来源：dmitripavlutin
转发链接：https://mp.weixin.qq.com/s/iHCyda-d9xwvnLWkcx0lLw
前言在 JavaScript 中，你可以通过多种方式去定义函数。
第一种常用的方法是使用关键字 function：
//函数声明
functiongreet(who){
return`Hello ${who}!`;
}
//函数表达式
constgreet=function(who){
return`Hello ${who}`;
}
代码中的函数声明和函数表达式被称为“常规函数”。
从 ES2015 开始，第二种可用的方法是 箭头函数 语法：
constgreet=(who)=>{
return`Hello ${who}!`;
}
虽然两者的语法都能够定义函数，但是在开发时该怎么选择呢？这是个好问题。
在本文中，我将展示两者之间的主要区别，以供你能够根据需要选择正确的语法。
1. this 值1.1常规函数在常规 JavaScript 函数内部，this 值（即执行上下文）是动态的。
动态上下文意味着 this 的值取决于如何调用函数。在 JavaScript 中，有 4 种调用常规函数的方式。
在简单调用过程中，this 的值等于全局对象（如果函数在严格模式下运行，则为undefined ）：
functionmyFunction(){
console.log(this);
}
//简单调用
myFunction();//logsglobalobject(window)
在方法调用过程中，this 的值是拥有该方法的对象：
constmyObject={
method(){
console.log(this);
}
};
//方法调用
myObject.method();//logs"myObject"
在使用 myFunc.call(context arg1 ... argN) 或 myFunc.apply(context [arg1 ... argN]) 的间接调用中，this 的值等于第一个参数：
functionmyFunction(){
console.log(this);
}
constmyContext={value:'A'};
myFunction.call(myContext);//logs{value:'A'}
myFunction.apply(myContext);//logs{value:'A'}
在使用关键字 new 的构造函数调用期间，this 等于新创建的实例：
functionMyFunction(){
console.log(this);
}
newMyFunction();//logsaninstanceofMyFunction1.2箭头函数
箭头函数中 this 的行为与常规函数的 this 行为有很大不同。
无论如何执行或在何处执行，箭头函数内部的 this 值始终等于外部函数的 this值。换句话说，箭头函数可按词法解析 this，箭头函数没有定义自己的执行上下文。
在以下示例中，myMethod() 是箭头函数 callback() 的外部函数：
constmyObject={
myMethod(items){
console.log(this);//logs"myObject"
constcallback=()=>{
console.log(this);//logs"myObject"
};
items.forEach(callback);
}
};
myObject.myMethod([1 2 3]);
箭头函数 callback() 中的 this 值等于外部函数 myMethod() 的 this。
this 词法解析是箭头函数的重要功能之一。在方法内部使用回调时，要确保箭头函数没有定义自己的 this：不再有 const self = this 或者callback.bind(this) 这种解决方法。
2.构造函数2.1 常规函数如上一节所述，常规函数可以轻松的构造对象。
例如用 Car() 函数创建汽车的实例：
functionCar(color){
this.color=color;
}
constredCar=newCar('red');
redCarinstanceofCar;//=>true
Car 是常规函数，使用关键字 new 调用时会创建 Car 类型的新实例。
2.2 箭头函数this 此法解决了箭头函数不能用作构造函数。
如果你尝试调用带有 new 关键字前缀的箭头函数，则 JavaScript 会引发错误：
constCar=(color)=>{
this.color=color;
};
constredCar=newCar('red');//TypeError:Carisnotaconstructor
调用 new Car('red')（其中 Car 是箭头函数）会抛出 TypeError: Car is not a constructor。
3. arguments 对象3.1 常规函数在常规函数的主体内部，arguments 是一个特殊的类似于数组的对象，其中包含被调用函数的参数列表。
让我们用 3 个参数调用 myFunction 函数：
functionmyFunction(){
console.log(arguments);
}
myFunction('a' 'b');//logs{0:'a' 1:'b'}
类似于数组对象的 arguments 中包含调用参数：'a' 和 'b'。
3.2箭头函数另一方面，箭头函数内部未定义 arguments 特殊关键字。
用词法解析 arguments 对象：箭头函数从外部函数访问 arguments。
让我们试着在箭头函数内部访问 arguments：
functionmyRegularFunction(){
constmyArrowFunction=()=>{
console.log(arguments);
}
myArrowFunction('c' 'd');
}
myRegularFunction('a' 'b');//logs{0:'a' 1:'b'}
箭头函数 myArrowFunction() 由参数 'c' 'd' 调用。在其主体内部，arguments 对象等于调用 myRegularFunction() 的参数：'a' 'b'。
如果你想访问箭头函数的直接参数，可以使用剩余参数 ...args：
functionmyRegularFunction(){
constmyArrowFunction=(...args)=>{
console.log(args);
}
myArrowFunction('c' 'd');
}
myRegularFunction('a' 'b');//logs{0:'c' 1:'d'}
剩余参数 ... args 接受箭头函数的执行参数：{ 0: 'c' 1: 'd' }。
4.隐式返回4.1常规函数使用 return expression 语句从函数返回结果：
functionmyFunction(){
return42;
}
myFunction();//=>42
如果缺少 return 语句，或者 return 语句后面没有表达式，则常规函数隐式返回undefined：
functionmyEmptyFunction(){
42;
}
functionmyEmptyFunction2(){
42;
return;
}
myEmptyFunction();//=>undefined
myEmptyFunction2();//=>undefined4.2箭头函数
可以用与常规函数相同的方式从箭头函数返回值，但有一个有用的例外。
如果箭头函数包含一个表达式，而你省略了该函数的花括号，则将显式返回该表达式。这些是内联箭头函数
constincrement=(num)=>num 1;
increment(41);//=>42
increment() 仅包含一个表达式：num 1。该表达式由箭头函数隐式返回，而无需使用 return 关键字。
5. 方法5.1 常规函数常规函数是在类上定义方法的常用方式。
在下面 Hero 类中，用了常规函数定义方法 logName()：
classHero{
constructor(heroName){
this.heroName=heroName;
}
logName(){console.log(this.heroName);}}
constbatman=newHero('Batman');
通常把常规函数用作方法。
有时你需要把该方法作为回调提供给 setTimeout() 或事件监听器。在这种情况下，你可能会很难以访问 this 的值。
例如用 logName() 方法作为 setTimeout() 的回调：
setTimeout(batman.logName 1000);
//after1secondlogs"undefined"
1 秒钟后，undefined 会输出到控制台。setTimeout()执行 logName 的简单调用（其中 this 是全局对象）。这时方法会与对象分离。
让我们手动把 this 值绑定到正确的上下文：
setTimeout(batman.logName.bind(batman) 1000);
//after1secondlogs"Batman"
batman.logName.bind(batman) 将 this 值绑定到 batman 实例。现在，你可以确定该方法不会丢失上下文。
手动绑定 this 需要样板代码，尤其是在你有很多方法的情况下。有一种更好的方法：把箭头函数作为类字段。
5.2 箭头函数感谢“类字段提案”(https://github.com/tc39/proposal-class-fields)（目前在第3阶段），你可以将箭头函数用作类中的方法。
与常规函数相反，现在用箭头定义的方法能够把 this 词法绑定到类实例。
让我们把箭头函数作为字段：
classHero{
constructor(heroName){
this.heroName=heroName;
}
logName=()=>{
console.log(this.heroName);
}
}
constbatman=newHero('Batman');
现在，你可以把 batman.logName 用于回调而无需手动绑定 this。 logName()方法中 this 的值始终是类实例：
setTimeout(batman.logName 1000);
//after1secondlogs"Batman"6. 总结
了解常规函数和箭头函数之间的差异有助于为特定需求选择正确的语法。
常规函数中的 this 值是动态的，并取决于调用方式。是箭头函数中的 this 在词法上是绑定的，等于外部函数的 this。
常规函数中的 arguments 对象包含参数列表。相反，箭头函数未定义arguments（但是你可以用剩余参数 ...args 轻松访问箭头函数参数）。
如果箭头函数有一个表达式，则即使不用 return 关键字也将隐式返回该表达式。
最后一点，你可以在类内部使用箭头函数语法定义去方法。粗箭头方法将 this 值绑定到类实例。
不管怎样调用胖箭头方法，this 始终等于类实例，在回调这些方法用时非常有用。
推荐JavaScript经典实例学习资料文章《通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events》
《「前端篇」不再为正则烦恼》
《「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能》
《深入细品浏览器原理「流程图」》
《JavaScript 已进入第三个时代，未来将何去何从？》
《前端上传前预览文件 image、text、json、video、audio「实践」》
《深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系》
《推荐13个有用的JavaScript数组技巧「值得收藏」》
《前端必备基础知识：window.location 详解》
《不要再依赖CommonJS了》
《犀牛书作者：最该忘记的JavaScript特性》
《36个工作中常用的JavaScript函数片段「值得收藏」》
《Node H5 实现大文件分片上传、断点续传》
《一文了解文件上传全过程（1.8w字深度解析）「前端进阶必备」》
《【实践总结】关于小程序挣脱枷锁实现批量上传》
《手把手教你前端的各种文件上传攻略和大文件断点续传》
《字节跳动面试官：请你实现一个大文件上传和断点续传》
《谈谈前端关于文件上传下载那些事【实践】》
《手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件》
《最全的 JavaScript 模块化方案和工具》
《「前端进阶」JS中的内存管理》
《JavaScript正则深入以及10个非常有意思的正则实战》
《前端面试者经常忽视的一道JavaScript 面试题》
《一行JS代码实现一个简单的模板字符串替换「实践」》
《JS代码是如何被压缩的「前端高级进阶」》
《前端开发规范：命名规范、html规范、css规范、js规范》
《【规范篇】前端团队代码规范最佳实践》
《100个原生JavaScript代码片段知识点详细汇总【实践】》
《关于前端174道 JavaScript知识点汇总（一）》
《关于前端174道 JavaScript知识点汇总（二）》
《关于前端174道 JavaScript知识点汇总（三）》
《几个非常有意思的javascript知识点总结【实践】》
《都2020年了，你还不会JavaScript 装饰器？》
《JavaScript实现图片合成下载》
《70个JavaScript知识点详细总结（上）【实践】》
《70个JavaScript知识点详细总结（下）【实践】》
《开源了一个 JavaScript 版敏感词过滤库》
《送你 43 道 JavaScript 面试题》
《3个很棒的小众JavaScript库，你值得拥有》
《手把手教你深入巩固JavaScript知识体系【思维导图】》
《推荐7个很棒的JavaScript产品步骤引导库》
《Echa哥教你彻底弄懂 JavaScript 执行机制》
《一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧》
《深入解析高频项目中运用到的知识点汇总【JS篇】》
《JavaScript 工具函数大全【新】》
《从JavaScript中看设计模式(总结)》
《身份证号码的正则表达式及验证详解(JavaScript，Regex)》
《浏览器中实现JavaScript计时器的4种创新方式》
《Three.js 动效方案》
《手把手教你常用的59个JS类方法》
《127个常用的JS代码片段，每段代码花30秒就能看懂-【上】》
《深入浅出讲解 js 深拷贝 vs 浅拷贝》
《手把手教你JS开发H5游戏【消灭星星】》
《深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】》
《手把手教你全方位解读JS中this真正含义【实践】》
《书到用时方恨少，一大波JS开发工具函数来了》
《干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)》
《手把手教你JS 异步编程六种方案【实践】》
《让你减少加班的15条高效JS技巧知识点汇总【实践】》
《手把手教你JS开发H5游戏【黄金矿工】》
《手把手教你JS实现监控浏览器上下左右滚动》
《JS 经典实例知识点整理汇总【实践】》
《2.6万字JS干货分享，带你领略前端魅力【基础篇】》
《2.6万字JS干货分享，带你领略前端魅力【实践篇】》
《简单几步让你的 JS 写得更漂亮》
《恭喜你获得治疗JS this的详细药方》
《谈谈前端关于文件上传下载那些事【实践】》
《面试中教你绕过关于 JavaScript 作用域的 5 个坑》
《Jquery插件（常用的插件库）》
《【JS】如何防止重复发送ajax请求》
《JavaScript Canvas实现自定义画板》
《Continuation 在 JS 中的应用「前端篇」》
翻译：疯狂的技术宅
作者：Dmitri Pavlutin
来源：dmitripavlutin
转发链接：https://mp.weixin.qq.com/s/iHCyda-d9xwvnLWkcx0lLw
