JavaScript：匿名函数与箭头函数的区别

前言

在复习过程中，我发现匿名函数和箭头函数非常相似，那么他们到底有什么区别呢？

定义

1.普通带名函数

function abs(x){
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

像上述函数，在定义函数时function后会给函数命名如abs，那么在调用时直接以abs(-3)来调用即可。

2.匿名函数

let abs=function(x){ 
    if(x>=0){
        return x;
    }else{
        return -x;
    }
}

上述函数中，function后并没有给函数命名，而是把整个函数直接赋值给变量abs，调用时通过abs(9)来调用此函数。

3.箭头函数

顾名思义，箭头函数的定义用的就是一个箭头。箭头函数表面上相当于匿名函数，并且简化了函数定义。
3.1 当箭头函数只包含一个表达式时，它连{ … }和return都省掉了。

x => x * x

上面的箭头函数相当于一个匿名函数

function (x) {
    return x * x;
}

3.2 当箭头函数不仅包含一个表达式时：

(x,y) => {
    if (x > 0) {
        return x + y;
    }
    else {
        return -x + y;
    }
}

举例

var obj1 = {
    birth: 1990,
    getAge: function (year) {   
        let fn=function(y){
            return y - this.birth; // this指向window或undefined
        };  
        return fn(year); 
    }
};

var obj2 = {
    birth: 1990,
    getAge: function (year) {
        var fn = (y) => y - this.birth; // this.birth为1990
        return fn(year);
    }
};

调用函数obj1.getAge(2017)和调用obj2.getAge(2017)会得到相同的结果吗？

obj1中fn函数，由于JavaScript中函数对this绑定的错误处理，得不到预期的结果，this.birth指向window或undefined。

但是obj2，fn函数是箭头函数，箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj2。

区别

1.箭头函数没有prototype(原型)，所以箭头函数本身没有this。

let a = () => {};
console.log(a.prototype); // undefined

2.箭头函数内部的this是词法作用域，由上下文确定，this指向在定义的时候继承自外层第一个普通函数的this。函数体内的this对象，就是定义时所在的对象，与使用时所在的对象无关。