=> 箭头函数 · 方便、快捷,也要小心坑

开发 前端
箭头函数是必须要掌握的,今天我们一起来学习一下,它给开发者带来方便的同时,也要留意它的「无能」。

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

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

结果如图:

[[315154]]

先看下它的语法:

1. 无参数

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

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

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

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

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

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

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

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

在 连接你、我、他 —— 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 参数将被忽略。

责任编辑:赵宁宁 来源: 素燕
相关推荐

2009-12-03 09:23:17

PHP长文章分页函数

2022-03-21 19:24:15

Objects方法false

2022-11-14 07:08:23

Python函数参数

2021-02-24 09:43:36

MySQL数据库双引号

2023-01-05 07:55:59

Zookeeper服务注册

2019-04-24 16:12:59

iOSSiriMacOS

2022-04-21 07:34:34

JDK8JDK7数据

2011-04-21 17:09:09

扫描仪

2022-04-21 09:48:54

JDK8JDK7编码

2021-07-28 05:01:29

Lombok前端测试

2023-06-20 08:25:53

NESTED源码mybatis

2020-12-16 09:47:01

JavaScript箭头函数开发

2010-01-21 08:57:48

2011-05-06 14:12:49

投影机

2020-03-17 21:53:09

路由器WiFi信号

2021-03-30 15:10:50

Java序列化

2021-08-05 16:36:16

Windows 11操作系统微软

2017-04-21 09:30:40

2021-08-08 14:15:30

Windows 11Windows微软

2010-04-14 10:31:05

点赞
收藏

51CTO技术栈公众号