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);
        }
    }
複製代碼

簡約不簡單的 箭頭函數，快在實際開發中用起來吧.