~~~ v; // v打印出為undefined var v = 1; // 如果沒有這行定義，上面一行會報錯 Uncaught ReferenceError: v is not defined(…) ~~~ 這是為什么呢？ 定義在下面應該還沒有生效啊，怎么感覺就像是提前定義了一樣呢。 實際上js在解釋執行代碼時，代碼就相當于被轉換成這樣了： ~~~ var v; // 只是申明了，所以下面v會打印出undefined v; var v = 1; ~~~ 這就是申明提前，在函數中也是如此。 ~~~ function foo() { console.log(a); var a = 1; console.log(a); } foo(); // 先打印出undefined后打印出1 ~~~ 其實受“申明提前”的作用，這段代碼相當于： ~~~ function foo() { var a; console.log(a); var a = 1; console.log(a); } foo(); ~~~ >[info] 注意：在語句中申明提前會將聲明提前到語句的最上面，在函數中申明會被你提前到函數的最頂部。 明白了吧。 * * * * * ### 由申明提前引發的BUG ```javascript // 全局的變量 viewport = document.querySelector("meta[name=viewport]"); console.log(viewport) // meta Element function scale () { console.log(viewport); // 意外吧，竟然是undefined if (viewport == null) { var viewport = metaEl = document.createElement('meta'); } else { viewport.content = str; } // 后面要用viewport，所以才想著即使沒有viewport也要定義，哪成想到申明提前這么厲害啊 console.log(viewport.content); } ``` 奇怪了吧，viewport在全局環境中可以打印出來，在函數中就打印未定義了，按道理說，函數中應該能找到全局的變量啊。 其實都是提前申明惹的禍。 這里詭異奇葩的是，根本沒執行到這兒來的地方，也會被拿出來提前申明，無語了吧。 所以問題找到了，優化代碼邏輯，不要這么寫就能避免這個坑了。 ```javascript // 全局的變量 viewport = document.querySelector("meta[name=viewport]"); console.log(viewport) // meta Element function scale () { console.log(viewport); // undefined if (viewport == null) { var metaEl = document.createElement('meta'); } else { viewport.content = str; } // 既然所有變量都會申明提前，那么即使沒執行到metaEl定義部分也不會出錯 var _viewport = viewport || metaEl; console.log(_viewport.content); } ``` * * * * * last update：2018-7-21 05:51:42