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

舒适提示：做者的爬坑记录，对你等大神彻底没有价值，别在我这浪费生命
舒适提示-续：大家要非得看，我也拦不住，可是至少得准备个支持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年破百万，上东蛋，获大奖