1. 程式人生 > >(四)JavaScript 立即執行的函式表示式(IIFE)

(四)JavaScript 立即執行的函式表示式(IIFE)

在 Javascript 中,圓括號()是一種運算子,跟在函式名之後,表示呼叫該函式。()是函式的執行符號。比如,test()就表示執行test函式。
我們需要在定義函式之後,立即執行該函式。這時,你不能在函式的定義之後加上圓括號,這會產生語法錯誤。

function(){ /* code */ }();
// SyntaxError: Unexpected token (

產生這個錯誤的原因是,function這個關鍵字即可以當作宣告語句,也可以當作表示式。

函式宣告:function fnName(){ /* code */ }
函式表示式:var fnName = function() { /* code */ }

只有表示式才能夠被執行。

為了避免解析上的歧義,JavaScript 引擎規定,如果function關鍵字出現在行首,一律解釋成宣告語句。因此,JavaScript引擎看到行首是function關鍵字之後,認為這一段都是函式的定義,不應該以圓括號結尾,所以就報錯了。

解決方法就是不要讓function出現在行首,讓引擎將其理解成一個表示式。最簡單的處理,就是將其放在一個圓括號裡面。

官方寫法:
(function (){}()); (W3C建議寫法)
(function (){})();

最後的分號都是必須的。如果省略分號,遇到連著兩個 IIFE,可能就會報錯。

推而廣之,任何讓直譯器以表示式來處理函式定義的方法,都能產生同樣的效果,比如下面寫法。

var i = function(){ /* code */ }();

!function () { /* code */ }();

~function () { /* code */ }();

-function () { /* code */ }();

+function () { /* code */ }();

通常情況下,只對匿名函式使用這種立即執行的函式表示式,因為執行過後即釋放該函式的引用,如下

function a(){ }
!function b(){ }();

console.log(a); //function a(){ }
console.log(b); //報錯:b is not defined

立即執行的函式表示式目的有兩個:
一 是不必為函式命名,避免了汙染全域性變數;
二 是 IIFE 內部形成了一個單獨的作用域,可以封裝一些外部無法讀取的私有變數。

相關推薦

JS-立即執行函式表示式IIFE

javascript函式呼叫 在javascript中,每一個函式在被呼叫的時候都會建立一個執行上下文,在該函式內部定義的變數和函式只能在該函式內部被使用,而正是因為這個上下文,使得我們在呼叫函式的時候能建立一些私有變數。 先聲明後呼叫 // 宣告: var foo = function(){

JavaScript 立即執行函式表示式IIFE

在 Javascript 中,圓括號()是一種運算子,跟在函式名之後,表示呼叫該函式。()是函式的執行符號。比如,test()就表示執行test函式。 我們需要在定義函式之後,立即執行該函式。這時,你不能在函式的定義之後加上圓括號,這會產生語法錯誤。 funct

javascript立即執行函式函式宣告和函式表示式

javascript和其他程式語言相比比較隨意,所以javascript程式碼中充滿各種奇葩的寫法,有時霧裡看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。( function(){…} )()和( function (){…} () )

js 立即執行函式表示式 問題

