首页 > 编程笔记 > JavaScript笔记
阅读:9
JavaScript箭头函数的用法(附带实例)
ES6 允许使用“箭头”(=>)定义函数。箭头函数属于函数表达式,语法格式如下:
因为箭头函数没有名字,通常的做法是把箭头函数赋值给一个变量,变量名就是函数名,然后通过变量名去调用函数。
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分:
箭头函数的函数体如果只有一个表达式,可以写成一行的简写体,省略 return,直接返回该表达式:
箭头函数如果只有一个参数,可以省略圆括号:
如果箭头函数的代码块部分多于一条语句,就要使用花括号将它们括起来,并且使用 return 语句返回:
由于花括号被解释为代码块,因此如果箭头函数要直接返回一个对象,就必须在对象外面加上圆括号,否则会报错:
使用箭头函数时,需注意 this 指向。对于普通函数来说,内部的 this 指向函数运行时所在的对象,但是这一点对箭头函数不成立。它没有自己的 this 对象,内部的 this 就是定义时上层作用域中的 this。也就是说,箭头函数内部的 this 指向是固定的,相比之下,普通函数的 this 指向是可变的。
如果是普通函数,执行时 this 应该指向全局对象 window,这时应该输出 21。但是,箭头函数导致 this 总是指向函数定义生效时所在的对象(本例是 {id: 42}),所以打印出来的是 42。
下面是 Babel 转箭头函数产生的 ES5 代码,能清楚地说明 this 的指向:
总结一下,使用箭头函数有以下几点注意事项:
() => {}箭头函数以圆括号开头,在圆括号中可以放置参数,圆括号的后面要跟着箭头(=>),箭头后面要写一个花括号来表示函数体,这是箭头函数的固定语法。
因为箭头函数没有名字,通常的做法是把箭头函数赋值给一个变量,变量名就是函数名,然后通过变量名去调用函数。
如果箭头函数不需要参数或需要多个参数,就使用一个圆括号代表参数部分:
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。
总结一下,使用箭头函数有以下几点注意事项:
- 箭头函数不可以当作构造函数,也就是说,不可以对箭头函数使用new命令,否则会抛出一个错误;
- 箭头函数不可以使用arguments对象,该对象在函数体内不存在;
- 如果函数体很复杂,有许多行,或者函数内部有大量的读写操作,不单纯是为了计算值,这时也不应该使用箭头函数,而要使用普通函数,这样可以提高代码可读性。