ES6中箭头函数的浅析

先看这个代码：

var obj = {
    name: 'ss',
    print: function () {
        return function () {
            console.log(this.name);
        }
    }
};
obj.print()();//显然没有结果，this作用域的问题,指向Window

这样就可以运行

var obj = {
    name: 'ss',
    print: function () {
        var self = this;
        return function () {
            console.log(self.name);
        }
    }
};
obj.print()();// 输出'ss'. 把obj的作用域 this 赋给self, self指向 obj.

如果这样写：

var obj = {
    name: 'ss',
    print: () => {
        return function () {
            console.log(this.name);
        }
    }
};
obj.print()();//这样也是然并卵，this 指向的是Window. 
//这里需要主意的是，虽然箭头函数在obj里面声明，但是箭头函数是没有this作用域的，所以最终还是指向Window.

如果这样写

var obj = {
    name: 'ss',
    print: function() {
        return () => {
            console.log(this.name);
        }
    }
};
obj.print()(); // 输出'ss'， 这次this 又指向了obj.

总结：=>本身是没有作用域的，其作用域随上层的 function, 而上层的function在obj里面声明，所以function的作用域在obj里面，随之箭头函数的作用域也在obj里面。

所以当你这样写的时候又不行了。

var obj = {
    name: 'ss',
    print: () => {
        return  () => {
            console.log(this.name);
        }
    }
};
obj.print()(); //没有输出，显然两个箭头函数的作用域一路指向Window.

根据这些例子你可以看出=>的作用。以前在函数嵌套的时候需要多些一个

var self = this;
self. fn = ...
self. variable = ...

也有人喜欢这么写

var _this = this;

所以你用箭头函数的话就可以避免多些这些语句。