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 指向生成的实例
 }, 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);
        }
    }
复制代码

简约不简单的 箭头函数，快在实际开发中用起来吧.

转载于:https://juejin.im/post/5d0448f46fb9a07ec27ba0f9