今天在查看頁面控制臺的時候，無意中看到了一個暴露到全局的變量 i，全局變量是不會被壓縮工具壓縮成簡寫的字母，這個被頻繁使用的變量名暴露到全局也是個相當(dāng)大的隱患，可能一個不小心就覆蓋了第二次暴露到全局的同名變量。

剛開始我就懷疑是自己出現(xiàn)了這樣愚蠢的錯誤：

function A() {// 在一個函數(shù)中多次用到了 for 循環(huán)，為了節(jié)省變量，都是用了變量 ifor(var i = 0; ...) {//... }for(i = 0; ...) {//... }for(i = 0; ...) {//... } }

結(jié)果在某次拆分函數(shù)的時候，忘記定義:

function A(){for(var i = 0; ...) {//... }for(i = 0; ...) {//... } } function B(){for(i = 0; ...) {//... } }

這個時候，變量 i 在 B 函數(shù)執(zhí)行的時候就暴露到了全局。抱著這樣的懷疑，我搜索了 50 多個模塊的代碼，一無所獲...此時，我依然十分懷疑是自己的程序哪里疏忽了，全局搜索 i = 和 i++，五分鐘過去了，未果...

找到這個變量

如果這個變量名叫做 fuckIE，分分鐘全局搜索就出來了，類似這種簡短的常用的變量，著實(shí)讓人頭疼了好一會兒。后來想到了這個方案：

Object.defineProperty(window, "i", {get : function(){ return window.i; },set : function(newValue){ debugger;window.i = newValue; },enumerable : true,configurable : true });

在全局定義變量 i 的時刻，打一個斷點(diǎn)，然后 F10 往前走一步，果然，在控制臺右側(cè)的 Call Stack 中找到了端倪！

這個變量是從第三方組件中（offline組件，使用相當(dāng)頻繁的一個組件）暴露出來的，估計(jì)出錯的方式同我上面的描述差不多，拆分函數(shù)的時候忘記重新定義變量 i。

當(dāng)然還有更快的方式：

window.__defineSetter__('i', function(){ debugger })

不挖坑才是最好的解決方案

1. 使用 use strict;

在嚴(yán)格模式下，這種問題暴露無遺，每個函數(shù)內(nèi)都加上 use strict;，雖然在語言上有所限制，但是低級錯誤一定不會出現(xiàn)，因?yàn)閲?yán)格模式會給你報錯！

2. 使用 jslint/jshint 等 js 分析工具

這些東西除了配置上較為繁瑣，用起來還是很順手的，做過配置的錯誤都會直接在 IDE 上標(biāo)紅顯示出來，很容易發(fā)現(xiàn)問題，但是不建議一個項(xiàng)目中途使用，因?yàn)榇a習(xí)慣的問題，很多地方被 js 分析工具作為錯誤拋出來，改動量是相當(dāng)大的。

我有次也犯了個比較隱晦的錯誤：

$(window).on('click', function(evt){var target = event.target.nodeName.toLowerCase();if(target !== 'ul'){//... } });

在 IE 和 Chrome 下，代碼跑得好好的，但是到了測試較少的 FF 下，問題出來了，event is not defined.，IE 和 Chrome 是支持 window.event 抓取當(dāng)前事件對象的，而 FF 不支持，所以每次點(diǎn)擊頁面上都會報錯。。。

諸如此類的問題，在我們的平時編碼之中不勝枚舉，所以有一個編碼規(guī)范作為強(qiáng)約束是十分有必要的！

?

總結(jié)

以上是生活随笔為你收集整理的如何快速定位不小心暴露到全局的变量的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。