箭头函数笔记

回顾ES3,5

// 具名函数
function xxx(v1,v2){
    console.log('函数体')
    return v1 + v2
}
// 匿名函数
let fn = function (v1,v2){
    console.log(‘函数体’)
    return v1 + v2
}
匿名函数必须赋值才可以使用。或者使用立即执行函数的方式。

上面代码中示例匿名函数，可以拆分成三步看。

1. 声明一个变量let fn

2. 声明一个匿名函数。

3. 将匿名函数作为值赋给变量fn。

然后再来看看ES6最新的箭头函数

箭头函数只能做赋值，不能当作声明

let fn = (v1,v2) =>{
    console.log('函数体')
    return v1+v2
}

以上就等价于上面的匿名函数

• 如果一个函数只有一个参数

let fn = v1 => {
    console.log('函数体')
    return v1 
}
fn(11)  //  '函数体'  11

// 还是上面的例子，做个小改动。
let fn = v1 => {
    console.log('函数体')
}
fn(1)  // '函数体' undefined
// 并没有写入return语句，那么js就会默认帮你添加return undefined

• 如果你的函数体只有一句话，你可以不需要写花括号和return。

 // 示例 let fn1 = (v1,v2) => { return v1+v2 }
// 可以写作如下方式
let fn  = (v1,v2) => v1+v2
// 省略花括号以及return。当你这样写，实际上就默认return v1+v2所以连return 都可以省略掉。但是如果你习惯加花括号，你就必须加上前面的return语句。

• 最简化的箭头函数

let fn = v1 => v1 * 2

fn(2)  // 4

箭头函数，传统函数，this

this是call 的第一个参数，this是call 的第一个参数，this是call 的第一个参数！！！

如何理解这句话。
看个例子:

var content = {
    el : 'web',
    init : function (){
        console.log(this.el)  
    }
}
// content.init()  等价于
content.init.call(content)  // this就指的是content。

ES3于ES6都支持this。
但是在ES6中，箭头函数的出现，弱化了this的用法。

关于传统函数和箭头函数。

function fn(){
    console.log(this)
}
// 如果直接调用，fn()那么，会直接返回window。
fn.call({name : 'claus'})  // this指针指向了这个对象。 {name : 'claus'}所以打印的结果就是该对象。


let fn1 = () => {
    console.log(this)
}
fn1.call({name : 'claus'})  // window...  并没有接受this参数。

let obj = {
    name : 'claus',
    sayName : (that) => {
        console.log(that.name)
// 如果你直接打印this.name  箭头函数会报错，所以需要如果需要用this 可以传入一个形参来代替this，并且在外面调用的时候将这个this的指针传入即可。
    }
}
obj.sayName(obj)

这就是箭头函数的好处，没有潜规则(隐藏的this是作为函数的第一个参数)，之前的function函数参数是会有一个this参数的。只不过讲this参数隐藏了而已。

箭头函数的优点。
亮出代码吧。

let arr = [1,2,3,4,5]

let arr2 = []

for (let i = 0; i < arr.length;i++){
    arr2.push(arr[i] * arr[i]) 
}
console.log(arr2)  // [1, 4, 9, 16, 25]

// 继续简化如下
let arr = [1,2,3,4,5]

let arr2 = arr.map(function (num){
    return num * num
})
console.log(arr2)

// 箭头函数  
let arr = [1,2,3,4,5]
let arr2 = arr.map(num => num * num)
console.log(arr2)  //  [1, 4, 9, 16, 25]
// 并且这种方式是可以叠加的。
let arr2 = arr.map(num => num * num)
              .map(num => num + 1)
              .map(num => num  + num)

1. 箭头函数让this变的可以理解。

2. 箭头函数让代码更简洁。