JS觀念分享
var,const,let
var 為ES6之前JS定義變數的語法
let 跟const 為ES6之後出現的
ES6 為 ES5.1 之後的語言標準,如果不懂 ES6 出現的新東西,我最後一頁會放連結,
我覺得他教的滿深的,練完可以對 JS 有滿大的幫助,那我們就還是先專注於這三個的差別。
var 是以 function 為一個 scope ,那 scope 作用域你可以把他想成是一個生命週期,
let 跟 const 是以一個 block 一個大括弧為一個 scope ,
你看左邊的a會報錯,因為a出不去這個 function scope ,但是b就可以讀到了,因為他是以 function 為基準,if 都攔不住他,
那右邊 function 跟 if 都出不去喔,你去log都會顯示 is not defined 就可以避免不小心汙染全域的問題。
for迴圈如果用 var 也會出現出了迴圈外 還是能用記數用的變數的問題
let 就沒這問題了 他在for裡面也是一個block
然後const 在設定時要給初值
如果重新給值的話 就會報error 適合用在圓周率之類幾乎不會變動的值
Hoisting 提升
接下來我們講提升,一開始你沒宣告A,然後去呼叫他,就會報錯, 顯示 not defined
但是我們先呼叫,再宣告a=10,就會變成undefined,不會報錯,但也不會是10
這就是提升,他會把a給拉到前面去宣告
那各位再猜一下,這個a會顯示多少
答案是10吼,因為他會把var a 給拉上去兩次 然後才a=10
那function 一樣是有拉升的,然後function的拉升優先度會高於var,不會被變數蓋過去
然後我們為什麼要有提升呢,這是為了讓你可以先呼叫function再去宣告,不用每次都要把function拉到最上方
然後就是我們可以達成function的互相呼叫,比如說A叫B B又叫A之類的
沒有提升就無法做到這些。
這只是個觀念,可以聽一下有個大概,因為我們平常就有在應用了。
Closure 閉包
接下來,我們來講閉包
照理講變數的生命週期在function結束之後就會被GC 釋放記憶體
你看這個count,在counter結束之後,應該會被釋放,每次重新進來都會重新宣告為0
但是閉包的特性,就可以讓他鎖住這個變數,不讓他被清掉
我們就宣告兩個變數等於這個function
然後你看我們每次呼叫,都會被++,而不是重新變0然後++
這就是閉包厲害的地方
都變成各自私有的變數了
再來講一下閉包的優缺點喔
第一點是不會汙染全域變數
第二點是能夠模擬private變數的功能,達到封裝私有屬性跟私有方法,超讚的
第三點就是能讓變數保存內存 不會被釋放
所以缺點就是閉包如果過度使用的話
瀏覽器就會占用很多的內存吼 要小心
Prototype 原型
最後就是講prototype原型
你可以把他想像成JS版的class
假設我們用new的方式 new 兩個function出來 分別為dogA跟dogB
那假設我們只改a的屬性 b就不會跟著動 不能夠共享屬性跟方法 那變成要用好幾遍 無法做到繼承
再來使用prototype寫法再寫一次
我們把species 抽出來當prototype
那前面都還是正常發揮
那當我們改動prototype的時候
Dog不管A或B就會跟著變 做到繼承的目的