ECMASCRIPT 6 实战之 箭头函数

箭头函数(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 指向生成的实例

}

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);
    }
}