var self=this, 箭头函数与传统方法对比

var self=this

在es6中, 箭头函数将this与词法作用域联系起来了, 所以它的作用并不只是减少代码量

1. 语法

如果你的函数没有参数

var f = () => 3.14;

// 等同于
var f = function() {
    return 3.14;
};

如果你的函数有一个参数

var f = v => v*v;

// 等同于
var f = function (v) {
    return v*v;
};

如果你的函数有多个参数

var f = (num1, num2) => num1 + num2;

// 等同于
var f = function (num1, num2) {
    return num1 + num2;
};

如果你的函数体有多条语句, 就要用大括号括起来

var f = (num1, num2) => {
    let sum = num1 + num2
    return sum;
}

// 等同于
var f = function (num1, num2) {
    let sum = num1 + num2
    return sum;
};

var self = this

原理是什么呢
self 是一个可以通过词法作用域和闭包进行引用的标识符, 不关心this绑定过程中发生了什么

var obj = {
    id: 'zmj',
    foo: function() {
        var self = this
        setTimeout(function () {
            console.log(self.id);
        }, 100)
    }
}

var id = 'lx'
obj.foo() // zmj

箭头函数

var obj = {
    id: 'zmj',
    foo: function() {
        setTimeout(() => {
            console.log(this.id);
        }, 100)
    }
}

var id = 'lx'
obj.foo() // zmj

箭头函数自身是没有this的, 它所拥有的this是从父级作用域里拿过来的

也就是说等同于 var self = this的做法

箭头函数要实现类似纯函数的效果，必须剔除外部状态。所以当你定义一个箭头函数，在普通函数里常见的this、arguments、caller是统统没有的。

什么时候该使用箭头函数

参考资料：

你不知道的JavaScript(上卷)

ECMAScript 6入门

var self = this？

箭头函数中的this? 你可能想多了

少年，不要滥用箭头函数啊