箭头函数(Arrow Function) 是 ES6 中非常重要的特性, 它以极其简洁的形式去定义了一个函数, 但又拥有非常实用的特性, 形如 const Foo = () => { ... } , 简洁优雅实用, 是它最大的特点.
基本用法
// 常见的写法
const Foo = (firstName, familyName) => {
return `${firstName}-${familyName}`;
};
// 只有一个参数时, 可省略括号, => 后跟函数返回值
let Summary = (array) => {
return array.reduce((prev, next) => (prev + next), 0);
}
// 只有一个参数时可去掉括号, 返回值可省略 return { ... }
let Summary = array => array.reduce((prev, next) => (prev + next), 0);
// 定义为对象的方法
const dog = {
name: 'Husky',
run: () => {
console.log('running')
}
}
复制代码
重要特性
- 不绑定this
箭头函数不会创建自己的this,它只会从自己的作用域链的上一层继承this。
function iphone(){
this.name = 'iphone x';
setTimeout(() => {
this.name = 'ihone xs'; // this 指向生成的实例
console.log('this.name: ', this.name);
}, 1000);
}
let iphoneX = new iphone();
// 'iphone xs'
复制代码
function iphone(){
this.version = 11;
setTimeout(() => {
this.version += 1; // this 指向生成的实例
}, 1000);
}
let iphoneX = new iphone();
// error
复制代码
- 不能当作构造函数使用
const Dog = () => 'I am a dog!';
const dog = new Dog();
// VM823:1 Uncaught TypeError: Dog is not a constructor
at <anonymous>:1:12
复制代码
- 不拥有 arguments 对象
传统函数
function summary(a, b) {
console.log('arguments', arguments)
return a + b;
}
summary(1, 2);
// arguments Arguments(2) [1, 2, callee: ƒ, Symbol(Symbol.iterator): ƒ]
复制代码
箭头函数
const summaryArrow = (a, b) => {
console.log('arguments', arguments)
return a + b;
}
summaryArrow(1, 2);
// Uncaught ReferenceError: arguments is not defined
同理 arguments.calleer, arguments.callee 也不会存在
复制代码
- 便利性
// Mask 遮罩层组件
* 传统写法
class Mask extends PureComponen {
constructor(props) {
super(props);
this.state = {
showMask: false
}
this.toggleMaskShow = this.toggleMaskShow.bind(this)
}
// 切换遮罩层 显隐
toggleMaskShow() {
this.setState({ showMask: !this.state.showMask })
}
render() {
return <View style={styles.mask} />
}
}
class Mask extends PureComponen {
constructor(props) {
super(props);
this.state = {
showMask: false
}
}
// 切换遮罩层 显隐
toggleMaskShow = () => {
this.setState({ showMask: !this.state.showMask })
}
render() {
return <View style={styles.mask} />
}
}
使用 箭头函数 自动绑定到当前组件实例上 而不必再使用 bind 在 constructor 中再次绑定, 官方也推荐这么做
复制代码
loadArticleDetail = artileId => {
try {
let response = await fetch('...');
response = response.map(item => Object.assign(item, { selected: false
}));
// 使用箭头函数, 能节省大量代码, 并且让代码可读性更高
this.setState({ articleDetail: response });
} catch (e) {
Toast.info(e.message, 2);
}
}
复制代码
简约不简单的 箭头函数,快在实际开发中用起来吧.