簡單理解js閉包、型別引用....第一章

Link-X發表於2018-04-21

js 閉包函式、型別引用、this指向、物件原型鏈...這些東西讓我們對js又愛又恨!js虐我千百遍,我待js如初戀。
很多初學者一開始會覺得這些概念沒什麼用,導致對這些東西產生一種抵抗力。接下來我們用幾段簡單實用的程式碼來理解一下這些概念。好啦大話不多說,讓我們一起來看看乾貨

js函式閉包

截流

這是一段簡單的函式節流,看著四不四有點方,彆著急讓我們一起來簡單段分析一下這以小段程式碼。

首先定義來一個叫 throttle函式 它接收了3個引數。

首先第一個引數它是這段程式碼中唯一一個幹實事的,也就是最終我們要執行的功能,

第二個很簡單它是定時器的延遲時間

第三個節流函式指定的執行時間,也就最終執行的時候我們需要等待多久執行一次的時間

然後往下看重點來了,函式內定義了 一個 timerID和一個 startTime 兩個變數,一個是定時器id,一個是函式執行的開始時間。這個時候讓我們思考一下,如果我們需要比較程式碼在執行中的時候和程式碼執行開始的時間它們相差了多少秒?我們應該如何去比較?

如果函式每次都被執行一遍,那麼函式執行開始的時間和函式當前執行中的時間將幾乎沒有差別。

這個時候我們的閉包起作用了,在throttle函式內部我們返回了一個函式,這個函式它引用了一個throttle函式裡的變數,通過這個引用讓js垃圾回收機制發現了 這個變數被引用,並且這個引用的函式繫結在了window的resize事件中,於是在throttle函式執行完回收銷燬的時候垃圾回收機制會把被引用的變數保留下來.

這樣每次resize的時候都會比較一次剛剛開始的時間和現在相差了多少秒,兩個值相減得到結果超過了指定時間,func就再次被執行了,並且把這個執行中的時間給startTime一直迴圈,天荒地老~~!

好像說的有點繞!不管你懂不懂,反正我說完了 哈哈哈,開玩笑的, 這是深入理解js第一篇閉包函式,接下來我將尋找更加有趣的方式陸續編寫js 型別引用,原型鏈,this指向這些讓我們感到疑惑的東西。

順便給大家推薦一個方法
window.requestAnimationFrame 改方法比截流效能更好,詳情自行百度

相關文章