React裏用到的ES6語法

1,箭頭函數

箭頭函數相當於匿名函數,簡化了函數的定義

格式:

單條語句(可以省略{}和return)

eg:x=>x*x //單個參數

  (x,y)=>x + y  //多個函數

   x => ({ foo:x}) //返回對象(在對象外面有個())

多條語句(不能省略{}和return)

this的指向:

不用箭頭函數,this指向window或者undefined

用箭頭函數,this指向詞法作用域,在下面的函數中詞法作用域就是obj對象

注意事項:

在ES6中,會默認採用嚴格模式,因此this也不會自動指向window對象了,而箭頭函數本身並沒有this,因此this就只能是undefined,這一點,在使用的時候,一定要慎重慎重再慎重,不然踩了坑你都不知道自己錯在哪!這種情況,如果你還想用this,就不要用使用箭頭函數的寫法。

改正:

參考ES6官網和https://blog.csdn.net/yangxiaodong88/article/details/80460332

 

2,類

寫法:

實例屬性除了在constructor方法裏面定義,也可以直接寫在類的最頂層。

//寫在最頂層
class IncreasingCounter {
  _count = 0;
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}
//寫在constructor方法裏
class IncreasingCounter {
  constructor() {
    this._count = 0;
  }
  get value() {
    console.log('Getting the current value!');
    return this._count;
  }
  increment() {
    this._count++;
  }
}

 

在類和模塊內部默認是嚴格模式

Constructor:構造方法,是類的默認方法,當定義了一個空的constructor時,

this代表實例對象

定義類的方法時,不需要加function這個關鍵字,直接講函數定義放進去,也不需要用逗號分隔。

生成的實例對象的寫法,使用new命令,

eg:var newPoint=new Point(1 , 2); //實例

newPoint.toString()  //( 1 , 2 )       

class表達式

上面代碼使用表達式定義了一個類,需要注意的是,這個類的名字MyClass而不是Me,Me只在Class的內部代碼可用。

立即執行class

this的指向:默認指向類的實例,單獨使用該方法時會報錯

Class的取值函數(getter)和存值函數(setter)

Class的靜態方法:static關鍵字(加上static關鍵字,表示該方法不會被繼承)

注意,如果靜態方法包含this關鍵字,這個this指的是類,而不是實例。

Class的繼承:用extends方法,當調用父類的方法是用super關鍵字
class ColorPoint extends Point {
  constructor(x, y, color) {
    super(x, y); // 調用父類的constructor(x, y)
    this.color = color;
  }

  toString() {
    return this.color + ' ' + super.toString(); // 調用父類的toString()
  }
}

 注意:如果子類中定義了constructor方法,就必須得調用super關鍵字,在子類的構造函數中,只有調用super之後,纔可以使用this關鍵字,否則會報錯;如果沒有顯式定義constructor方法,這個方法會默認添加

 

-----備註:未寫完,之前寫的額,先發出來,後面補

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章