技术控

    今日:19| 主题:49390
收藏本版 (1)
最新软件应用技术尽在掌握

[其他] 什么时候不该使用es6箭头函数

[复制链接]
那抹清澈的阳光 发表于 2016-10-5 12:10:09
44 0

立即注册CoLaBug.com会员,免费获得投稿人的专业资料,享用更多功能,玩转个人品牌!

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
从开始接触es6到在项目中使用已经有一段时间了,es6有很多优秀的新特性,其中最有价值的特性之一就是箭头函数,他简洁的语法以及更好理解的this值都非常的吸引我。但是新事物也是有两面性的,箭头函数有他的便捷有他的优点,但是他也有缺点,他的优点是代码简洁,this提前定义,但他的缺点也是这些,比如代码太过简洁,导致不好阅读,this提前定义,导致无法使用js进行一些es5里面看起来非常正常的操作。针对这些缺点,下面我就总结一下什么情况下不该使用箭头函数。
  在对象上定义函数

  先来看下面这段代码
  1. var obj = {  
  2.     array: [1, 2, 3],
  3.     sum: () => {
  4.         console.log(this === window); // => true
  5.         return this.array.reduce((result, item) => result + item);
  6.     }
  7. };
  8. // Throws "TypeError: Cannot read property 'reduce' of undefined"
  9. obj.sum();
复制代码
     sum方法定义在    obj对象上,当调用的时候我们发现抛出了一个    TypeError,因为函数中的    this是    window对象,所以    this.array也就是    undefined。原因也很简单,相信只要了解过es6 箭头函数的都知道  
  箭头函数没有它自己的this值,箭头函数内的this值继承自外围作用域
  解决方法也很简单,就是不用呗。这里可以用es6里函数表达式的简洁语法,在这种情况下,this值就取决于函数的调用方式了。
  1. var obj = {  
  2.     array: [1, 2, 3],
  3.     sum() {
  4.         console.log(this === obj); // => true
  5.         return this.array.reduce((result, item) => result + item);
  6.     }
  7. };
  8. obj.sum(); // => 6
复制代码
通过object.method()语法调用的方法使用非箭头函数定义,这些函数需要从调用者的作用域中获取一个有意义的this值。
  2.在原型上定义函数

  在对象原型上定义函数也是遵循着一样的规则
  1. function Person (pName) {
  2.     this.pName = pName;
  3. }
  4. Person.prototype.sayName = () => {
  5.     console.log(this === window); // => true
  6.     return this.pName;
  7. }
  8. var person = new Person('wdg');
  9. person.sayName(); // => undefined
复制代码
使用function函数表达式
  1. function Person (pName) {
  2.     this.pName = pName;
  3. }
  4. Person.prototype.sayName = function () {
  5.     console.log(this === person); // => true
  6.     return this.pName;
  7. }
  8. var person = new Person('wdg');
  9. person.sayName(); // => wdg
复制代码
所以给对象原型挂载方法时,使用function函数表达式
  3.动态上下文中的回调函数

          this是js中非常强大的特点,他让函数可以根据其调用方式动态的改变上下文,然后箭头函数直接在声明时就绑定了this对象,所以不再是动态的。   
    在客户端,在dom元素上绑定事件监听函数是非常普遍的行为,在dom事件被触发时,回调函数中的this指向该dom,可当我们使用箭头函数时:
   
  1. var button = document.getElementById('myButton');  
  2. button.addEventListener('click', () => {  
  3.     console.log(this === window); // => true
  4.     this.innerHTML = 'Clicked button';
  5. });
复制代码
因为这个回调的箭头函数是在全局上下文中被定义的,所以他的this是window。所以当this是由目标对象决定时,我们应该使用函数表达式:
  1. var button = document.getElementById('myButton');  
  2. button.addEventListener('click', function() {  
  3.     console.log(this === button); // => true
  4.     this.innerHTML = 'Clicked button';
  5. });
复制代码
4.构造函数中

  在构造函数中,this指向新创建的对象实例
  1. this instanceOf MyFunction === true
复制代码
需要注意的是,构造函数不能使用箭头函数,如果这样做会抛出异常
  1. var Person = (name) => {
  2.     this.name = name;
  3. }
  4. // Uncaught TypeError: Person is not a constructor
  5. var person = new Person('wdg');
复制代码
理论上来说也是不能这么做的,因为箭头函数在创建时this对象就绑定了,更不会指向对象实例。
  5.太简短的(难以理解)函数

  箭头函数可以让语句写的非常的简洁,但是一个真实的项目,一般由多个开发者共同协作完成,就算由单人完成,后期也并不一定是同一个人维护,箭头函数有时候并不会让人很好的理解,比如
  1. let multiply = (a, b) => b === undefined ? b => a * b : a * b;
  2. let double = multiply(2);
  3. double(3); // => 6
  4. multiply(2, 3); // =>6
复制代码
   这个函数的作用就是当只有一个参数      a时,返回接受一个参数      b返回      a*b的函数,接收两个参数时直接返回乘积,这个函数可以很好的工作并且看起很简洁,但是从第一眼看去并不是很好理解。   
    为了让这个函数更好的让人理解,我们可以为这个箭头函数加一对花括号,并加上      return语句,或者直接使用函数表达式:   
   
  1. function multiply(a, b) {
  2.     if (b === undefined) {
  3.         return function (b) {
  4.             return a * b;
  5.         }
  6.     }
  7.     return a * b;
  8. }
  9. let double = multiply(2);
  10. double(3); // => 6
  11. multiply(2, 3); // => 6
复制代码
总结

    毫无疑问,箭头函数带来了很多便利。恰当的使用箭头函数可以让我们避免使用早期的      .bind()函数或者需要固定上下文的地方并且让代码更加简洁。   
    箭头函数也有一些不便利的地方。我们在需要动态上下文的地方不能使用箭头函数:定义需要动态上下文的函数,构造函数,需要      this对象作为目标的回调函数以及用箭头函数难以理解的语句。在其他情况下,请尽情的使用箭头函数。
友荐云推荐




上一篇:来自天国的 kubernetes
下一篇:Can Spring Security Be Auto-Generated?
酷辣虫提示酷辣虫禁止发表任何与中华人民共和国法律有抵触的内容!所有内容由用户发布,并不代表酷辣虫的观点,酷辣虫无法对用户发布内容真实性提供任何的保证,请自行验证并承担风险与后果。如您有版权、违规等问题,请通过"联系我们"或"违规举报"告知我们处理。

*滑动验证:
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

我要投稿

推荐阅读

扫码访问 @iTTTTT瑞翔 的微博
回页顶回复上一篇下一篇回列表手机版
手机版/CoLaBug.com ( 粤ICP备05003221号 | 文网文[2010]257号 )|网站地图 酷辣虫

© 2001-2016 Comsenz Inc. Design: Dean. DiscuzFans.

返回顶部 返回列表