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