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 对象，就是定义时所在的对象，与使用时所在的对象无关。