箭头函数

1.先看个例子

function sum1(name){
    return name * 3
}
sum1(9) //27

再看这个例子有什么不同

var sum1 = (name) => name * 3
sum1(9) //27

是不是简洁了很多嘞，等于把function去掉而用'=>'代替（这样描述可能不好，方便记忆。）所以箭头函数的优点是简洁代码。

2.还有这种，假如参数是一个的话，我们还可以把()省略

var  sum2 = function(v1){
    return v1
}
sum2(2)

变这样

var sum2 = v1 => v1
sum2(2)

3.有个需要注意的，假如箭头函数返回的是一个对象，这个对象要用()把它盘起来,不然直接报错。

var sum3 = y => ({name: 'Tom', age: 20})
console.log(sum3) //v => ({name: 'Tom', age: 20})

4.还是多看例子,遍历数组的例子。

普通写法

var arr = [1, 2, 3].map(function(x){
    return x * x
})
console.log(arr) //[1, 4, 9]

用箭头函数怎么写

var arr = [1, 2, 3].map(x => x * x )
console.log(arr) //[1, 4, 9]

5.这样

普通的

var sum4 = function(v1, v2){
    return v1 - v2
}
sum4(5, 6) //-1

箭头的(前提是return后面跟的是一个表达式)

var sum4 = (v1, v2) => {
    return v1 - v2
}
sum4(5, 6) //-1

不急，还有更简洁的。

var sum4 = (v1, v2) => v1 - v2
sum4(5, 6) //-1

下面说一下箭头函数的this

• 箭头函数的 this 始终指向函数定义时的 this，而非执行时。，箭头函数需要记着这句话：“箭头函数中没有 this 绑定，必须通过查找作用域链来决定其值，如果箭头函数被非箭头函数包含，则 this 绑定的是最近一层非箭头函数的 this，否则，this 为 undefined”。

我觉得这个例子挺好的，借来看看。

var app = {
    fn1() {
        setTimeout(function(){
            console.log(this)
        }, 10)
    },
    fn2() {
        setTimeout(()=>{
            console.log(this)
        },20)
    },
    fn3() {
        setTimeout((function(){
            console.log(this)
        }).bind(this), 30)        
    },
    fn4: ()=> {
        setTimeout(()=>{
            console.log(this)
        },40)        
    }
}
app.fn1()
app.fn2()
app.fn3()
app.fn4()

app.fn1() //window 前面没有东西执行这个fn1，所以是window，这个按照平时的this来解读
app.fn2() //app 箭头函数里面没资格有自己的this，借用setTimeout外面的this,也就是app
app.fn3() //app 注意bind
app.fn4() //app 箭头函数没有this，向上找，找到了app

补充：

• 箭头函数不能被new调用，会报错。
• 箭头函数没有原型，所以也没有prototype这个属性。
• 箭头函数没有this，通过查找作用域链来决定。

自己对函数箭头的理解笔记，有误请指正，ヾ(◍°∇°◍)ﾉﾞ加油