ES6变化--箭头函数

箭头函数特点：
1.不用写function关键字
2.只能作为函数使用不能new，没有原型
3.参数不能重复命名
4.返回值可以不写return，但是有时需要配合{}
5.内部arguments this 由定义时外围最接近一层的非剪头函数的arguments和this决定其值

1）这里以sum函数为例

function sum (a, b) {
    return a + b;
};
var sum = function (a, b) {
    return a + b;
};

箭头函数则可写为：

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

其中亦是没有写return,对应上面第三条
当let sum = (a, b) => {a + b}；将a+b放置在块级作用域中不加return则执行后结果为undefined

如果箭头函数返回值是一个对象，需要用表达式的写法

let sum = (a, b) => ({a: a, b: b});
console.log( sum(10, 20) )

image.png

2）高阶函数

//ES5写法
function sum (x) {
    return function (y) {
        return function (z) {
            return x + y + z;
        }
    }
};
sum(1)(2)(3)
var sum1 = sum(1);
var sum2 = sum1(2);
console.log( sum2(3) );

//箭头函数
let sum = x => y => z => x + y + z;

let sum = x => y => z =>  x + y + z;
 
console.log( sum(1)(2)(3) );//也可证明箭头函数是可以被返回的

3)参数不能重复命名
在ES5中参数可以重名

//ES5语法
var sum0 = function(a,a){
    console.log(a+a);
}
sum0(1,2); // 2+2=4 
var sum1 = function (a, a) {
    console.log(a);
}

而箭头函数不可以

let sum = (x, x) => {
}

报出的错误如下

image.png

4）只能作为函数使用不能new，没有原型

let sum = () => {
    this.a = 10;
}
new sum();

image.png

证明成立

5. 内部arguments this 由定义时外围最接近一层的非剪头函数的arguments和this决定其值

//例1
function outer () {
    // arguments
    // 9 10 11
    let sum = (a, b) => {
        console.log(arguments, a, b);
    };
    sum(1, 2);
}
outer(9, 10, 11);

返回一个箭头函数且这个箭头函数不存在arguments，可以说arguments未定义

function Curry () {
    // var arg = arguments;
    return () => {
        console.log(arguments)
    }
};
Curry('a', 'b')(1, 2);

this问题
我们再看一遍内部this 由定义时外围最接近一层的非剪头函数的this决定其值

var a = 'outerObj';

let sum = () => {
    // window 
    console.log(this.a);
};
sum();//outerObj

我们知道上面的代码中箭头函数sum中的this指向window
接着我们看几个例子：

let obj = {
    a: 'innerObj',
    fn () {
        // this obj
        let sum = () => {
            // obj
            console.log(this.a);
        }
        return sum;
    }
};
let outerSum = obj.fn();
outerSum();//innerObj

将obj.fn()返回的箭头函数sum赋值给outerSum后，执行outerSum()，而fn是一个普通函数，被定义箭头函数sum的外面是fn，所以this指向obj。

let obj = {
    ms: 'abc',
    fn () {
        // obj
        // var self = this;
        setTimeout( function() {
            //this obj
            console.log(this.ms);
        }, 500)
    }
};
obj.fn();

因为setTimeout中存在闭包，this指向window所以运行结果为undefined。解决这种情况有两种方法

//1.通过在fn()中将this赋值给一个新变量
let obj = {
    ms: 'abc',
    fn () {
        // obj
        var self = this;
        setTimeout( function() {
            //this obj
            console.log(self.ms);
        }, 500)
    }
};
obj.fn();

//2.箭头函数
let obj = {
    ms: 'abc',
    fn () {
        // obj
        // var self = this;
        setTimeout( () => {
            //this obj
            console.log(this.ms);
        }, 500)
    }
};
obj.fn();

看一下babel编译之后的箭头函数
测试代码如下：

//1-arrow.js
let sum = x => x * x;

let obj = {
    ms: 'abc',
    fn () {
        // obj
        // var self = this;
        setTimeout( () => {
            //this obj
            console.log(this.ms);
        }, 500)
    }
};

babel命令：npx babel 1-arrow.js -o 1-newarrow.js

//1-newarrow.js可知与普通写法一样
var sum = function sum(x) {
  return x * x;
};

var obj = {
  ms: 'abc',
  fn: function fn() {
    var _this = this;

    // obj
    // var self = this;
    setTimeout(function () {
      //this obj
      console.log(_this.ms);
    }, 500);
  }
};
obj.fn();

我们再看看数组

let arr = [10, 20, 30, 40, 50, 60];
console.log( arr.map(ele => ele * ele) );
console.log( arr.filter(ele => ele > 20) );//过滤大于20的数

对比与以前的数组写法，箭头函数极大地缩短了代码量

最后，我们来总结一下箭头函数的作用：函数目的指向性更强，可读性更好，简化代码，提升开发效率