从-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年破百万，上东蛋，获大奖