从-1开始的ES6探索之旅01：颜文字成精的箭头函数上篇 - 大哥，你指哪呢？

Snailclimb 发布于2019-08-21 18:36 / 2909人阅读

摘要：基础语法参数参数参数函数声明参数参数参数表达式单一相当于参数参数参数表达式当只有一个参数时，圆括号是可选的单一参数函数声明单一参数函数声明没有参数的函数应该写成一对圆括号。

温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命
温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？

之前在某些大神的代码中出现一串神秘符号类似于num => console.log(num)
看的我瑟瑟发抖，心想你跟我闹着玩呢？这段代码要是能运行，简直是颜文字成精了

可是颜文字可就真成精了／前提是在支持ES6的浏览器，或代码被编译／翻译过

后来知道这就是ES6中的重要特性，箭头函数了

箭头函数怎么用

首先看看定义，和基础用法

箭头函数表达式的语法比函数表达式更短，并且不绑定自己的this，arguments，super或 new.target。这些函数表达式最适合用于非方法函数，并且它们不能用作构造函数。

//基础语法

(参数1, 参数2, …, 参数N) => {函数声明}
(参数1, 参数2, …, 参数N) => 表达式（单一）
//相当于：(参数1, 参数2, …, 参数N) =>{ return表达式}

// 当只有一个参数时，圆括号是可选的：
(单一参数) => {函数声明}
单一参数 => {函数声明}

// 没有参数的函数应该写成一对圆括号。
() => {函数声明}

源自MDN Web docs - Web技术文档／javascript／箭头函数

看看定义，箭头函数就是突出一个短字，短就代表简单，方便，效率高，这不正是我辈程序员毕生最求的吗把一堆代码，改成短短一行／让人不一定看的懂，不正是大神们最流行的装逼方式吗

回过头来，再看看怎么使用，我们有这样几个函数

function fn1(num){
    return console.log(num)
}

function fn2(a,b){
    return console.log(a,b)
}

function fn3(){
    return console.log(1)
}

可以用箭头函数改写为

var fn1 = num => console.log(num);//只有一个参数
var fn2 = (a,b) => console.log(a+b);//有多个参数
var fn3 = () => console.log(1);//没有参数

是不是很酷，三行变一行
说的明白点，首先，通过定义的方式，不难看出箭头函数一定是一个匿名函数，例子中的用法是把箭头函数赋值给变量，当作一般方法使用，再有箭头左边的是这个函数的参数而箭头右边就是函数体，总的来说如果只有一个参数，或者函数体中只有一行表达式，那么无论是参数的小括号，还是函数体的大括号都可以直接省略，而没有参数的时候则需要写上一对小括号

通俗的理解，就是为右侧的表达式中的变量，指／=>派了值，而这个值就是左边的参数，再把表达式返回，这样理解起来就形象了，例如num => console.log(num)就是把箭头左侧的num指派到了右侧表达式当中

在使用中要注意一点

在一个简写体中，只需要一个表达式，并附加一个隐式的返回值。在块体中，必须使用明确的return语句。
源自MDN Web docs - Web技术文档／javascript／箭头函数

举个例子

var getNum = num => num+1;
var getNumBlock = num =>{
    num+1
}
console.log(getNum(1));//2
console.log(getNumBlock(1));//undefined

因为在num => num+1中使用了简写方法，所以会隐形的将num+1作为返回值，而在num =>{num+1;}中，因为使用了大括号包围，使其成为了一个块体，就需要我们定义return语句了，对其作出修改

var getNumBlock = num => {
    return num+1
}
console.log(getNumBlock(1))//2

那么箭头函数具体有什么用呢？

当然是用起来方便了

在上文中，我们可以明显的感觉到使用箭头函数缩减了不少的代码量，而且一旦熟悉了其使用，阅读代码也更加方便明确
上文的例子，是将箭头函数赋值给变量当作普通方法来使用，而在我个人的开发过程中，这么使用的情况基本上没有…正如定义中所说

这些函数表达式最适合用于非方法函数

在这点上，可以吧箭头函数当作匿名函数来使用

我的理解中，箭头函数这个概念应该弱化函数这个概念，把它理解为一个普通的表达式，其实更方便日常的使用
在日常的开发中，有没有明明不需要定义函数，却还得写function的地方呢，当然有了那就是在回调函数的使用中

如下面这个例子

function getNum(num,callBack){
    let result = num + 1;
    callBack(result)
}

getNum(1,function(result){
    console.log(result)
})//2

其中对getNum()的调用就可以改写为

getNum(1, result => console.log(result))//2