js 語言有許多黑科技。一般像想象中的這樣的程式碼 function(para){ .... }(realPara) 定義函式的同時再進行呼叫,在瀏覽器中會報錯。常見的變為立即執行函式的方法是加’適當的括號‘,如 (function(va

javascript中奇怪的執行結果立即執行函式

在下面的例子中,將IIFE賦值給一個變數message。message返回另外一個函式,該函式只是簡單地輸出變數x的值。有趣的事情是,當我們把變數x的初始值作為引數傳入函式時,可以在函式執行時所建立的閉包中捕獲變數x的值。無論在外部作用域中x的值發生了什麼變化,閉包將記住函式執行時變數x的值

深入理解JavaScript系列2:揭祕命名函式表示式 命名函式表示式 函式表示式 函式宣告

還有一種函式表示式不太常見,就是被括號括住的(function foo(){}),他是表示式的原因是因為括號 ()是一個分組操作符,它的內部只能包含表示式,我們來看幾個例子: 函式宣告只能出現在程式或函式體內。 如果function foo(){}是作為賦值表示式的一部分的

函式宣告、函式表示式立即執行函式、你不知道的javascript

#你不知道的javascript上卷(2)# 1、函式宣告、函式表示式 // 例子一 函式宣告 function foo () { var a = 3 console.log(a) // 3 } foo () // 例子二 函式表示式 (function foo () {

深入理解JavaScript系列2:揭祕命名函式表示式

還有一種函式表示式不太常見,就是被括號括住的(function foo(){}),他是表示式的原因是因為括號 ()是一個分組操作符,它的內部只能包含表示式,我們來看幾個例子: 函式宣告只能出現在程式或函式體內。 如果function foo(

JavaScript Function,建立函式物件new Function(),字串當代碼來執行

demo.html:<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>

JavaScript RegExp正則表示式

轉義符號 \(反斜槓) \n(字串換行) \\(字串\) \?(字串?) 建立正則表示式 1、語法/pattern/attributes 引數 pattern 是一個字串,指定了正則表示式的模式。 引數 attributes 是一個可選的字串,包含屬性 “i”、

echarts動態繫結地圖資料使用立即執行函式或者變數賦值都可以,唯一要求賦值的是物件,而不是字串

@{    Layout = null;}<html lang="en"><head>    <meta charset="utf-8">    <title>ECharts</title></head&g

IIFE立即執行函數表達式

fin div 開頭 空格 賦值 error ted def clas 我們經常會看到這樣的寫法: ;(fuction () { // do something })() 這就是一個簡單的IIFE(立即執行函數表達式,immediately-invoked func

【譯】節選--揭祕命名函式表示式Named function expressions

作者:Juriy "kangax" Zaytsev 原文連結:kangax.github.io/nfe/ 簡介 令人驚訝的是,在網上,關於命名函式表示式的討論似乎並不多。這可能因為有很多誤解在流傳。在本文中,我會試著從理論和實踐兩個方面總結這些精彩的Javascript構念,包括其中好的

javascript中的立即執行函式(function(){…})()

javascript和其他程式語言相比比較隨意,所以javascript程式碼中充滿各種奇葩的寫法,有時霧裡看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( function(){…} )()和( function (){…} () )是兩種javasc

JavaScript立即執行函式例項詳解 轉載 作者:李牧羊

javascript和其他程式語言相比比較隨意,所以javascript程式碼中充滿各種奇葩的寫法,有時霧裡看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。這篇文章主要給大家介紹了關於JavaScript中立即執行函式的相關資料,需要的朋友可以參考下。 前言

JavaScript中的閉包與立即執行函式

本文是前端學習筆記的第四篇,對應的是渡一教育的web前端開發JavaScript精英課js的第十三到十五課時,感覺難度還可以,閉包其實非常類似Java中的方法內部類,對比一下就很好理解了,主要就是記的知識點多,可能會忘 目錄 閉包 立即執行函式   閉包 &

JavaScript學習筆記——函式立即執行函式、作用域、預編譯—day two

目錄 函式 定義 組成形式 遞迴 立即執行函式 作用域 變數作用域 函式作用域[[scope]] 作用域鏈 預編譯 JS執行分三步: 預編譯執行分五步: 函式 原則:高內聚弱耦合(重複) 定義    

《Oracle PL/SQL開發指南》學習筆記31——原始碼除錯——函式和過程部分,物件表函式,result_cache子句

  建立一個物件表函式有三個步驟: 1. 定義記錄結構為物件型別 2. 定義集合 3. 定義一個函式來展示如何從PL/SQL上下文向SQL上下文返回集合   1. 建立基本的SQL使用者自定義型別(UDT) 注意:發現竟然不能使用distinct關

深入理解javascript中的立即執行函式(function(){…})()

javascript和其他程式語言相比比較隨意,所以javascript程式碼中充滿各種奇葩的寫法,有時霧裡看花,當然,能理解各型各色的寫法也是對javascript語言特性更進一步的深入理解。 ( function(){…} )()和( function (){…}

函式宣告、函式表示式、匿名函式立即執行函式

自學js程式設計,對很多概念不是很明晰,從書本上看不到細微之處的奧妙,唯有在實戰中摔了跟頭才能認真掰扯,細細辨別。 今天看專案上的js原始碼時遇到了一堆“立即執行函式”,使我搞不清楚js的執行順序,在網上查詢相關資料時找到一篇比較好的文章,在這裡稍作編輯,作為