javascript中箭头函数的作用

在ECMAscript 6 中，引入了 一种新的定义函数的方式 Arrow Function(箭头函数)

可以说，它的出现，" 简化 "了JS的匿名函数，

---

但是它并不等同于匿名函数，可以说，并不是为了简化代码而产生了这种写法，而是别有用心

---

原匿名函数语法：

function (x) {
    return x * 2;
}

相同的，箭头函数语法： 

• ES6中的箭头函数省略了function的书写，
• 如果参数为1个的话，则不需要加（），
• 如果其函数体复杂的话，需要加上｛｝

(x,y) => return x * y;

//or

(x,y) => {
   var c = 20;
   var res = x * y + c;
   return res;
};

箭头函数在应用中：

箭头函数看上去是匿名函数的一种简写，但实际上，箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

由于JavaScript函数对this绑定的错误处理，下面的例子无法得到预期结果：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = function () {
            return new Date().getFullYear() - this.birth; // this指向window或undefined
        };
        return fn();
    }
};

现在，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj：

var obj = {
    birth: 1990,
    getAge: function () {
        var b = this.birth; // 1990
        var fn = () => new Date().getFullYear() - this.birth; // this指向obj对象
        return fn();
    }
};
obj.getAge(); // 25

如果使用箭头函数，以前的那种hack写法：

var that = this;

就不需要了，

由于this在箭头函数中已经按照词法作用域绑定了，所以，用call()或者apply()调用箭头函数时，无法对this进行绑定，即传入的第一个参数被忽略：

var obj = {
    birth: 1990,
    getAge: function (year) {
        var b = this.birth; // 1990
        var fn = (y) => y - this.birth; // this.birth仍是1990
        return fn.call({birth:2000}, year);
    }
};
obj.getAge(2015); // 25

 

参考：廖雪峰的官方网站