React裡用到的ES6語法

2021-09-07 15:08:09 字數 2341 閱讀 5510

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

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

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

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

x => () //返回物件(在物件外面有個())

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

this的指向:

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

用箭頭函式,this指向詞法作用域,在下面的函式中詞法作用域就是obj物件

注意事項:

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

改正:

參考es6官網和

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

//寫在最頂層

class increasingcounter

increment()

}

//寫在constructor方法裡

在類和模組內部預設是嚴格模式

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 

tostring()

}

注意:如果子類中定義了

constructor

方法,就必須得呼叫

super

關鍵字,在子類的建構函式中,只有呼叫super之後,才可以使用this關鍵字,否則會報錯;如果沒有顯式定義

constructor

方法,這個方法會預設新增

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

React中的es6語法

在今年對 instagram web 進行全新的設計的時候,我喜歡在寫 react 元件的時候,用上一些 es6 的新特性。請允許我列舉這些能夠改變你寫 react 應用方式的新特性。比起以往,這些特性能夠使你擼起碼來更加容易 有趣!使用 es6 來編寫 react 元件最明顯的變化就是我們定義元件...

利用ES6語法重構React元件詳解

一 建立元件 es6 class建立的元件語法更加簡明,也更符合j ascript。內部的方法不需要使用function關鍵字。react.createclass import react from react const mycomponent react.createclass export d...

es6 基本語法

es6規定暫時性死區和let const語句不出現變數提公升,主要是為了減少執行時錯誤,防止在變數宣告前就使用這個變數,從而導致意料之外的行為。這樣的錯誤在 es5 是很常見的,現在有了這種規定,避免此類錯誤就很容易了。總之,暫時性死區的本質就是,只要一進入當前作用域,所要使用的變數就已經存在了,但...