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

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

站在用户的角度思考问题，与客户深入沟通，找到铅山网站设计与铅山网站推广的解决方案，凭借多年的经验，让设计与互联网技术结合，创造个性化、用户体验好的作品，建站类型包括：成都网站设计、做网站、企业官网、英文网站、手机端网站、网站推广、主机域名、虚拟空间、企业邮箱。业务覆盖铅山地区。

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

结果如图：

先看下它的语法：

1. 无参数

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

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

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

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

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

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

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

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

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

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

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

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

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

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

打印结果为：

3. 不能作为构造函数;

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

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

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

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

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

运行代码，结果如下：

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

文章名称：=> 箭头函数 · 方便、快捷，也要小心坑
网页网址：http://www.mswzjz.cn/qtweb/news27/229527.html

攀枝花网站建设、攀枝花网站运维推广公司-贝锐智能，是专注品牌与效果的网络营销公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 贝锐智能

贝锐智能技术为您推荐以下文章

企业建站知识

行业网站建设

成都网络营销　　 　微信开发　　 　兴宏源活动板房　　 　青羊雕琢时光　　 　小程序开发　　 　成都商城开发　　 　光华机房服务器托管　　 　成都光华机房　　 　犀浦防纹窗　　 　成都名片印刷厂　　 　百度关键词排名　　 　买链接　　 　成都外贸网站建设　　 　广汉锦华　　 　商城系统开发　　 　成都服装定制　　 　LOGO设计　　 　成都品牌官网设计公司　　 　发光字制作　　 　移动手机网站制作