写起来真的是自由的感觉，不但少些了很多代码，看上去还更加易于理解了，简直要起飞

this？哪个？怎么又是你！

起飞之前还需要明白箭头函数的一个特征，正如定义中后半句写的

不绑定自己的this，arguments，super或 new.target

先不管arguments,super,new.target

this我可是认识你！，在函数中对this的使用一定要小心，稍不注意就会懵逼，在之前一篇文章中我曾经梳理过关于this的相关坑 javascript对象不完全探索记录01：this! which？- lskrat复习一下大概一句话概括，函数中的this指的是调用该函数的对象

而回过头来看箭头函数，所谓的不绑定自己的this意义就是定义中的

箭头函数不会创建自己的this；它使用封闭执行上下文的this值。
源自MDN Web docs - Web技术文档／javascript／箭头函数

换句话说，箭头函数中的this就是它外面一层的this
举个例子

var name = "outer"
var obj = {
    name : "inner",
    getName : function(){
        return function(){
            console.log(this.name)
        }
    },
    getNameByArrow : function(){
        return () => console.log(this.name)        
    }
}
obj.getName()();//outer
obj.getNameByArrow()();//inner

这不正是我们想要的结果吗？！
箭头函数中的this妥妥的指向了这个对象，跟谁调用它完全无关，虽然很爽，但是这也会出现一些问题，这就导致编写不同类型函数时对this的使用会造成混淆
我是觉得没办法，只能通过对基础原理的深透理解和开发的经验来回避了

个人在面对这个问题时，还是我刚才说的可以不要把箭头函数看作函数就把它理解为普通表达式，这样也能方便的理解其对于this的解释方式了

能看到这的都被指了很久了0 0

无聊的话：新年第一文，水平依旧幼稚，希望新的一年，紧密团结在一个中心两个基本点周围开展工作！能有所进步！
无聊的话-续：恭喜我团17年破百万，上东蛋，获大奖

专线服务云服务器指哪呢 id从1开始从0开始到1千万用户箭头函数

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

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

从-1开始的ES6探索之旅02：小伙子，你对象咋来的？续篇 - 你的对象班（class）里来的？

摘要：这是因为子类没有自己的对象，而是继承父类的对象，然后对其进行加工。温馨提示：作者的爬坑记录，对你等大神完全没有价值，别在我这浪费生命温馨提示-续：你们要非得看，我也拦不住，但是至少得准备个支持ES6的Chrome浏览器吧？温馨提示-再续：ES6简直了，放着不用简直令人发指！书接上回，即便是程序员，也还是能够通过自己的努力辛辛苦苦找到合适对象的，见前文《javascript对象不完全...

incredible 2019-08-21 18:41 评论0 收藏0
CloudBest：科普 | 一图看懂 5G 从哪来的

摘要：一个人的气质里有走过的路读过的书爱过的人又经历了哪些故事呢引子一部高清电影秒秒钟就能下载下来远程游戏再也不会有卡顿和延迟的感觉了依托也出现了一系列的新东西，比如，车联网自动驾驶远程控制等等那从哪来的呢她经历了怎样的故事才走到如今的样子本期将一个人的气质里有走过的路、读过的书、爱过的人5G 又经历了哪些故事呢？引子一部高清电影秒秒钟就能下载下来远程游戏再也不会有卡顿和延迟的感觉了依托 5G...

Tecode 2022-06-28 18:59 评论0 收藏0
面试之旅-深圳遇到的问题和一些自己的拓展以及答案1

摘要：比如如果不使用构造函数，则和是对象的方法，两个方法的作用是一样的谁谁，就把指向谁。，本题提到了冒泡算法，那么就认为不是要使用原生的方法，要自己封装一个类似功能的方法或称函数。就是通过中构造函数原型链继承的方式来实现的。 ❤，es6中的高级数据结构set和map的使用以及与es5中旧有的obj、array等结构的差别？ (1) Set构建函数可以接受一个数组作为初始化参数 var s...

Cympros 2019-08-02 10:41 评论0 收藏0
面试之旅-深圳遇到的问题和一些自己的拓展以及答案1

摘要：比如如果不使用构造函数，则和是对象的方法，两个方法的作用是一样的谁谁，就把指向谁。，本题提到了冒泡算法，那么就认为不是要使用原生的方法，要自己封装一个类似功能的方法或称函数。就是通过中构造函数原型链继承的方式来实现的。 ❤，es6中的高级数据结构set和map的使用以及与es5中旧有的obj、array等结构的差别？ (1) Set构建函数可以接受一个数组作为初始化参数 var s...

Mertens 2019-08-30 15:53 评论0 收藏0