编程语言快捷也要小心坑

箭头函数是必须要掌握的，今天我们一起来学习一下，它给开发者带来方便的同时，也要留意它的「无能」。先看一个例子：

1. const names = [ 
2.     'wsy', 
3.     'suyan', 
4.     '前端小课' 
5. ]; 
6. let lengths = names.map(name => name.length); 
7. console.log('lengths = ', lengths); 

结果如图：

先看下它的语法：

1. 无参数

1. function call(callback) { 
2.     callback(); 
3. } 
4. call(() => { 
5.     console.log('arrow void'); 
6. }); 
7. // 箭头函数类似于下面这个函数 
8. call(function () { 
9.     console.log('void'); 
10. }); 

2. 只有一个参数，无返回值

1. function call(callback) { 
2.     callback('前端小课'); 
3. } 
4. call(name => { 
5.     console.log('arrow', name); 
6. }); 
7. // 箭头函数类似于下面这个函数 
8. call(function (name) { 
9.     console.log(name); 
10. }); 

3. 只有一个参数，有返回值

1. function call(callback) { 
2.     // 返回值为 4 
3.     let len = callback('前端小课'); 
4.     console.log(len); 
5. } 
6.  
7. // 只有一行表达式省略大括号 
8. call(name => name.length); 
9. // 类似于这个 
10. call(name => { 
11.     return name.length; 
12. }); 
13. // 箭头函数类似于下面这个函数 
14. call(function (name) { 
15.     return name.length; 
16. }); 

4.有多个参数，有返回值

1. function call(callback) { 
2.     let len = callback(1, 2, 3); 
3.     console.log(len); // 6 
4. } 
5.  
6. // 多个个参数，有返回值，只有一行表达式省略大括号 
7. call((a, b, c) => a + b + c); 
8. // 类似与这个 
9. call((a, b, c) => { 
10.     return a + b + c; 
11. }); 
12. // 箭头函数类似于下面这个函数 
13. call(function (a, b, c) { 
14.     return a + b + c; 
15. }); 

从上面这些例子可以知道，每个箭头函数都能写出一个与其功能相同的普通函数，那为什么还用箭头函数?

在 连接你、我、他 —— this 这节课程中使用箭头函数解决了 this 指向的问题。不知道你们有没有发现当写下面这两个函数的时候，VSCode 默认使用的是箭头函数：

1. setTimeout(() => { 
2.     // 这里是箭头函数 
3. }, 100); 
4.  
5. setInterval(() => { 
6.     // 这个是箭头函数 
7. }, 200); 

使用箭头函数有几点需要留意：

1. 让函数更简短，上面例 3 就是一个很好的例子;

2. 没有自己的 this 和 argument，比如有如下代码：

1. let person = { 
2.     name: 'suyan', 
3.     showName: function (age) { 
4.         window.setTimeout(() => { 
5.             console.log('this = ', this); 
6.             console.log('arguments = ', arguments); 
7.             console.log(this.name, age); 
8.         }, 100); 
9.     } 
10. }; 
11. person.showName(20); 

打印结果为：

3. 不能作为构造函数;

1. let Dog = name => { 
2.     this.name = name; 
3. }; 
4. // 错误 Uncaught TypeError: Dog is not a constructor 
5. let aDog = new Dog('fe'); 
6.  
7. let Dog2 = function (name) { 
8.     this.name = name; 
9. }; 
10. // 正确 
11. let aDog2 = new Dog2('fe'); 

4. 箭头函数没有 prototype 属性：

1. let Dog = name => { 
2.     this.name = name; 
3. }; 
4. Dog.prototype; // undefined 

5.不能通过 call、apply 绑定 this

1. var name = 'I am widow'; 
2.  
3. let animal = { 
4.     name: 'animal', 
5.     showName: age => { 
6.         console.log('this = ', this); 
7.         console.log('name | age = ', this.name, age); 
8.     } 
9. }; 
10. let dog = { 
11.     name: 'dog' 
12. }; 
13.  
14. animal.showName.call(dog, 20); 
15. animal.showName.apply(dog, [21]); 
16. let bindName = animal.showName.bind(dog, 22); 
17. bindName(); 

运行代码，结果如下：

由于箭头函数没有 this 指针，不能通过 call、apply、bind 的方式来修改 this。只能传递参数，this 参数将被忽略。

编程语言往往使程序员能够比使用机器语言更准确地表达他们所想表达的目的。对那些从事计算机科学的人来说，懂得程序设计语言是十分重要的，因为在当今所有的计算都需要程序设计语言才能完成。