es6 - 箭头函数

13651657101 发布于2019-08-26 11:46 / 3048人阅读

摘要：也就是说箭头函数的的值不再根据调用时上下文确定，而是像普通变量那样根据定义时的作用域链进行查找。箭头函数中的依然要根据定义时的作用域链进行查找。知乎这篇文章对箭头函数的一些不适合的场景进行了总结，可以作为参考。

es6 - 箭头函数

哇，箭头函数...，听起来好NB，但是如果你知道它是因为使用了=>这样类似箭头的符号，所以才叫箭头函数。瞬间感觉：“呵，这名字起的...”。

es6增加了箭头函数的特性当然不是为了装B，它可以看作是js中函数的一次进化。

我们知道，在js中，函数有着不一样的地位，除了作为普通函数外，它可以用来构造自定义类型，作为对象的方法，通过调用bind方法得到一个新函数。在后三者的使用中，大多数情况下都要用到一个特性 this。

函数中，this是动态绑定的，它的值是根据调用的上下文来确定的，关于函数的4种使用方式，书中都已经有了详细介绍，不再赘述。但是，this在带来强大能力的同时，也增加了编程错误的几率。即使是有经验的开发者，在使用this时，也可能因为疏忽而导致错误，而且，它会让代码更加难以理解。

箭头函数，可以解决上面的问题。

而且，箭头函数可以写的非常的简洁。

语法 箭头函数简洁的语法

程序员很懒的，我们热衷于各种脚本语言，语法糖。不就是因为他们能够让开发更有效率，让代码写的更少，更爽吗？箭头函数简化了函数的语法。

(arg1, arg2, ...) => {
    //...
}

上面是一个标准的箭头函数的写法，左边的()中填入函数参数，右边的{}中写入执行语句。

当函数参数只有一个时，()可以省略。当右边{}中只有单行语句时，{}可以省略。可能有下面这种形式：

let square = x => x*x ;

它相当于普通函数的

let square = function(x){
    return x*x;
}

箭头函数的用法有以下几种：

let sum = (num1, num2) => num1 + num2 ; //作为普通函数使用

let arr2 = [1,2,3,4].map( item => item*2 ); //作为回调使用

