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

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

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

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

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

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

找到這個(gè)變量

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

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

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

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

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

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

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

1. 使用 use strict;

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

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

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

我有次也犯了個(gè)比較隱晦的錯(cuò)誤：

$(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)前事件對(duì)象的，而 FF 不支持，所以每次點(diǎn)擊頁面上都會(huì)報(bào)錯(cuò)。。。

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

?

總結(jié)

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

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