15、箭头函数和尾调用优化
最后更新于：2022-04-02 06:07:25
## 一、箭头函数
箭头函数（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浏览器兼容性](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)，欢迎浏览。
';