介绍
学习箭头函数
# 箭头函数
- **箭头函数表达式 (opens new window)**的语法比函数表达式 (opens new window)更简洁,并且没有自己的
this
(opens new window),arguments
(opens new window),super
(opens new window)或new.target
(opens new window)。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。 - 箭头函数没有prototype (opens new window)属性。(构造函数的一个新对象。)
- 注意: 箭头函数不能用作构造器,和
new
一起用会抛出错误。所以不能用为构造函数
# 箭头函数的this
- 箭头函数不会创建自己的
this,它只会从自己的作用域链的上一层继承 this
传统的函数声明
function Person() {
// Person() 构造函数定义 `this`作为它自己的实例。
this.age = 0;
setInterval(function growUp() {
// 这里的this 不能正确地指向Person()实例 而指向的是自身这个函数的this
this.age++;
}, 1000);
}
const p = new Person(); // undefined
- 通常解决这种问题 可以通过将
this
值分配给封闭的变量,可以解决this
问题。
function Person() {
const that = this
that.age = 0;
setInterval(function growUp() {
// 回调引用的是that变量,其值是预期的对象。
that.age++;
}, 1000);
}
箭头函数声明
- 箭头函数不会创建自己的
this,它只会从自己的作用域链的上一层继承 this
。因此,在下面的代码中,传递给setInterval
的函数内的this
与封闭函数中的this
值相同:
function Person(){
this.age = 0;
setInterval(() => {
this.age++; // this 正确地指向Person实例
}, 1000);
}
const p = new Person();
# 箭头函数作为方法
- 箭头函数没有自己的this 继承的是对象的this 也就是对象实例
const obj = {
i: 10,
b: () => console.log(this.i, this),
c: function () {
console.log(this.i, this)
}
}
obj.b(); // 会报错 报错提示你没有找到i 这里的this指向的是自身
obj.c(); // 不会报错 因为这里的this指向的是obj
// 10 {i: 10, b: ƒ, c: ƒ}
# 箭头函数的简写
- 最有意思的是箭头函数的简写体
- 在一个简写体中,只需要一个表达式(不需要写
{}
包裹函数内部),并附加一个隐式的返回值 - 在块体中,必须使用明确的
return
语句。
- 在一个简写体中,只需要一个表达式(不需要写
const func = x => x * x;
// 简写函数(简写体) 省略 return 自动帮你返回函数内部执行结果
const func = (x, y) => { return x + y; };
//常规编写(块体) 明确的返回值 你得自己return内部执行结果
- 在Fetch (opens new window) 中使用简写体
Fetch
是Promise (opens new window)的封装 可以进行一些异步编程 使用方法和Promise
一样 并且支持链式操作
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => response.json()) // 把数据转换成JSON格式 利用简写体自动return
.then((json) => console.log(json)) // 那么这个json参数 就是上面处理后的JSON数据
- 那么Fetch (opens new window) 中使用块体
- 块体需要手动
return
- 块体需要手动
fetch('https://jsonplaceholder.typicode.com/posts/1')
.then((response) => {
return response.json() // 块体需要手动return
}) // 箭头函数
.then((json) => {
console.log(json)
})
# 箭头三元运算符
- 箭头函数也可以使用条件(三元)运算符
const simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10
# 空箭头函数返回
- 空的箭头函数返回
undefined
// 空的箭头函数返回 undefined
let empty = () => {};
// 立即执行函数表达式
const ret = (() => 'foobar')() // (这是一个立即执行函数表达式,可参阅 'IIFE'术语表)
console.log(ret) // foobar
# 更多示例
// 空的箭头函数返回 undefined
let empty = () => {};
(() => 'foobar')();
// Returns "foobar"
// (这是一个立即执行函数表达式,可参阅 'IIFE'术语表)
var simple = a => a > 15 ? 15 : a;
simple(16); // 15
simple(10); // 10
let max = (a, b) => a > b ? a : b;
// Easy array filtering, mapping, ...
var arr = [5, 6, 13, 0, 1, 18, 23];
var sum = arr.reduce((a, b) => a + b);
// 66
var even = arr.filter(v => v % 2 == 0);
// [6, 0, 18]
var double = arr.map(v => v * 2);
// [10, 12, 26, 0, 2, 36, 46]
// 更简明的 promise 链
promise.then(a => {
// ...
}).then(b => {
// ...
});
// 无参数箭头函数在视觉上容易分析
setTimeout( () => {
console.log('I happen sooner');
setTimeout( () => {
// deeper code
console.log('I happen later');
}, 1);
}, 1);