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
# | Oct 10 2018

JS Garden 筆記 – Object

JavaScript 本身就是一個奇怪的語言,比女人還難懂,常常內心在嘶喊 為什麼是這個結果 ?!
JavaScript Garden收集了 js 比較古怪部分寫成了 document , 讓大家可以避免踩雷.覺得非常值得看,我也另外看了 Tommy 大大影片導讀 看的時候激動萬分啊(自己最近對於這種 js 奇怪部分很有興趣 XD)
所以做一下筆記以免自己忘記.

O.S. 最容易出問題真的就是在型別還有不要亂用 js 內建關鍵字(if, delete, for 之類),不如趕快換 typescript 吧 XD


Object Usage and Properties

js 除了 nullundefined。其他都可以表現得像 obj (是“表現像 obj” 不是 “是 obj”)

但 2.toString() 會出現錯誤因為 js 以為 . 是小數點,解法是

undefined & null

undefined 在還未給值或是 function 沒有 return 都會回傳 undefined
null 是人為的不會是程式傳給你的

另外補充一個題外話

Accessing Properties

使用變數時盡量用 square bracket notation [] 不要用 dot notations . , 不然遇到數字會有 error

Deleting Properties

唯一刪掉 object property 只有 delete 這個語法, 你把值設成 undefined 或 null 只會改騙 value, key 還是會存在

 

The prototype

原型繼承是 js 的核心,跟其他語言 class 繼承不太一樣(我是只寫過 js 所以有點難比較 XD). 之前曾經寫過 prototype 文章,有興趣可以參考

Prototype 在 js 是一個很重要的核心,亂用可能會大大影響效能(找不到就會一直往上找直到原型鏈最上層).結論就是千萬不要試圖擴展 “built-in prototype”
 

hasOwnProperty

hasOwnProperty 是’唯一’單純找一個物件(不往上找)的方法

 

for in 迴圈

for in 某個 obj 會連上層都印出來,所以通常會加 hasOwnProperty 判斷,但用 es6 的 Object.keys(obj) 看起來已經不會有這個問題囉