【转载】ES6专题—箭头函数

https://zhuanlan.zhihu.com/p/59376805

1.箭头函数的主要使用模式如下：

//  一个参数对应一个表达式
param => expression;// 例如 x => x+2;
​
// 多个参数对应一个表达式
(param [, param]) => expression; //例如 (x,y) => (x + y);
​
// 一个参数对应多个表示式
param => {statements;} //例如 x = > { x++; return x;};
​
//  多个参数对应多个表达式
([param] [, param]) => {statements} // 例如 (x,y) => { x++;y++;return x*y;};
​
//表达式里没有参数
() => expression; //例如var flag = (() => 2)(); flag等于2
​
() => {statements;} //例如 var flag = (() => {return 1;})(); flag就等于1
​
 //传入一个表达式，返回一个对象
([param]) => ({ key: value });
//例如  var fuc = (x) => ({key:x})
        var object = fuc(1);
        alert(object);//{key:1}

2.箭头函数中的 this

箭头函数内的this值继承自外围作用域。运行时它会首先到它的父作用域找，如果父作用域还是箭头函数，那么接着向上找，直到找到我们要的this指向。

我们先看一道经典的关于this的面试题：

var name = 'leo';
var teacher = {
    name: "大彬哥",
    showName: function () {
        function showTest() {
            alert(this.name);
        }
        showTest();
    }
};
teacher.showName();//结果是 leo，而我们期待的是大彬哥，这里this指向了window，我们期待指向teacher

var name = 'leo';
var teacher = {
    name: "大彬哥",
    showName: function () {
        let showTest = ()=>alert(this.name);
        showTest();
    }
};
teacher.showName();