1. 程式人生 > >js立即執行函式

js立即執行函式

 看過jQuery原始碼的人應該知道,jQuery開篇用的就是立即執行函式。立即執行函式常用於第三方庫,好處在於隔離作用域,任何一個第三方庫都會存在大量的變數和函式,為了避免變數汙染(命名衝突),開發者們想到的解決辦法就是使用立即執行函式。

1.什麼是立即執行函式(IIFE)

在瞭解立即執行函式之前先明確一下函式宣告、函式表示式及匿名函式的形式,如下圖:

接下來看立即執行函式的兩種常見形式:( function(){…} )()和( function (){…} () ),一個是一個匿名函式包裹在一個括號運算子中,後面再跟一個小括號,另一個是一個匿名函式後面跟一個小括號,然後整個包裹在一個括號運算子中,這兩種寫法是等價的。要想立即執行函式能做到立即執行,要注意兩點,一是函式體後面要有小括號(),二是函式體必須是函式表示式,而不能是函式宣告、匿名函式。先看下圖:

從圖中可以看出,除了使用()運算子之外,!,+,-,=,~等運算子都能起到立即執行的作用。這些運算子的作用就是將函式宣告、匿名函式,轉換為函式表示式。

2.使用立即執行函式的好處

通過定義一個匿名函式,建立了一個新的函式作用域,相當於建立了一個“私有”的名稱空間,該名稱空間的變數和方法,不會破壞汙染全域性的名稱空間。此時若是想訪問全域性物件,將全域性物件以引數形式傳進去即可,如jQuery程式碼結構:

其中window即是全域性物件。作用域隔離非常重要,是一個JS框架必須支援的功能,jQuery被應用在成千上萬的JavaScript程式中,必須確保jQuery建立的變數不能和匯入他的程式所使用的變數發生衝突。

(funtion(){})(); 一個立即執行的匿名函式自調,常在外掛中使用。立即執行函式:相當於先申明一個函式,宣告完後直接呼叫;用於存放開發外掛的程式碼,執行其中程式碼時DOM不一定存在,所以直接自動執行DOM操作的程式碼請小心使用。

(function(arg){...})(param); 一個形參為arg的匿名函式 function(arg){...},並且將param作為實參來呼叫這個匿名函式

(function($){...})(jQuery); 之所以只在形參使用$,是為了不與其他庫衝突,所以實參用jQuery;使用$引用jQuery。

等同於 var fn = function($){...}; fn(jQuery);

(function(root,factory){...})(this,function($){});

相關推薦

js立即執行函式: (function ( ){})( ) 與 (function ( ){}( )) 有什麼區別?

這篇文章主要介紹了js立即執行函式: (function ( ){})( ) 與 (function ( ){}( )) 有什麼區別,需要的朋友可以參考下 沒有區別。 你需要明白 IIFE 的原理,我簡單說一下: 複製程式碼 程式碼如下: function foo() {...} &

js 立即執行函式

立即執行函式 目錄 立即執行函式 作用 引數 返回值 立即執行函式 立即執行函式模式是一種語法,可以讓你的函式在定義後立即被執行。 立即執行函式的組成 定義一個函式 將整個函式包裹在一對括號中 將函式宣告轉換為表示式 在結尾加上一對括號 讓函式立即被執

深入理解JS立即執行函式

1.什麼是立即執行函式(IIFE) 在瞭解立即執行函式之前先明確一下函式宣告、函式表示式及匿名函式的形式,如下圖: 接下來看立即執行函式的兩種常見形式: ( function(){…} )()  和  ( function (){…} () ) ,一個是一個匿名函式包裹在一個括號運

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

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

JS-立即執行函式(function(){...})() && (function(){...})()

在學習閉包的過程中遇到了(立即執行),之前見到(function(){...})() && (function(){...}())這種寫法,就沒有去知其所以然,也不會去寫這種函式。所以一直害怕js,但還是要學習瞭解的,基本概念一定都要知道,才能自己造輪子,而不

