什么时候不该使用es6箭头函数

fizz 发布于2019-08-20 11:29 / 625人阅读

摘要：我们在需要动态上下文的地方不能使用箭头函数定义需要动态上下文的函数，构造函数，需要对象作为目标的回调函数以及用箭头函数难以理解的语句。

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

1.在对象上定义函数

先来看下面这段代码

var obj = {  
    array: [1, 2, 3],
    sum: () => {
        console.log(this === window); // => true
        return this.array.reduce((result, item) => result + item);
    }
};

// Throws "TypeError: Cannot read property "reduce" of undefined"
obj.sum();

sum方法定义在obj对象上，当调用的时候我们发现抛出了一个TypeError，因为函数中的this是window对象，所以this.array也就是undefined。原因也很简单，相信只要了解过es6 箭头函数的都知道

箭头函数没有它自己的this值，箭头函数内的this值继承自外围作用域

解决方法也很简单，就是不用呗。这里可以用es6里函数表达式的简洁语法，在这种情况下，this值就取决于函数的调用方式了。

var obj = {  
    array: [1, 2, 3],
    sum() {
        console.log(this === obj); // => true
        return this.array.reduce((result, item) => result + item);
    }
};

obj.sum(); // => 6

通过object.method()语法调用的方法使用非箭头函数定义，这些函数需要从调用者的作用域中获取一个有意义的this值。

2.在原型上定义函数

在对象原型上定义函数也是遵循着一样的规则

function Person (pName) {
    this.pName = pName;
}

Person.prototype.sayName = () => {
    console.log(this === window); // => true
    return this.pName;
}

var person = new Person("wdg");

person.sayName(); // => undefined

使用function函数表达式

function Person (pName) {
    this.pName = pName;
}

Person.prototype.sayName = function () {
    console.log(this === person); // => true
    return this.pName;
}

var person = new Person("wdg");

person.sayName(); // => wdg

所以给对象原型挂载方法时，使用function函数表达式

3.动态上下文中的回调函数

this是js中非常强大的特点，他让函数可以根据其调用方式动态的改变上下文，然后箭头函数直接在声明时就绑定了this对象，所以不再是动态的。
在客户端，在dom元素上绑定事件监听函数是非常普遍的行为，在dom事件被触发时，回调函数中的this指向该dom,可当我们使用箭头函数时:

var button = document.getElementById("myButton");  
button.addEventListener("click", () => {  
    console.log(this === window); // => true
    this.innerHTML = "Clicked button";
});

因为这个回调的箭头函数是在全局上下文中被定义的，所以他的this是window。所以当this是由目标对象决定时，我们应该使用函数表达式:

var button = document.getElementById("myButton");  
button.addEventListener("click", function() {  
    console.log(this === button); // => true
    this.innerHTML = "Clicked button";
});

4.构造函数中

在构造函数中，this指向新创建的对象实例

this instanceOf MyFunction === true

需要注意的是，构造函数不能使用箭头函数，如果这样做会抛出异常

var Person = (name) => {
    this.name = name;
}

// Uncaught TypeError: Person is not a constructor
var person = new Person("wdg");

理论上来说也是不能这么做的，因为箭头函数在创建时this对象就绑定了，更不会指向对象实例。

5.太简短的（难以理解）函数

箭头函数可以让语句写的非常的简洁，但是一个真实的项目，一般由多个开发者共同协作完成，就算由单人完成，后期也并不一定是同一个人维护，箭头函数有时候并不会让人很好的理解，比如

let multiply = (a, b) => b === undefined ? b => a * b : a * b;

let double = multiply(2);

double(3); // => 6

multiply(2, 3); // =>6

这个函数的作用就是当只有一个参数a时，返回接受一个参数b返回a*b的函数，接收两个参数时直接返回乘积，这个函数可以很好的工作并且看起很简洁，但是从第一眼看去并不是很好理解。
为了让这个函数更好的让人理解，我们可以为这个箭头函数加一对花括号，并加上return语句，或者直接使用函数表达式:

function multiply(a, b) {
    if (b === undefined) {
        return function (b) {
            return a * b;
        }
    }
    return a * b;
}

let double = multiply(2);

double(3); // => 6
multiply(2, 3)； // => 6

总结

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

GPU云服务器云服务器箭头函数箭头云服务器安装使用指南箭头云服务器是什么什么时候开始的

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/80600.html

ES6-箭头函数

摘要：编程中经常定义一些短小的匿名函数，使用箭头函数语法可使得这类函数的定义更加简洁。外部函数的，等价于定义个局部变量修改内部的所以这样，，也就无法修改箭头函数的值的。抛异常即箭头函数不能作为构造函数，其也不具有属性。一、概述箭头函数是指通过=>语法定义的函数。JS编程中经常定义一些短小的匿名函数，使用箭头函数语法可使得这类函数的定义更加简洁。 // ES3/5方式 var fun1 =...

wapeyang 2019-08-23 10:22 评论0 收藏0
ES6-Generator与react状态机（13）

摘要：同理，你只要知道改变状态能够实现要的功能，大体上的原理就是状态机就可以了。总结，本文重点状态机模式的使用场景，复杂多状态的管理，这里注意你没必要写个选项卡之类的用状态机，那反而是给自己找麻烦。大家在写App和一些单页面程序的时候，经常会遇到这样的情况：showImg(https://segmentfault.com/img/bVbsNaA?w=240&h=427);当点击左边的箭头的...

alphahans 2019-08-26 13:49 评论0 收藏0
每日 30 秒 ⏱ 该不该优雅

showImg(https://segmentfault.com/img/remote/1460000018734296?w=900&h=500); 简介可读性、性能、Spread、Reduce 在优雅三连击中有同学提到了可读性这个关键词，就小二个人的观点在某个范围内使用比较常用到的小技巧，可以提升一定的可读性，文中提到的短路运算在初始化变量是提升可读性的，并且在很多提倡优化if 语句...

JohnLui 2019-08-26 13:41 评论0 收藏0
JavaScript & 6小时了解ES6基本语法

摘要：返回布尔值，表示参数字符串是否在源字符串的头部。参考语法返回一个布尔值与的全等操作符比较兼容环境把对象的值复制到另一个对象里浅拷贝定义方法用于将所有可枚举的属性的值从一个或多个源对象复制到目标对象。语法要设置其原型的对象。一步一步似爪牙。前言学习es6之前我们可能并不知道es6相比es5差距在哪, 但是这并不妨碍我们站在巨人的肩膀上; 程序员就是要乐于尝鲜; 学习es6最终目的是...

Amos 2019-08-20 19:03 评论0 收藏0