Javascript中的函數(shù)聲明與函數(shù)表達式(奇技淫巧)
更新時間：2011年03月06日 22:13:14 作者：
Javascript有很多有趣的用法，在Google Code Search里能找到不少,今天從火丁筆記看到的，非常不錯，推薦大家看下。
舉一個例子：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
試一下就知道這段代碼的意思就是聲明一個函數(shù)，然后立刻執(zhí)行，因為Javascript中的變量作用域是基于函數(shù)的，所以這樣可以避免變量污染，但這里的位運算符“~”乍一看讓人摸不到頭腦，如果去掉它再運行則會報錯：SyntaxError。
在闡述為什么之前，讓我們先來明確Javascript中的兩個概念：函數(shù)聲明和函數(shù)表達式：
先來看看什么樣的是函數(shù)聲明：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
再來看看什么樣的是函數(shù)表達式：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
現(xiàn)在回頭看看文章開頭的問題，為什么去掉位操作符“~”后運行會報錯，這是因為從語法解析的角度看，Javascript不允許在函數(shù)聲明的后面直接使用小括號，而函數(shù)表達式則沒有這個限制，通過在函數(shù)聲明前面加上一個“~”操作符，就可以讓語法解析器把后面看成是函數(shù)表達式，同樣的，在函數(shù)聲明前面加上“!，+，-”等操作符也是可行的。
那我們?yōu)槭裁床皇褂孟旅孢@種函數(shù)表達式的方式呢？
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
雖然從語法解析的角度看沒有問題，但是上面的代碼存在弊端，它引入了一個變量，可能會污染現(xiàn)有的運行環(huán)境，帶來潛在的問題。
使用位操作符“~”的方法多少顯得有點奇技淫巧，其實把函數(shù)聲明用小括號套起來更易讀：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
弄明白了原理，不管遇到什么寫法，都不會再丈二和尚摸不著頭腦了。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
試一下就知道這段代碼的意思就是聲明一個函數(shù)，然后立刻執(zhí)行，因為Javascript中的變量作用域是基于函數(shù)的，所以這樣可以避免變量污染，但這里的位運算符“~”乍一看讓人摸不到頭腦，如果去掉它再運行則會報錯：SyntaxError。
在闡述為什么之前，讓我們先來明確Javascript中的兩個概念：函數(shù)聲明和函數(shù)表達式：
先來看看什么樣的是函數(shù)聲明：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
再來看看什么樣的是函數(shù)表達式：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
現(xiàn)在回頭看看文章開頭的問題，為什么去掉位操作符“~”后運行會報錯，這是因為從語法解析的角度看，Javascript不允許在函數(shù)聲明的后面直接使用小括號，而函數(shù)表達式則沒有這個限制，通過在函數(shù)聲明前面加上一個“~”操作符，就可以讓語法解析器把后面看成是函數(shù)表達式，同樣的，在函數(shù)聲明前面加上“!，+，-”等操作符也是可行的。
那我們?yōu)槭裁床皇褂孟旅孢@種函數(shù)表達式的方式呢？
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
雖然從語法解析的角度看沒有問題，但是上面的代碼存在弊端，它引入了一個變量，可能會污染現(xiàn)有的運行環(huán)境，帶來潛在的問題。
使用位操作符“~”的方法多少顯得有點奇技淫巧，其實把函數(shù)聲明用小括號套起來更易讀：
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
弄明白了原理，不管遇到什么寫法，都不會再丈二和尚摸不著頭腦了。
您可能感興趣的文章:
- JavaScript中函數(shù)聲明與函數(shù)表達式的區(qū)別詳解
- 淺談javascript 函數(shù)表達式和函數(shù)聲明的區(qū)別
- JavaScript中函數(shù)表達式和函數(shù)聲明及函數(shù)聲明與函數(shù)表達式的不同
- 詳解JavaScript中的函數(shù)聲明和函數(shù)表達式
- js中函數(shù)聲明與函數(shù)表達式
- JavaScript中的函數(shù)聲明和函數(shù)表達式區(qū)別淺析
- 淺析javascript中函數(shù)聲明和函數(shù)表達式的區(qū)別
- javascript函數(shù)聲明和函數(shù)表達式區(qū)別分析
- Javascript學習筆記之 函數(shù)篇（一） : 函數(shù)聲明和函數(shù)表達式
- javascript 函數(shù)聲明與函數(shù)表達式的區(qū)別介紹
- 理解 javascript 中的函數(shù)表達式與函數(shù)聲明
相關(guān)文章
JavaScript前后端數(shù)據(jù)交互工具ajax使用教程
Ajax（Asynchronous?Javascript?And?XML），即是異步的JavaScript和XML，Ajax其實就是瀏覽器與服務器之間的一種異步通信方式2022-10-10
整理的比較全的event對像在ie與firefox瀏覽器中的區(qū)別
event對像在IE與FF中的區(qū)別，本文整理了很多，個人感覺還是比較全面的，需要的朋友可以收藏下2013-11-11
這篇文章主要為大家詳細介紹了js實現(xiàn)簡單的前端分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-08-08
這篇文章主要給大家介紹了關(guān)于微信小程序自定義導航的相關(guān)內(nèi)容，文中通過示例代碼介紹的非常詳細，兼容各種手機,對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2018-12-12
詳解JavaScript中扁平與樹形數(shù)據(jù)的轉(zhuǎn)換
這篇文章主要為大家想介紹了JavaScript中實現(xiàn)扁平與樹形數(shù)據(jù)相互轉(zhuǎn)換的方法，文中的示例代碼講解詳細，對我們學習JavaScript有一定的幫助，需要的可以參考一下2023-01-01
這篇文章主要為大家詳細介紹了小程序?qū)崿F(xiàn)五星點評效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-11-11
在現(xiàn)代Web開發(fā)中,URL是前端和后端交互的核心載體,本文將深入探討如何利用URL API實現(xiàn)URL的解析,構(gòu)建和操作,希望對大家有一定的幫助2025-04-04
對于JQuery，想必大家都很熟悉。目前，很多web項目，在實施的過程中，考慮到各瀏覽器原生JS API的兼容性，大都會選用JQuery或類似于JQuery這樣的框架來進行網(wǎng)頁效果開發(fā)。這篇文章將給大家深入介紹jQuery()方法的構(gòu)建原理，有需要的朋友們可以參考借鑒。2016-12-12
基于RequireJS和JQuery的模塊化編程日常問題解析
本文是小編日常收集整理些有關(guān)RequireJS和JQuery的模塊化編程，感興趣的朋友一起學習吧2016-04-04
使用mixins實現(xiàn)elementUI表單全局驗證的解決方法
這篇文章主要介紹了使用mixins實現(xiàn)elementUI表單的全局驗證的解決方法,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2019-04-04