js立即執行函式

 看過jQuery原始碼的人應該知道,jQuery開篇用的就是立即執行函式。立即執行函式常用於第三方庫,好處在於隔離作用域,任何一個第三方庫都會存在大量的變數和函式,為了避免變數汙染(命名衝突),開發者們想到的解決辦法就是使用立即執行函式。 1.什麼是立即執行函式(IIFE

js立即執行函式(function ( ){})( ) 與 (function ( ){}( )) 區別

結論:沒有區別。 下面說下立即執行函式表示式(IIFE)的原理: function foo(){...} //這是函式定義,直譯器遇到它的時候,不會執行; foo(); //這是語句,直譯器遇到語句會執行它。這種寫法是傳統寫法,定義和執行分開,也很好理解。那為什麼還要有

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

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

js---作用域鏈,立即執行函式,閉包

1.作用域鏈----函式 定義時會獲得 父級的作用域鏈的值放在自己的 [[Scopes]]屬性中, [[Scopes]]是系統自帶的隱式屬性,通過console.dir(函式名)   可以檢視這個函式的作用域鏈,即 [[Scopes]]。任何函式都至少會

js函式、作用域、作用域鏈、閉包、立即執行函式

1.函式 定義 1.函式宣告 ```java function test(){ 函式體 }; 2.函式表示式: - 命名函式表示式 - ```java var fn = function test(){}; (匿名)函式表示式 var fn = function(){};

js關於立即執行函式的一點記錄

( function(){…} )()和( function (){…} () )是兩種javascript立即執行函式的常見寫法,最初我以為是一個括號包裹匿名函式,再在後面加個括號呼叫函式,最後達到函式定義後立即執行的目的,後來發現加括號的原因並非如此。要理解立即執行函

關於JS立即執行函式的一處使用場景

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style&g

js中(function(){…})()立即執行函式寫法理解

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

js 中的立即執行函式

文章目錄 相信大家經常會遇到下面這兩種寫法: (function(){ ... })() 和 (function(){ ... }()) 關於這樣寫是什麼意思呢?有什麼區別呢? 在此之前,我們需要了解幾個概念: 函式宣告、函式表示式、匿名函式 函式宣告:

js函式宣告/函式表示式/匿名函式/箭頭函式/立即執行函式

   function add(a, b) { // ... } 1.顧名思義,宣告一個函式, 用關鍵字 “function” 來告訴,這是一個函式。 2.任何地方,想用就可以拿過來使用   函式表示式: var add = function (){

js立即執行函數應用--事件綁定

content tps mar set span lang function solid tcs js中立即執行函數的應用:應用到事件綁定上。 少說多做,直接運行代碼(代碼中有註釋): 1 <!DOCTYPE html> 2 <html lang="

js立即執行函數

立即執行 family 信息 query 告訴 代碼 命名 error 代碼塊 一、立即執行函數方式 js立即執行函數可以讓你的函數在創建後立即執行,可以讓你的函數在定義後立即被執行,這種模式本質上就是函數表達式(命名的或者匿名的),在創建後立即執行。 方式1、最前最後

重回js--立即執行函數

遙想當年 執行函數 display -- 公司 函數表達式 auto 技術 window   公司換了新領導,對調休請假控制很嚴格,就算沒工作也不能請假回家過年,我只申請了3天調休。為了不用大過年返程回來上班,年前要堅守到最後一天了。想到三十要在北京機場過夜,真是心塞塞。所

js立即執行函數用法

lac class UNC 本質 AS div 語法 工作 表達式 js立即執行函數可以讓你的函數在創建後立即執行,js立即執行函數模式是一種語法,可以讓你的函數在定義後立即被執行,這種模式本質上就是函數表達式(命名的或者匿名的),在創建後立即執行。 一、JS立即執行函數的

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

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