## 一、箭头函数 &emsp;&emsp;箭头函数（Arrow Function）是ES6提供的一个很实用的新功能，与普通函数相比，不但在语法上更为简洁，而且在使用时也有更多注意点，下面列出了其中的三点： &emsp;&emsp;（1）由于不能作为构造函数，因此也就没有元属性（new.target）和原型（prototype属性）。 &emsp;&emsp;（2）函数体内不存在arguments、super和this，即没有为它们绑定值。 &emsp;&emsp;（3）当需要包含多个参数时，它们的名称不可重复。 **1）语法** &emsp;&emsp;箭头函数由三部分组成：箭头（=>）、参数和函数体，省略了名称和function关键字，如下代码所示。注意，参数和箭头要在一行中，不能换行，并且没有箭头函数声明，只有箭头函数表达式。 ~~~ var arrow1 = (name, age) => { return name; }; ~~~ &emsp;&emsp;如果函数体中只包含一个表达式，那么可以像下面这样省略花括号和return关键字。 ~~~ var arrow2 = (name, age) => name; ~~~ &emsp;&emsp;当返回值是一个对象字面量时，需要为其包裹圆括号（如下代码所示），以免将花括号解析成代码块而引起语法错误。 ~~~ var arrow3 = (name, age) => ({name: name, age: age}); ~~~ &emsp;&emsp;如果只有一个参数，那么可以省略包裹参数的圆括号。 ~~~ var arrow4 = name => name; ~~~ &emsp;&emsp;在参数缺失的情况下，还是需要一对空的圆括号占位。 ~~~ var arrow5 = () => "strick"; ~~~ &emsp;&emsp;箭头函数也支持ES6新增的参数解构、剩余参数和默认参数，依次如下所示。 ~~~ var arrow6 = ({name, age}) => name + age; var arrow7 = (name, ...args) => name + args[0]; var arrow8 = (name = "strick") => name; ~~~ &emsp;&emsp;箭头函数很适合那些只需做简短计算的函数，例如数组排序的回调函数。下面代码的第一段采用了普通的匿名函数，第二段采用了箭头函数，可以看出第二段的代码来得清晰简洁，更有吸引力。 ~~~ var list1 = [1, 2, 3].sort(function(a, b) { return a < b; }); var list2 = [1, 2, 3].sort((a, b) => a < b); ~~~ &emsp;&emsp;虽然箭头不是运算符，但是当把它与其它运算符结合的时候，需要将其用圆括号隔离，否则会引起语法错误。 ~~~ var operator1 = 0 || () => 2; //语法错误 var operator2 = 0 || (() => 2); 　//() => 2 var operator3 = 0 || (() => 2)(); 　//2 ~~~ &emsp;&emsp;上面代码的第一句是错误的写法；第二句中的箭头函数默认是不会自动执行的，因此或运算的结果是函数本身；第三句在箭头函数的末尾又加了一对圆括号，从而创建了立即执行函数表达式（IIFE），运算后的结果是2。 &emsp;&emsp;普通函数能创建两种即时函数（如下代码所示），区别就是末尾的那对圆括号的位置，相对于函数是在内还是在外，而箭头函数只支持第一种写法的即时函数。 ~~~ (function() {})(); //第一种 (function() {}()); //第二种 ~~~ **2）this** &emsp;&emsp;普通函数都会包含一个this对象，而this绑定的对象只取决于函数的调用方式。在下面的代码中，有两个函数，分别是构造函数people()以及定时器的回调函数。 ~~~ function people() { var self = this; this.age = 28; setTimeout(function() { this.age; //undefined self.age; //28 }, 100); } new people(); ~~~ &emsp;&emsp;people()中的this通过构造函数绑定，指向了新创建的目标对象。而回调函数中的this通过默认绑定，指向了全局对象（window）。由于age属性只存在于构造函数中，因此在全局对象中是访问不到的。如果要在定时器的回调函数中访问age属性，那么需要为this赋予一个别名（例如代码中的self）。 &emsp;&emsp;前面曾提到过，箭头函数中不包含this，不过在其内部还是能使用this的，这个this是从上一层的作用域中继承而来的。下面将构造函数people()改造成animal()，定时器采用箭头函数。 ~~~ function animal() { this.age = 28; setTimeout(() => { this.age; //28 }, 100); } new animal(); ~~~ &emsp;&emsp;此时，箭头函数中的this指向的是新创建的目标对象，因此能成功访问到age属性。 &emsp;&emsp;普通函数可以通过bind()、apply()或call()方法来更改this的指向，但这不适用于箭头函数，如下代码所示。还是以animal()为例，在箭头函数上调用call()，虽然第一个参数传入了全局对象，但依然无法改变this的指向。 ~~~ function animal() { this.age = 28; setTimeout((() => { this.age; //28 }).call(window), 100); } new animal(); ~~~ ## 二、尾调用优化 &emsp;&emsp;尾调用（Tail Call）是指函数中的最后一步会调用一个函数，并将其结果作为返回值，就像下面这两个函数。 ~~~ function tail1() { return digit(28); } function tail2(name) { if (name == "strick") return digit(28); return digit(30); } ~~~ &emsp;&emsp;如果在最后一步调用的是自身，那么这种情况可称为尾递归（Tail Recursion）。下面是个会无限递归的函数，只是为了做演示用。 ~~~ function recursion() { return recursion(); } ~~~ &emsp;&emsp;尾调用不是一个新语法，而是一条组织代码的约束。下面代码里的三种情况就都不符合尾调用的要求。 ~~~ function error1() { digit(28); } function error2() { return digit(28) + 1; } function error3() { var number = digit(28); return number; } ~~~ &emsp;&emsp;error1()函数缺少return关键字；error2()函数在调用digit(28)之后还额外多做了一次加法运算；error3()函数没有直接返回digit(28)的结果，而是先赋给一个变量，再返回。 &emsp;&emsp;接下来为了能更好的理解尾调用优化，会先讲解调用栈的基础知识。 **1）调用栈** &emsp;&emsp;简单地说，调用栈（Call Stack）是一种记录函数地址的栈，当调用一个函数时，会在调用栈的顶端添加一个新的栈帧（Stack Frame），即入栈；而当函数执行完毕后，就会将其移出调用栈，即出栈。 &emsp;&emsp;正常情况下，调用栈能够保持有进有出的平衡，但当函数的调用次数激增时（例如过多的递归），调用栈就会消耗大量内存，甚至占满整个内存空间，从而导致栈溢出（Stack Overflow）。不过值得庆幸的是，现代浏览器都不会因为栈溢出而奔溃，其内部已做了限制，例如Chrome仅仅会给出“RangeError: Maximum call stack size exceeded”的错误警告。 **2）尾调用优化** &emsp;&emsp;为了控制栈帧的数量，减少内存空间的使用，引入了尾调用优化（Tail Call Optimization，TCO）。这也不是一个新语法，只是一种空间上的优化，并且所有的工作都由JavaScript引擎（例如V8、SpiderMonkey等）代劳了。 &emsp;&emsp;ES6中的TCO只有在严格模式下才能开启，它的原理就是不需要记住尾调用所处函数的地址。下面是一个检测字符串回文的函数，当开启TCO时，由于函数内需要的值已通过参数的形式传递进来（即不依赖函数外部的变量），因此每次递归都会覆盖前一次函数调用的栈帧，即调用栈的数量会保持恒定。 ~~~ "use strict"; function palindrome(str) { if (str.length <= 1) return true; if (str[0] != str[str.length - 1]) return false; return palindrome(str.substr(1, str.length - 2)); } ~~~ &emsp;&emsp;虽然TCO的表现很抢眼，但很遗憾，目前除了Safrai之外，大部分浏览器暂不支持（可参考[ES6浏览器兼容性](http://kangax.github.io/compat-table/es6/)），因此在这些浏览器中还享受不到TCO带来的性能提升。 ***** > 原文出处： [博客园-ES6躬行记](https://www.cnblogs.com/strick/category/1372951.html) [知乎专栏-ES6躬行记](https://zhuanlan.zhihu.com/pwes6) 已建立一个微信前端交流群，如要进群，请先加微信号freedom20180706或扫描下面的二维码，请求中需注明“看云加群”，在通过请求后就会把你拉进来。还搜集整理了一套[面试资料](https://github.com/pwstrick/daily)，欢迎浏览。  推荐一款前端监控脚本：[shin-monitor](https://github.com/pwstrick/shin-monitor)，不仅能监控前端的错误、通信、打印等行为，还能计算各类性能参数，包括 FMP、LCP、FP 等。