(() => { //语句... })();                    //作为立即执行的匿名函数使用

箭头函数中的this

箭头函数与普通函数最大的不同就是this，前面已经讲过了，普通函数中this是根据上下文确定的。而在箭头函数中，没有this绑定。

也就是说箭头函数的this的值不再根据调用时上下文确定，而是像普通变量那样根据定义时的作用域链进行查找。如果箭头函数外部是一个非箭头函数，箭头函数内部this的值就与该函数一致。如果箭头函数外部是全局环境，那么this的值就是全局对象 - window(浏览器环境)或global(node环境)。
比如：

var PageHandler = {
    id: "123456",
    init: function(){
        document.addEventListener("click",
            event => this.doSomething(event.type), false);
    },
    doSomething: function(type){
        console.log("Handling" + type + "for" + this.id);
    }
}

在上面这段代码中，由于箭头函数中this与其外部init函数保持一致，因此，this保存的就是PageHandler对象的引用，所以可以调用doSomething方法。

如果使用普通函数代替箭头函数，那么这样使用this会导致错误，因为这时this指向的document对象。通用的解决方法是在init中保存this的引用var _this = this，然后使用_this代替this。

箭头函数的arguments

js函数中的arguments给了我们操作函数参数极大的便捷和灵活性。但是，同this一样，在箭头函数中，没有arguments绑定。

箭头函数中的arguments依然要根据定义时的作用域链进行查找。

虽然，箭头函数中我们无法再使用arguments来操作函数参数，但是我们可以使用es6中的剩余参数特性来获得同以前arguments同样的效果。比如：

let sum = (...rest) => console.log(rest.length)

注意事项

在使用箭头函数的简写形式时，要注意一点：

let getData = () => {name: "icode007", age: 27}; //会报错

报错的原因是js把 =>右边对象的{}当成了函数体的{}，因此，要使用()把对象包裹起来

let getData = () => ({name: "icode007", age: 27});

在箭头函数中，不仅仅是this，arguments没有绑定。

同样没有绑定的还有super：es6特性，super指向当前对象的原型对象，相当于Object.getPrototypeOf(this).call(this)

new.target: es6特性，用于确定函数的使用方式，如果作为普通函数调用，该值等于undefined，如果作为构造函数调用，该值指向新创建对象实例的构造器。

最佳实践

箭头函数相比于普通函数有很多优势：代码简洁，性能更好，避免了this的问题等，因此可以大量使用。

就个人感觉来讲，箭头函数更接近于函数的原本的能力。如果仅仅是想封装一段代码，或是作为回调函数使用，而不是用作构造函数，函数绑定等功能。使用箭头函数可以更好。总之，当你在函数中无需使用this时，使用箭头函数可能是更好的选择。

箭头函数也有很多不适合的场景：
比如，作为方法使用时，不要使用箭头函数。不要为了过分追求代码的简洁而让函数变得难以阅读和理解等。知乎这篇文章对箭头函数的一些不适合的场景进行了总结，可以作为参考。

什么时候不能使用箭头函数？：知乎

可以关注我的专栏学习es6, 打算对es6知识进行一下系统总结，欢迎共同学习。

参考文献: MDN: 箭头函数

云服务器 idc机房托管箭头函数 ES6 es6-系列 ES6入门

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

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

ES6学习笔记之箭头函数

摘要：特性介绍箭头函数是新增的特性之一，它为这门语言提供了一种全新的书写函数的语法。用生成的函数会定义一个自己的，而箭头函数没有自己的，而是会和上一层的作用域共享。本文同步自我得博客：http://www.joeray61.com JS中的箭头箭头在JS里并不算是个新鲜的玩意儿，一直以来，JS都支持-->这样的箭头。很早的时候有些浏览器还不支持JS，当时的人们为了兼容这些浏览器，需要这...

Vultr 2019-08-19 18:12 评论0 收藏0
深入ES6：箭头函数

摘要：令人震惊的箭头函数引入了写入函数的新语法。使用箭头函数创建简单对象时有一个警告。代码因此被默默地解释为一个不执行任何操作并返回未定义的箭头函数。内部函数是一个箭头函数，所以它从封闭范围继承此函数。箭头从一开始就一直是JavaScript的一部分。第一个JavaScript教程建议在HTML注释中包装内联脚本。这会阻止不支持JS的浏览器错误地将JS代码显示为文本。你会写这样的东西： ...

MasonEast 2019-08-22 17:14 评论0 收藏0
ES6 箭头函数从了解到深入

摘要：有传闻说，箭头函数的语法，是受到了的影响，并且它与中的语法一样，共享上下文。箭头函数是新增加的一个特性。箭头函数没有自己的值，其值是通过继承其它传入对象而获得的通常来说是上一级外部函数的的指向。箭头函数 1. 简单的定义：胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全新特性。有传闻说，箭头函数的语法=>，...

Eminjannn 2019-08-20 16:37 评论0 收藏0
ES6~你跟箭头函数升华之路

摘要：箭头函数简单的定义胖箭头函数，又称箭头函数，是一个来自又称的全新特性。箭头函数是新增加的一个特性。使用箭头函数的注意点箭头函数在参数和箭头之间不能换行。值得注意的一点就是对象的指向是可变的，但在箭头函数内是固定的。箭头函数 1. 简单的定义：胖箭头函数 Fat arrow functions，又称箭头函数，是一个来自ECMAScript 2015（又称ES6）的全新特性。有传闻说，...

Faremax 2019-08-21 17:16 评论0 收藏0
关于ES6中箭头函数的this问题

摘要：对象的指向是可变的，但是在箭头函数中，它是固定的。同样的由于箭头函数没有自己的所以传统的显性绑定无效内部的指向外部在的学习中，的指向问题一直是个难点，特别是在对象方法中使用时，必须更加小心。由此箭头函数在很大程度上减少了我们的困扰。什么是箭头函数用法 ES6 允许使用箭头（=>）定义函数测试 var p1 = document.getElementById(test1)...

LeviDing 2019-08-22 10:53 评论0 收藏0