深入浅析ES6中的箭头函数及其作用域

发布时间：10/01 来源：未知浏览：关键词：

有味和有用的使用

创立一个函数很容易，我们可以利用它可以保持作用域的特点：

例如我们可以这么使用：Array.forEach()

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.forEach(vowel => {
    console.log(vowel);
});

剖析：在forEach里箭头函数会创立并返回一个暂时函数 tempFun,这个tempFun你可以想象成这样的：function(vowel){ console.log(vowel);}但是Array.forEach函数会如何去处置传入的tempFunc呢？在forEach函数里会这样调取它：tempFunc.call(this,value);所有我们看到函数的准确施行结果。

//在Array.map里使用箭头函数，这里我就不剖析函数施行历程了。。。。

var arr = ['a', 'e', 'i', 'o', 'u'];
arr.map(vowel => {
    return vowel.toUpperCase();
});
// [ "A", "E", "I", "O", "U" ]

费布拉奇数列

var factorial = (n) => {
    if(n==0) {
        return 1;
    }
    return (n * factorial (n-1) );
}
factorial(6); // 720

我们也可以用在Array.sort办法里：

let arr = ['a', 'e', 'i', 'o', 'u'];
arr.sort( (a, b)=> a < b? 1: -1 );

也可以在事件监听函数里使用：

// EventObject, BodyElement
document.body.addEventListener('click', event=>console.log(event, this));

引荐的链接

下面列出了一系列有用的链接，大家可以去看一看

Arrow Functions in MDN Documentation
TC39 Wiki about Arrow Function
ESNext
ES6 Tools
Grunt ES6 Transpiler
ES6 Fiddle
ES6 Compatibility Table

总结

尽管大家大概会认为使用箭头函数会落低你代码的可读性，但是由于它对作用域的非凡处置，它能让我们能很好的处置this的指向问题。箭头函数加上let关键字的使用，将会让我们JavaScript代码上一个层次！尽量多使用箭头函数，你可以再你的阅读器测试你写的箭头函数代码，大家可以再评论区留下你对箭头函数的设法和使用方案！我但愿大家能享受这篇文章，就像你会不就的未来享受箭头函数带给你的欢乐.