2021.04.26（箭头函数）
作者：互联网
箭头函数
ES6 允许使用“箭头”（ => ）定义函数。
1. var f = v => v;
2.
3. // 等同于
4. var f = function (v) {
5. return v;
6. };
如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分。
1. var f = () => 5;
2. // 等同于
3. var f = function () { return 5 };
4.
5. var sum = (num1, num2) => num1 + num2;
6. // 等同于
7. var sum = function(num1, num2) {
8. return num1 + num2;
9. };
如果箭头函数的代码块部分多于一条语句，就要使用大括号将它们括起来，并且使用 return 语句返
回。
1. var sum = (num1, num2) => { return num1 + num2; }
由于大括号被解释为代码块，所以如果箭头函数直接返回一个对象，必须在对象外面加上括号，否则会
报错。
1. // 报错
2. let getTempItem = id => { id: id, name: "Temp" };
3.
4. // 不报错
5. let getTempItem = id => ({ id: id, name: "Temp" });
下面是一种特殊情况，虽然可以运行，但会得到错误的结果。
1. let foo = () => { a: 1 };
2. foo() // undefined
上面代码中，原始意图是返回一个对象 { a: 1 } ，但是由于引擎认为大括号是代码块，所以执行了
一行语句 a: 1 。这时， a 可以被解释为语句的标签，因此实际执行的语句是 1; ，然后函数就
结束了，没有返回值。
如果箭头函数只有一行语句，且不需要返回值，可以采用下面的写法，就不用写大括号了。
1. let fn = () => void doesNotReturn();
箭头函数可以与变量解构结合使用。
1. const full = ({ first, last }) => first + ' ' + last;
2.
3. // 等同于
4. function full(person) {
5. return person.first + ' ' + person.last;
6. }
箭头函数使得表达更加简洁。
1. const isEven = n => n % 2 === 0; 2. const square = n => n * n;
箭头函数的一个用处是简化回调函数。
1. // 正常函数写法
2. [1,2,3].map(function (x) {
3. return x * x;
4. });
5.
6. // 箭头函数写法
7. [1,2,3].map(x => x * x);
另一个例子是
1. // 正常函数写法
2. var result = values.sort(function (a, b) {
3. return a - b;
4. });
5.
6. // 箭头函数写法
7. var result = values.sort((a, b) => a - b);
箭头函数有几个使用注意点。
（1）函数体内的 this 对象，就是定义时所在的对象，而不是使用时所在的对象。
（2）不可以当作构造函数，也就是说，不可以使用 new 命令，否则会抛出一个错误。
（3）不可以使用 arguments 对象，该对象在函数体内不存在。如果要用，可以用 rest 参数代
替。
（4）不可以使用 yield 命令，因此箭头函数不能用作 Generator 函数。
上面四点中，第一点尤其值得注意。 this 对象的指向是可变的，但是在箭头函数中，它是固定的。
1. function foo() {
2. setTimeout(() => {
3. console.log('id:', this.id);
4. }, 100);
5. }
6.
7. var id = 21;
8.
9. foo.call({ id: 42 });
10. // id: 42
箭头函数可以让 this 指向固定化，这种特性很有利于封装回调函数。下面是一个例子，DOM 事件的
回调函数封装在一个对象里面。
1. var handler = {
2. id: '123456',
3.
4. init: function() {
5. document.addEventListener('click',
6. event => this.doSomething(event.type), false);
7. },
8.
9. doSomething: function(type) {
10. console.log('Handling ' + type + ' for ' + this.id);
11. }
12. };
箭头函数转成 ES5 的代码如下。
1. // ES6
2. function foo() {
3. setTimeout(() => {
4. console.log('id:', this.id);
5. }, 100);
6. }
7.
8. // ES5
9. function foo() {
10. var _this = this;
11.
12. setTimeout(function () {
13. console.log('id:', _this.id);
14. }, 100);
15. }
除了 this ，以下三个变量在箭头函数之中也是不存在的，指向外层函数的对应变
量： arguments 、 super 、 new.target 。
另外，由于箭头函数没有自己的 this ，所以当然也就不能
用 call() 、 apply() 、 bind() 这些方法去改变 this 的指向。
由于箭头函数使得 this 从“动态”变成“静态”，下面两个场合不应该使用箭头函数。
第一个场合是定义对象的方法，且该方法内部包括 this 。
1. const cat = {
2. lives: 9,
3. jumps: () => {
4. this.lives--;
5. }
6. }
第二个场合是需要动态 this 的时候，也不应使用箭头函数。
1. var button = document.getElementById('press');
2. button.addEventListener('click', () => {
3. this.classList.toggle('on');
4. });
标签：function,26,return,函数,2021.04,箭头,var,id 来源： https://www.cnblogs.com/zhenggc99/p/14703891.html