【js】箭头函数

廖雪峰的官方网站JavaScript学习笔记

一、基本形式

箭头函数相当于匿名函数，并且简化了函数定义。

x => x * x

相当于

function (x) {
    
    
    return x * x;
}

其他形式：

// 两个参数:
(x, y) => x * x + y * y

// 无参数:
() => 3.14

// 可变参数:
(x, y, ...rest) => {
    
    
    var i, sum = x + y;
    for (i=0; i<rest.length; i++) {
    
    
        sum += rest[i];
    }
    return sum;
}

如果要返回一个对象：

x => ({
    
     foo: x })

不能省略括号，因为和函数体的{ … }有语法冲突，像下面这样：

// SyntaxError:
x => {
    
     foo: x }

二、this

箭头函数和匿名函数有个明显的区别：箭头函数内部的this是词法作用域，由上下文确定。

1.js中的this定义

this是Javascript语言的一个关键字，它代表函数运行时，自动生成的一个内部对象，在每个 function 中自动根据作用域(scope) 确定, 指向的是此次调用者。

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

2.

箭头函数完全修复了this的指向，this总是指向词法作用域，也就是外层调用者obj。this指向在定义的时候继承自外层第一个普通函数的this。函数体内的this对象，就是定义时所在的对象，与使用时所在的对象无关。

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