首页 > 编程笔记 > JavaScript笔记 阅读：25

JavaScript箭头函数的用法（附带实例）

ES6 允许使用“箭头”（=>）定义函数。箭头函数属于函数表达式，语法格式如下： 
() => {}
箭头函数以圆括号开头，在圆括号中可以放置参数，圆括号的后面要跟着箭头（=>），箭头后面要写一个花括号来表示函数体，这是箭头函数的固定语法。

因为箭头函数没有名字，通常的做法是把箭头函数赋值给一个变量，变量名就是函数名，然后通过变量名去调用函数。

如果箭头函数不需要参数或需要多个参数，就使用一个圆括号代表参数部分： 
var f = function () { return 5 };
// 等同于
var f = () => { return 5 };
var sum = function(num1, num2) {
    return num1 + num2;
};
// 等同于
var sum = (num1, num2) => { return num1 + num2; }

箭头函数的函数体如果只有一个表达式，可以写成一行的简写体，省略 return，直接返回该表达式： 
var f = () => 5;
// 等同于
var f = () => { return 5 };
var sum = (num1, num2) => num1 + num2;
// 等同于
var sum = (num1, num2) => { return num1 + num2; }

箭头函数如果只有一个参数，可以省略圆括号： 
var f = a => a+1;
// 等同于
var f = function (a) {
    return a+1;
};

如果箭头函数的代码块部分多于一条语句，就要使用花括号将它们括起来，并且使用 return 语句返回： 
var sum = (num1, num2) => {
    num1 ++;
    return num1 + num2;
}

由于花括号被解释为代码块，因此如果箭头函数要直接返回一个对象，就必须在对象外面加上圆括号，否则会报错： 
// 报错
let getTempItem = id => { id: id, name: "Temp" };

// 不报错
let getTempItem = id => ({ id: id, name: "Temp" });

箭头函数应用实例

判断是否为偶数和计算平方值： 
<script>
const isEven = n => n % 2 === 0;  // 判断是否为偶数
console.log(isEven(4)); // true
const square = n => n * n;  // 计算平方值
console.log(square(4)); // 16
</script>
箭头函数使得表达更加简洁。程序中只用了两行代码就定义了两个简单的工具函数。如果不用箭头函数，可能就要占用多行，而且还不如现在这样醒目。

使用箭头函数时，需注意 this 指向。对于普通函数来说，内部的 this 指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的 this 对象，内部的 this 就是定义时上层作用域中的 this。也就是说，箭头函数内部的 this 指向是固定的，相比之下，普通函数的 this 指向是可变的。 
function foo() {
    setTimeout(() => {
        console.log('id:', this.id);
    }, 100);
}

var id = 21;
foo.call({ id: 42 }); // id: 42
在上面代码中，setTimeout() 的参数是一个箭头函数，这个箭头函数的定义生效是在 foo() 函数生成时，而它的真正执行要等到 100 毫秒后。

如果是普通函数，执行时 this 应该指向全局对象 window，这时应该输出 21。但是，箭头函数导致 this 总是指向函数定义生效时所在的对象（本例是 {id: 42}），所以打印出来的是 42。

下面是 Babel 转箭头函数产生的 ES5 代码，能清楚地说明 this 的指向： 
// ES6
function foo() {
    setTimeout(() => {
        console.log('id:', this.id);
    }, 100);
}

// ES5
function foo() {
    var that = this;
    setTimeout(function () {
        console.log('id:', that.id);
    }, 100);
}
转换后的 ES5 代码清楚地说明了箭头函数里面根本没有自己的 this，而是引用外层的 this。

总结一下，使用箭头函数有以下几点注意事项：

相关文章