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

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

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

結果在某次拆分函數的時候，忘記定義:

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

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

找到這個變量

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

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

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

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

當然還有更快的方式：

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

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

1. 使用 use strict;

在嚴格模式下，這種問題暴露無遺，每個函數內都加上 use strict;，雖然在語言上有所限制，但是低級錯誤一定不會出現，因為嚴格模式會給你報錯！

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

這些東西除了配置上較為繁瑣，用起來還是很順手的，做過配置的錯誤都會直接在 IDE 上標紅顯示出來，很容易發現問題，但是不建議一個項目中途使用，因為代碼習慣的問題，很多地方被 js 分析工具作為錯誤拋出來，改動量是相當大的。

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

$(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 抓取當前事件對象的，而 FF 不支持，所以每次點擊頁面上都會報錯。。。

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

?

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。