箭头函数

特点

• 不用写 function
• 只能作为函数使用不能 new, 没有原型
• 参数不能重复命名
• 返回值可以不写 return，但是有时需要配合{}
• 内部 agruments this 由定义时外围最接近一层的非箭头函数的 agruments 和 this 决定其值

基本使用

不用写 function

// ES5 中的写法

function box (a,b){
    let c = a + b;
    console.log(c);
}

// 箭头函数的写法

let box = (a,b)=>{
    let c = a + b;
    console.log(c);
}

// 数组接受箭头函数

let arr = [()=>[]]

arr[0]();

// 对象中的属性接受箭头函数

let obj = {
    fn:()=>{

    }
}

obj.fn();

返回值可以不写 return，但是有时需要配合{}

// 省略 return 的写法

let box = (a, b)=> a+b

box(1,2) // 输出 3

// 数组也可以

let box = (a, b)=> [a,b]

box(1,2) // 输出 [1,2]

// 注意如果要返回对象需要表达式

let box = (a, b)=> ({a:a,b:b})

box(1,2) // 输出 {a: 1, b: 2}

参数不能重复命名

let box = (a, a)=> ({a:a,b:b})

box(1,2) // 报错

只能作为函数使用不能 new, 没有原型

let sum = (a+b) => a+b

new sum(); // sum is not a constructor

// sum 不是构造函数, 所以也没有原型

箭头函数表达式的语法比函数表达式更简洁，并且没有自己的this，arguments，super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方，并且它不能用作构造函数。

箭头函数中的参数和this

上面我说了箭头还是没有自己的this 和 arguments

箭头函数中的 arguments

let sum = (a, b) =>{
    console.log(agruments, a, b)
}
sum(1,2) // 报错: agruments 未定义

function box (){
    let sum = (a, b) =>{
        console.log(agruments, a, b) // 输出函数 box 的 agruments 所以是 [11, 12], 1, 2
    }
    sum(1,2)
}
box(11,12);

// 对比 ES5

function box1 (){
    var arg = agruments
    return function (){
        console.log(arg, agruments)
    }
}

box1(1,2);

// 如果要在 ES5 中要拿到 box1 的参数列表，要用这种方式写，但是在 ES6 中可以用箭头函数直接拿到

所以说箭头函数内部 agruments 由定义时外围最接近一层的非箭头函数的 agruments 决定其值

箭头函数中的 this

在全局定义中

let box = (a, b)=>{
    conosle.log(this);
}
box(); // 打印出 window

把上面的代码我们转成 ES5 来看一下

() => console.log(this)

// 经过 babel 转化后的 ES5 代码如下

var self = this
(function () {
  console.log(self)
})

所以在全局定义中箭头函数的 this 是指向 window 的

在局部中定义

var a = 'chengchengcheng';

let box = ()=>{
    conosle.log(this.a);
}

let obj = {
    a: 'cccccc',
    fn: box
}

let obj1 = {
    a: 'cccccc',
    fn: ()=>{
        conosle.log(this.a);
    }
}

obj.fn() // 输出 chengchengcheng
obj1.fn() // 输出 cccccc // 因为 obj1 是对象, 不是函数

这里还是输出的是全局变量中 a 的值。因为箭头函数内部 this 由定义时外围最接近一层的非箭头函数的 this 决定其值

var a = 'chengchengcheng';

let obj = {
    a: 'cccccc',
    fn (){
        let box = () =>{
            cnosole.log(this.a)
        }
        box();
    }
}

obj.fn() // 输出 cccccc

在函数中

function a(x){
    return function (y){
        return function (z){
            return x + y + z
        }
    }
}

var sum = a(1);
var sum1 = sum(2);
console.log(sum1(3)) // 输出 6

// 遇到这种情况使用箭头函数,会特别的简单

let a = x => y => z => x + y + z;

console.log(a(1)(2)(3)); // 输出 6