🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
## 一、箭头函数 &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),欢迎浏览。 ![](https://box.kancloud.cn/2e1f8ecf9512ecdd2fcaae8250e7d48a_430x430.jpg =200x200) 推荐一款前端监控脚本:[shin-monitor](https://github.com/pwstrick/shin-monitor),不仅能监控前端的错误、通信、打印等行为,还能计算各类性能参数,包括 FMP、LCP、FP 等。