什么时候不应运用es6箭头函数

2024年5月12日 164次阅读 来源: Jax2000

从最先打仗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对象作为目的的回调函数以及用箭头函数难以明白的语句。在其他情况下，请恣意的运用箭头函数。

    原文作者：Jax2000
    原文地址: https://segmentfault.com/a/1190000007074846
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