首页 > 编程笔记 > JavaScript笔记 阅读:9

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。

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

相关文章