一個(gè)關(guān)于JS操作符in問題引發(fā)的探究
事情是這樣的:大家都知道“內(nèi)存泄露”這回事吧。它有幾個(gè)常見的場(chǎng)景:
- 閉包使用不當(dāng)引起內(nèi)存泄漏
- (未聲明的)全局變量
- 分離的DOM節(jié)點(diǎn)
- (隨意的)控制臺(tái)的打印
- 遺忘的定時(shí)器
- 循環(huán)引用
內(nèi)存泄漏需要重視,它是如此嚴(yán)重甚至?xí)?dǎo)致頁面卡頓,影響用戶體驗(yàn)!
其中第 3 點(diǎn)引起了我的注意 —— 我當(dāng)然清楚地知道它說的是比如:“假設(shè)你手動(dòng)移除了某個(gè)dom節(jié)點(diǎn),本應(yīng)釋放該dom節(jié)點(diǎn)所占用的內(nèi)存,但卻因?yàn)槭韬鰧?dǎo)致某處代碼仍對(duì)該被移除節(jié)點(diǎn)有引用,最終導(dǎo)致該節(jié)點(diǎn)所占內(nèi)存無法被釋放”的情況
<div id="root"> <div class="child">我是子元素</div> <button>移除</button> </div> <script> let btn = document.querySelector('button') let child = document.querySelector('.child') let root = document.querySelector('#root') btn.addEventListener('click', function() { root.removeChild(child) }) </script>
該代碼所做的操作就是點(diǎn)擊按鈕后移除.child的節(jié)點(diǎn),雖然點(diǎn)擊后,該節(jié)點(diǎn)確實(shí)從dom被移除了,但全局變量child仍對(duì)該節(jié)點(diǎn)有引用,所以導(dǎo)致該節(jié)點(diǎn)的內(nèi)存一直無法被釋放。
解決辦法:我們可以將對(duì).child節(jié)點(diǎn)的引用移動(dòng)到click事件的回調(diào)函數(shù)中,那么當(dāng)移除節(jié)點(diǎn)并退出回調(diào)函數(shù)的執(zhí)行上文后就會(huì)自動(dòng)清除對(duì)該節(jié)點(diǎn)的引用,自然也就不會(huì)存在內(nèi)存泄漏的情況了。(這實(shí)際上是在事件中實(shí)時(shí)檢測(cè)該節(jié)點(diǎn)是否存在,如果不存在則瀏覽器必不會(huì)觸發(fā)remove函數(shù)的執(zhí)行)
<div id="root"> <div class="child">我是子元素</div> <button>移除</button> </div> <script> let btn = document.querySelector('button') btn.addEventListener('click', function() { let child = document.querySelector('.child') let root = document.querySelector('#root') root.removeChild(child) }) </script>
這段代碼很完美么?不。因?yàn)樗诿看问录|發(fā)后都創(chuàng)建了對(duì)child和root節(jié)點(diǎn)的引用。消耗了內(nèi)存(你完全可以想象一些人會(huì)狂
點(diǎn)按鈕的情況…)。
其實(shí)還有一種辦法:我們?cè)赾lick中去判斷當(dāng)前root節(jié)點(diǎn)中是否還存在child子節(jié)點(diǎn),如果存在,則執(zhí)行remove函數(shù),否則什么也不做!
這就引發(fā)了標(biāo)題中所說的行為。
怎么判斷?
遍歷?不,太過麻煩!
不知怎的,我突然想到了 for...in
中的 in 操作符,它可以基于原型鏈遍歷對(duì)象!
我們來還原一下當(dāng)時(shí)的場(chǎng)景:打開GitHub,隨便找一個(gè)父節(jié)點(diǎn),并獲取它:
圖中畫紅框的就是我們要取的父元素,橘紅色框的就是要判斷是否存在的子元素。
let parent=document.querySelector('.position-relative'); let child=document.querySelector('.progress-pjax-loader');
這里注意,因?yàn)楂@取到的是DOM節(jié)點(diǎn)(類數(shù)組對(duì)象),所以我們?cè)诓僮髑耙欢ㄒ忍幚硪幌拢?/p>
let p_child=[...parent.children];
然后
console.log(child in p_child);
?。。?/p>
為什么呢?(此時(shí)筆者還沒有意識(shí)到事情的嚴(yán)重性)
我想,是不是哪里出了問題,用es6的includes API驗(yàn)證一下:
console.log(p_child.includes(child));
沒錯(cuò)?。?/p>
再用一般的數(shù)組驗(yàn)證一下:
???
此時(shí),筆者才想起到MDN上查閱一番:
進(jìn)而我發(fā)現(xiàn):in操作符單獨(dú)使用時(shí)它檢測(cè)的是左側(cè)的值(作為索引)對(duì)應(yīng)的值是否在右側(cè)的對(duì)象內(nèi)部(屬性 & 原型上)!
回到上面的代碼中,我們發(fā)現(xiàn):
這驗(yàn)證了我們的結(jié)論。
很顯然,“子元素”并不等同于“存在于原型鏈上” —— 這又引出了一個(gè)知識(shí)點(diǎn):attribute和property的區(qū)別!
所以經(jīng)過一番“折騰”,源代碼還是應(yīng)該直接這樣寫:
<div id="root"> <div class="child">我是子元素</div> <button>移除</button> </div> <script> let btn = document.querySelector('button') let child = document.querySelector('.child') let root = document.querySelector('#root') let r_child = [...root.children] btn.addEventListener('click', function() { if(r_child.includes(child)){ // 或者你這里直接判斷child是否為null也可以...吧 root.removeChild(child) } }) </script>
略顯倉(cāng)促的結(jié)尾
所以,看書學(xué)習(xí)有時(shí)候并不能“不求甚解”~
還要勇于“折騰”,學(xué)會(huì)“查文檔”[/滑稽臉].
總結(jié)
到此這篇關(guān)于一個(gè)關(guān)于JS操作符in問題的文章就介紹到這了,更多相關(guān)JS操作符in問題內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
KnockoutJS 3.X API 第四章之事件event綁定
event綁定即為事件綁定,即當(dāng)觸發(fā)相關(guān)DOM事件的時(shí)候回調(diào)函數(shù),這篇文章主要介紹了KnockoutJS 3.X API 第四章之事件event綁定的相關(guān)知識(shí),感興趣的朋友一起看看吧2016-10-10Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法
這篇文章主要介紹了Js為表單動(dòng)態(tài)添加節(jié)點(diǎn)內(nèi)容的方法,實(shí)例分析了js針對(duì)表單節(jié)點(diǎn)進(jìn)行添加操作的常用技巧,需要的朋友可以參考下2015-02-02實(shí)現(xiàn)圖片首尾平滑輪播(JS原生方法—節(jié)流)
下面小編就為大家?guī)硪黄獙?shí)現(xiàn)圖片首尾平滑輪播(JS原生方法—節(jié)流)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-10-10PNGHandler-借助JS讓PNG圖在IE下實(shí)現(xiàn)透明(包括背景圖)
PNGHandler-借助JS讓PNG圖在IE下實(shí)現(xiàn)透明(包括背景圖)...2007-08-08js使用visibilitychange處理頁面關(guān)閉事件
本文主要介紹了js使用visibilitychange處理頁面關(guān)閉事件,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06深入理解JavaScript系列(4) 立即調(diào)用的函數(shù)表達(dá)式
大家學(xué)JavaScript的時(shí)候,經(jīng)常遇到自執(zhí)行匿名函數(shù)的代碼,今天我們主要就來想想說一下自執(zhí)行2012-01-01javascript實(shí)現(xiàn)滾動(dòng)條效果
這篇文章主要為大家詳細(xì)介紹了javascript實(shí)現(xiàn)滾動(dòng)條效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-03-03