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 17 2018

JS Garden 筆記 – Function

既上一篇 Object, 這一篇要來筆記 js garden 的 Function, 當然一樣有看 Tommy 大大的影片導讀, Function 單元有很多觀念像 Scope, Closure 之前都寫過,但能重新複習一次也很不錯. 這篇筆記自己比較不熟的地方.


Hoisting

Hoisting 之前曾提過,var, let, const, function, function*, class 這些都會被 hoisting

有些人會認為let與const不會被提升,實際上是會的。因為它們被定義有一段時間是無法存取的,這是在被宣告與進入作用域之間時,這段時間稱為Temporal Dead Zone(TDZ, 時間死區),所以不同於var或function,存取let或const提升的變數/常數會產生錯誤ReferenceError,而不是undefined。
ES6篇 – let與const

以上程式碼實際上會先被 hoisting 在執行

另外要特別提的是,我知道 js 有兩種 scope, global 跟 function, es5 只要不是在 function 裡的都是 global scope (就算是 if for 裡的也可以被外面讀到) 當然也會有 function 被 hoisting 狀況發生,但當 es6 出現, 只要是 braces { } 裡的就是 block scope.

你會發現以上 code 在每一個瀏覽器結果都不太一樣,是因為 browser 支援 es 版本不同,ie11 特別奇怪因為他是 “部分” 支援 es6 而已
 

Function

function 在 js 裡是 first-class object, first-class 意思是他跟別人一樣(就像一等公民), 其中一件事就是可以被存進變數裡,最常見的像這樣

Named Function Expression

bar 只能在自己 scope 裡面被抓,在外面是抓不到的,因為已經指定給變數 foo 了
 

How this works

js “this” 是有名的變化莫測阿,this 取決于執行這個 function 時的環境, 這邊整理了幾種同意狀況下 this 卻會不同

Common Pitfalls

為了解決這個方法有下列三種建議的

 

Closures

Closures 是 js 一個非常重要的特色, 也是成為 senior 必備知識. Closure and Module Pattern 曾經提過 closures

A closure is the combination of a function and the lexical environment within which that function was declared.
Closure 包含了一個函式,以及宣告函式所包含的環境 – MDN

通常在 function 裡定義的變數離開 function 就讀不到了,但 closure 可以抓這些外部變數並與存活, 以下是簡單的 closure

Counter returns 2 closures, increment & get (都抓了外部變數 count 並使之繼續存活)

運用 closue 要小心記憶體問題,所以可以 g = undefined 回收掉.

Closures Inside Loops

最容易誤解的例子

因為在 setTimeout 裡只有 ”一個“ reference 到 i, 當執行 console 時 loop 已經跑完, i 也被指定為 10 所以會跑 10 次 10. 為了解決這件事需要每次執行就要創造一個 copy 來儲存 i

 

Scopes and Namespaces

變數沒有 var 那就會是 Global 的

上面兩個含義完全不同,不使用 var 會導致隱性的全域變數。

結論就是記得要 var ! 不然會很難 debug
以下是比較推薦的撰寫習慣,有興趣也可以看我之前寫的 module pattern