從function的定義看JavaScript的預加載
在JavaScript中定義一個函數，有兩種寫法：
| 1 2 |
function ftn(){} // 第一種
var ftn = function(){} // 第二種
|
有人說，這兩種寫法是完全等價的。但是在解析前，前一種寫法會被解析器自動提升到代碼的頭部，因此違背了函數先定義後使用的原則，所以建議定義函數時候，全部采用後一種寫法。
看完這句話，我第一個感覺是兩個在使用時候是完全一致的，只是解析上有所差異。但是他的解釋“前一種寫法會被解析器自動提升到代碼的頭部”讓我很困惑。
如是我有了下面第一個測試：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript">
function ftn()
{
alert(‘old‘);
}
var b = ftn;
function ftn()
{
b();
alert(‘new‘);
}
ftn();//瀏覽器報內存溢出
</script>
|
接下來我做了第二個測試：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript">
var ftn = function()
{
alert(‘old‘);
}
var b = ftn;
var ftn = function()
{
b();
alert(‘new‘);
}
ftn();//old,new依次彈出
</script>
|
網上的對這個解釋是：第一種方式，剛開始其實沒有重新定義ftn這個Function而在裏面執行了其本身。第二種方式，ftn=function()這裏沒有執行到Function裏面的代碼ftn已經被重新定義了，所以這裏的重定義是有效的。
如果不怎麽清楚，那麽我再做了一個下面的測試：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript">
function ftn()
{
alert(‘old‘);
}
var b = ftn;
function ftn()
{
b();
alert(‘new‘);
}
alert(b);//結果是重新定義的ftn內容
</script>
|
測試結果發現，重新定義ftn後，b的內容也會隨著改變。下面我又做了兩外一個測試：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script type="text/javascript">
var ftn = function()
{
alert(‘old‘);
}
var b = ftn;
var ftn = function()
{
b();
alert(‘new‘);
}
alert(b);//結果是老的ftn內容
</script>
|
這樣就很有意思了，在JavaScript裏面除了基本數據類型，其他類型都是對象，對象是存在堆裏面，它的別名是存在棧裏面的地址，後一種測試很明顯可以用這樣的原理來理解。那麽前面的測試為什麽b會隨著ftn的重新定義而改變了？
我有一種新解釋，不知道對不對，在所有的講JavaScript書裏都會提到，JavaScript裏面是沒有方法重載的，後面定義的重名function會覆蓋前面的function，var b = ftn;這句話是把b和ftn的引用指向同一個堆裏面的內存，而重新定義function ftn(){}後，新的function對象覆蓋了老的對象，而b和ftn引用的堆地址空間沒變，如果真是這樣，那麽這種寫法就合理了：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<script type="text/javascript">
function ftn()
{
alert(‘old‘);
}
var b = ftn;
var ftn = function()
{
b();
alert(‘new‘);
}
alert(b);//老的ftn
alert(ftn);//新的ftn
ftn();//old ,new
</script>
|
這樣新的ftn在棧裏面的地址改變了，指向了新的function對象的定義，而原來的function沒有被覆蓋，還保存，所以b還是老的ftn引用的地址。
剛剛寫了一篇對JavaScript裏面function理解的文章，回頭再思考下我這邊文章的內容，覺得自己通過測試的結果的理解還是有點問題，其實理解還是要從編譯，運行的原理進行思考。JavaScript都是在執行代碼時候才編譯代碼，因此我們var定義的類型可以不定，我們封裝的對象還時候添加屬性和方法，因此可以這麽理解我標題所帶來的問題，javascript一般的語言，例如定義一個變量var obj = new Object()只是做了一個很初的處理，在JavaScript裏面叫做預編譯，這種預編譯的能力很弱，弱到你可以隨便更改，而不會影響程序的運行，當對象被調用時候，JavaScript解釋器才會進行編譯，然後運行代碼，這和java很不一樣，java是先把代碼編譯好，調用他的時候才運行，這就是腳本語言的特點，所以腳本語言大多不快。但是當你這麽定義函數：fonction ftn(){},這種就把代碼進行了編譯，也就是執行過了，這種寫法和java函數的定義很相似了。這是我的新解，我覺得這個解釋更加合理些。
JavaScript的“編譯”只是檢查有沒有代碼錯誤，不會運行代碼，你可以試試在function裏面隨便寫東西測試一下。預加載，先是function，再是var。上面的代碼中，只有demo1和demo3受到影響，demo1和demo3的源代碼順序function - var - function，應用預加載後的順序：function - function - var，預加載後的完整代碼：
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript">
//demo1
function ftn()
{
alert(‘old‘);
}
function ftn()
{
b();
alert(‘new‘);
}
var b = ftn;
ftn();//瀏覽器報內存溢出
</script>
|
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<script type="text/javascript">
//demo3
function ftn()
{
alert(‘old‘);
}
function ftn()
{
b();
alert(‘new‘);
}
var b = ftn;
alert(b);//結果是重新定義的ftn內容
</script>
|
預加載大概就這麽樣了。
從function的定義看JavaScript的預加載