ES6入门教程笔记(7)-箭头函数
基本用法
ES6允许使用“箭头”（=>）定义函数。
// 箭头函数let f = () => 5;// ES5let f = function() {return 5;};
箭头函数用圆括号代表参数部分，如果代码部分多于一条语句，就用大括号括起来。
// 箭头函数let sum = (n1, n2) => { return n1 + n2; }// ES5let sum = function(n1, n2) {return n1 + n2;};
箭头函数使得表达更加简洁，另外一个用处是简化了回调函数。
// 箭头函数写法let result = values.sort((a, b) => a - b);// 正常函数写法let result = values.sort(function(a, b) {return a - b;});
使用注意
箭头函数有几个使用注意点。
- 函数体内的
this，指定义时所在的对象，而不是使用时所在的对象。 不可以当作构造函数，即不可以使用
new命令，否则会报错。function foo() {
setTimeout(() => {console.log('id: ', this.id);}, 100);
}
var id = 22;
foo.call({ id: 44});
// id: 44
上面代码中，箭头函数让this总是指向函数定义所在的对象，所以输出的是44。
箭头函数让this指向固定化，并不是因为内部绑定了this，实际原因是箭头函数根本没有自己的this，导致内部的this就是外层代码块的this。也正因为它没有this，所以不能用作构造函数。
所以，箭头函数转成ES5的代码如下。
// ES5function foo() {var _this = this;setTimeout(() => {console.log('id: ', _this.id);}, 100);}// id: 44
上面代码清楚地说明了，箭头函数没有自己的this，而是引用了外层的this。
不适用场合
箭头函数简化了回调函数，使得表达更加简洁。同时它使得this从“动态”变成“静态”，所以下面几个场合不适合使用箭头函数。
1 函数定义，且函数内部包括this。
const cat = {lives: 9,jumps: () => {this.lives--;}}
上面的箭头函数中，this指向全局对象，因此不会得到预期结果。
2 需要动态this的时候，不应使用箭头函数。
var button = document.getElementById('press');button.addEventListener('click', () => {this.classList.toggle('on');});
上面代码运行会报错，因为this指向全局对象。如果改成普通对象，this就会动态指向正确对象。
3 另外，如果函数体很复杂也不应使用箭头函数，而是使用普通函数，可以提高代码可读性。
注：本文原始内容来自 ES6标准入门，有修改。
本是古典 何须时尚
不念不忘少年蓝@
Bertha 。
港控/mmm°
￡神魔★判官ぃ
还没有评论，来说两句吧...