Nice to Meet You

I’m Hannah, a Taiwanese 30 years old front end developer.
Learning and sharing always makes me happy, and I am interested in the new things including coding and design.

Skills

  • HTML, RWD
  • JS, ES6, AngularJs, VueJs, jQuery
  • CSS, SASS, SMACSS/MVCSS
  • PHP, Wordpress
  • Git, Gulp, webpack

Experience

  • 8+ years of working experience as a web developer, now is in afusion
  • Sass / css lecturer for prototype-hacker
  • Host a conference at FEDC
Contact me
# | May 24 2018

[ES6] Class

es6_class
Es6 class 骨子裡還是 OO (Object-Oriented JavaScript) ,以 prototype-based 為基礎 (甚麼是 oo ? ),把它當作改良版 prototype 就很容易理解了


Class

es5 年代個人覺得 prototype-base 蠻好用的,我先寫一個範例

用 class 改寫其實非常相似

用 class 時,屬性都只能寫在 constructor {} 裡,這要特別注意
 

Getters & Setters

當你想要的值是動態的就應該要寫在 Getter & Setter 裡。 Getter 不會有傳入參數,Setter 只會有一個傳入參數

Getters

Getters 比較單純,當你想要取一個動態值可以用 Getters

Setters

一個 Setters 幾乎都會搭配一個 Getters,不然會是 undefined

舉一個實用一點的例子,假如你想要統一電話的格式,不管使用者輸入甚麼。可以這樣寫

 

Extend 繼承

再說說繼承,es5 年代其實有點小麻煩 還要 Object.create 之類
es6 簡單多了 直接看範例

參考資料

ES6篇 – Class(類別)