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