快捷導(dǎo)航

Javascript中的函數(shù)聲明與函數(shù)表達(dá)式(奇技淫巧)

更新時(shí)間：2011年03月06日 22:13:14 作者：

Javascript有很多有趣的用法，在Google Code Search里能找到不少,今天從火丁筆記看到的，非常不錯(cuò)，推薦大家看下。

舉一個(gè)例子：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

試一下就知道這段代碼的意思就是聲明一個(gè)函數(shù)，然后立刻執(zhí)行，因?yàn)镴avascript中的變量作用域是基于函數(shù)的，所以這樣可以避免變量污染，但這里的位運(yùn)算符“~”乍一看讓人摸不到頭腦，如果去掉它再運(yùn)行則會(huì)報(bào)錯(cuò)：SyntaxError。

在闡述為什么之前，讓我們先來(lái)明確Javascript中的兩個(gè)概念：函數(shù)聲明和函數(shù)表達(dá)式：

先來(lái)看看什么樣的是函數(shù)聲明：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

再來(lái)看看什么樣的是函數(shù)表達(dá)式：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

現(xiàn)在回頭看看文章開(kāi)頭的問(wèn)題，為什么去掉位操作符“~”后運(yùn)行會(huì)報(bào)錯(cuò)，這是因?yàn)閺恼Z(yǔ)法解析的角度看，Javascript不允許在函數(shù)聲明的后面直接使用小括號(hào)，而函數(shù)表達(dá)式則沒(méi)有這個(gè)限制，通過(guò)在函數(shù)聲明前面加上一個(gè)“~”操作符，就可以讓語(yǔ)法解析器把后面看成是函數(shù)表達(dá)式，同樣的，在函數(shù)聲明前面加上“!，+，-”等操作符也是可行的。

那我們?yōu)槭裁床皇褂孟旅孢@種函數(shù)表達(dá)式的方式呢？

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

雖然從語(yǔ)法解析的角度看沒(méi)有問(wèn)題，但是上面的代碼存在弊端，它引入了一個(gè)變量，可能會(huì)污染現(xiàn)有的運(yùn)行環(huán)境，帶來(lái)潛在的問(wèn)題。

使用位操作符“~”的方法多少顯得有點(diǎn)奇技淫巧，其實(shí)把函數(shù)聲明用小括號(hào)套起來(lái)更易讀：

[Ctrl+A 全選注:引入外部Js需再刷新一下頁(yè)面才能執(zhí)行]

弄明白了原理，不管遇到什么寫(xiě)法，都不會(huì)再丈二和尚摸不著頭腦了。

您可能感興趣的文章:

相關(guān)文章

JavaScript前后端數(shù)據(jù)交互工具ajax使用教程
Ajax（Asynchronous?Javascript?And?XML），即是異步的JavaScript和XML，Ajax其實(shí)就是瀏覽器與服務(wù)器之間的一種異步通信方式
2022-10-10
整理的比較全的event對(duì)像在ie與firefox瀏覽器中的區(qū)別
event對(duì)像在IE與FF中的區(qū)別，本文整理了很多，個(gè)人感覺(jué)還是比較全面的，需要的朋友可以收藏下
2013-11-11
js實(shí)現(xiàn)簡(jiǎn)單的前端分頁(yè)效果
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)簡(jiǎn)單的前端分頁(yè)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-08-08
微信小程序自定義導(dǎo)航教程（兼容各種手機(jī)）
這篇文章主要給大家介紹了關(guān)于微信小程序自定義導(dǎo)航的相關(guān)內(nèi)容，文中通過(guò)示例代碼介紹的非常詳細(xì)，兼容各種手機(jī),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2018-12-12
詳解JavaScript中扁平與樹(shù)形數(shù)據(jù)的轉(zhuǎn)換
這篇文章主要為大家想介紹了JavaScript中實(shí)現(xiàn)扁平與樹(shù)形數(shù)據(jù)相互轉(zhuǎn)換的方法，文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)JavaScript有一定的幫助，需要的可以參考一下
2023-01-01
小程序?qū)崿F(xiàn)五星點(diǎn)評(píng)效果
這篇文章主要為大家詳細(xì)介紹了小程序?qū)崿F(xiàn)五星點(diǎn)評(píng)效果，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2018-11-11
前端使用URL API實(shí)現(xiàn)高效的URL解析
在現(xiàn)代Web開(kāi)發(fā)中,URL是前端和后端交互的核心載體,本文將深入探討如何利用URL API實(shí)現(xiàn)URL的解析,構(gòu)建和操作,希望對(duì)大家有一定的幫助
2025-04-04
深入理解jQuery()方法的構(gòu)建原理
對(duì)于JQuery，想必大家都很熟悉。目前，很多web項(xiàng)目，在實(shí)施的過(guò)程中，考慮到各瀏覽器原生JS API的兼容性，大都會(huì)選用JQuery或類(lèi)似于JQuery這樣的框架來(lái)進(jìn)行網(wǎng)頁(yè)效果開(kāi)發(fā)。這篇文章將給大家深入介紹jQuery()方法的構(gòu)建原理，有需要的朋友們可以參考借鑒。
2016-12-12
基于RequireJS和JQuery的模塊化編程日常問(wèn)題解析
本文是小編日常收集整理些有關(guān)RequireJS和JQuery的模塊化編程，感興趣的朋友一起學(xué)習(xí)吧
2016-04-04
使用mixins實(shí)現(xiàn)elementUI表單全局驗(yàn)證的解決方法
這篇文章主要介紹了使用mixins實(shí)現(xiàn)elementUI表單的全局驗(yàn)證的解決方法,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2019-04-04