es6的箭头函数与其中的this

简单说明

2009年，ES5发布；随后，2011年，ES5.1发布，也就是我们现在常用的JS标准，当然这个版本也已经有些年头了，所以我们需要开始学习下一代的规范版本了，也就是ES6，用官方的话来说，这是一个集大成的版本，更新了很多新的内容，值得每一个前端去学习掌握，嗯，开始学习了！

箭头函数

箭头函数 => 是ES6的新增语法规则，有两个特点，更简短，不绑定this。 下面先来看一下ES5中函数的写法。

// 第一种，声明形式
function fn(){}
// 第二种，表达式形式
let fn = function(){}
复制代码

ES5中，函数可以有两种形式的写法，声明形式和表达式的形式，在ES6中，这两种形式没有被取代，只不过对于表达式形式的写法（左边是变量，右边是匿名函数，使用赋值符号连接）可以利用箭头函数替换，简单来说就是箭头函数的写法对于匿名函数有效，对于声明式的函数不行。

于是，上面的形式可以换成这种

let fn = ()=>{}
复制代码

是不是感觉简洁多了。

箭头函数的简洁性

去除function关键字

var fn = function(param){
    return param;
}
let fn = (param)=>{return param}
复制代码

只有一个形参的时候可以省略括号（没有形参或不止一个形参则不行）

let fn = param =>{
    return param*param
}
复制代码

可以省略return 关键字

let fn = (param)=>param*param;
// 此函数的返回值就是实参值得平方

// 注意，当return 关键字存在的时候，一定存在大括号{}，反之，当大括号存在的时候，如果有return，则表示此函数有返回值，如果没有，则表示大括号里的内容都是函数的语句，因此，这些语句应符合规范
// 举个例子
var fn = () => { foo: 1 };    // Calling func() returns undefined! 
// 上面这段代码的原意是要返回这个对象，但结果却返回一个undefined，这是因为没有指定返回值的原因，应该改成这样

var fn = ()=>({foo:1})

复制代码

箭头函数中的this

前面提到，箭头函数中是不绑定this的，而普通的函数（只能是函数）中的this是指代当前函数执行时的环境对象，既然如此，那么我们可以认为箭头函数中的this是指其外层函数的执行时的环境对象，如果不存在外层函数，那就一级一级往上递推，最终还是没有的话，那就指代window对象。 举几个例子：

//普通形式
let fn = function () {
    console.log(this);
}
fn() // window
// es6简写
let fn = () => {
    console.log(this)
}
fn() //window

//对象中的方法
const obj = {
    name: 'obj',
    that: this,
    fn1: function () {
        console.log(this);
    },
    fn2: () => console.log(this),
}
// obj.fn1(); //obj
// obj.fn2(); //window

function fn0() {
    return {
        fn1: function () {
            var obj = {
                a: function () {
                    console.log(this)
                },
                b: {
                    d: function () {
                        console.log(this);
                    },
                    c: () => console.log(this)
                }
            }
            return obj;
        }
    }
}
// fn0().fn1().b.c() //{fn1:fn}
复制代码

详见

转载于:https://juejin.im/post/5bf26a356fb9a049d441678d