JavaScript杂谈(二)——箭头函数和匿名函数的区别

定义

普通带名函数

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

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

匿名函数

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

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

箭头函数

顾名思义，箭头函数的定义用的就是一个箭头。箭头函数表面上相当于匿名函数，并且简化了函数定义。

当箭头函数只包含一个表达式时，它连{ … }和return都省掉了。

x => x * x

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

function (x) {
    return x * x;
}

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

(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);
    }
};

---

区别

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

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

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