1. 程式人生 > >js中函式宣告與函式表示式以及匿名函式的理解

js中函式宣告與函式表示式以及匿名函式的理解

在JS的學習中遇到一些JS函式宣告的問題,找了一些資料學習之後,有了自己的一些初步的認識。

首先,瞭解函式宣告,函式宣告:就是使用關鍵字function,與指定的某個欄位組成函式,作為函式宣告。例如:

function funName(){

//

}

這就是簡單的函式函式聲明瞭。

接下來就是函式表示式,函式表示式:將關鍵字function宣告的函式,但不指定欄位作為函式名,形成匿名函式,賦值給某個變數。例如:

var funName=function(){

}


這就是函式表示式了。匿名函式賦值給變數成為函式表示式,該過程會建立函式。同樣匿名函式同樣可以作為賦值給某個監聽的事件,成為事件處理程式,建立閉包。這是比較官方的說法。當然,將匿名函式作為引數時

,往往可以起到不錯的效果,舉個例子就是,例如:

function funName( p1,p2,callback){

    if(p1>p2){

         callback(p1-p2);

     }

}


funName(10,8,function(e){

//獲取到返回值

console.log(e);  // 值為2

});


在JS解析中:函式宣告會提升。即在預解析的時候,函式宣告不但會被宣告,同時也會定義。

這就是為什麼我們呼叫function宣告一個函式的時候,function funName(){

}

無論是在函式宣告之前還是在函式宣告之後,都可以有效的執行這個函式。

但是在函式表示式的中,不會這樣。

var funName =function(){

}


在JS預解析的時候,只會預解析等號左邊 var 宣告的變數,不會定義右邊的函式。當我們在

funName(“hello world”); //報錯

var    funName =function(e){

alert(e);

}

funName("你好!!!"); //這裡不會報錯.


最後,還有一個立即函式

( function(){

…

} )()

( function (){

…

} () )


是兩種javascript立即執行函式的常見寫法。

這兩種立即執行函式的寫法,最初我以為是一個括號包裹匿名函式,並後面加個括號立即呼叫函式,當時不知道為什麼要加括號,後來明白,要在函式體後面加括號就能立即呼叫,則這個函式必須是函式表示式,不能是函式宣告。

(function(){})(); 是 把函式當作表示式解析,然後執行解析後的函式相當於var a = function(){}; a(); a得到的是函式。

(function(){}()); 是把函式表示式和執行當作語句直接執行、相當於 var a = function(){}(); a得到的是結果。

最終結果是一樣的。()只是起了 自執行的作用,和 () 一樣的還有很多

例如:

(function(a){

  console.log(a);  //firebug輸出123,使用()運算子

})(123);


(function(a){

  console.log(a);  //firebug輸出1234,使用()運算子

}(1234));


!function(a){

  console.log(a);  //firebug輸出12345,使用!運算子

}(12345);


+function(a){

  console.log(a);  //firebug輸出123456,使用+運算子

}(123456);


-function(a){

  console.log(a);  //firebug輸出1234567,使用-運算子

}(1234567);


varfn=function(a){

  console.log(a);  //firebug輸出12345678,使用=運算子

}(12345678)


可以看到輸出結果,在function前面加!、+、 -甚至是逗號等到都可以起到函式定義後立即執行的效果,而()、!、+、-、=等運算子,都將函式宣告轉換成函式表示式,消除了javascript引擎識別函式表示式和函式宣告的歧義,告訴javascript引擎這是一個函式表示式,不是函式宣告,可以在後面加括號,並立即執行函式的程式碼。

加括號是最安全的做法,因為!、+、-等運算子還會和函式的返回值進行運算,有時造成不必要的麻煩。

不過這樣的寫法有什麼用呢?

javascript中沒用私有作用域的概念,如果在多人開發的專案上,你在全域性或區域性作用域中聲明瞭一些變數,可能會被其他人不小心用同名的變數給覆蓋掉,根據javascript函式作用域鏈的特性,可以使用這種技術可以模仿一個私有作用域,用匿名函式作為一個“容器”,“容器”內部可以訪問外部的變數,而外部環境不能訪問“容器”內部的變數,所以( function(){…} )()內部定義的變數不會和外部的變數發生衝突,俗稱“匿名包裹器”或“名稱空間”。

JQuery使用的就是這種方法,將JQuery程式碼包裹在

( function (window,undefined){…jquery程式碼…} (window)


中,在全域性作用域中呼叫JQuery程式碼時,可以達到保護JQuery內部變數的作用。

相關推薦

js函式宣告函式表示式以及匿名函式理解

在JS的學習中遇到一些JS函式宣告的問題,找了一些資料學習之後,有了自己的一些初步的認識。 首先,瞭解函式宣告,函式宣告:就是使用關鍵字function,與指定的某個欄位組成函式,作為函式宣告。例如: function funName(){ // }這就是簡單的函式函式聲明瞭。 接下來就是函式表示式,函

js變數宣告變數提前

js中變數宣告與變數提前 變數宣告:通過var表明變數的型別與名字,但並未賦值,如 var a; 變數初始化:即為a賦值,如 a=1; 使用變數步驟:a.宣告–>b.賦值–>3.呼叫 使用方法 // 方式一:宣告和賦值不分離 var str = "宣告和賦

JS函式宣告函式表示式的不同

Js中的函式宣告是指下面的形式:       function functionName(){ }  這樣的方式來宣告一個函式,而函式表示式則是類似表示式那樣來宣告一個函式,如:        var functionName = function(){ }  可能很多

JS函式宣告函式表示式的區別

函式宣告與函式表示式的區別 前面我們已經說了兩種定義函式的方式:函式宣告與函式表示式。那麼這兩種方式有區別嗎,還是一樣的呢?下面我們來進一步探討探討。 下面我們定義了兩個函式分別為 hello 和 hi,前者採用函式宣告,後者採用函式表示式,然後再呼叫,如下: func

JS-函式宣告函式表示式的區別

定義: 1 函式宣告:function foo(){} 2 函式表示式: var bar=function foo(){} 區別: 1 函式宣告會在任何表示式被解析和求值之前先行被解析和求值。即使宣告位於原始碼中的最後一行,它也會先

函式宣告函式表示式以及立即執行函式的討論

函式宣告的定義:function fn(){……},使用function關鍵字宣告一個函式,再指定一個函式名,叫函式宣告。 函式表示式:var fn=function(){……},使用function關鍵字宣告一個函式,但未給函式命名,最後將匿名函式賦予一個變數,叫函式表示

JavaScript函式宣告函式表示式區別

眾所周知,JavaScript中宣告函式可以用函式宣告形式,也可以用函式表示式形式。本文介紹一下兩者區別。 函式宣告: alert(sum(10,10)); function sum(num1,num2){ return num1 +num2; } 以上程式碼

簡析JavaScript的Function型別(二)——函式宣告函式表示式的區別

開發十年,就只剩下這套架構體系了! >>>   

理解JS變數宣告提升和函式宣告提升

(一)變數宣告提升: 1.變數定義 ES6之前可以使用var關鍵字來定義一個變數;若變數未初始化,則變數的值為undefined 2.變數作用域 根據變數作用域可以分為全域性變數和區域性變數;全域性變數的作用域為全部作用域;區域性變數作用域為函式內; 在函式作用域內

JavaScript函式宣告函式表示式的區別

函式宣告與函式表示式的區別 函式宣告與函式表示式定義函式看似相同,實際上在解析器向執行環境中載入資料時,解析器會率先讀取函式宣告,並使其在執行任何程式碼之前可用(可以訪問);至於函式表示式,則必須等到解析器執行到他所在的程式碼行,才會真正被解釋執行。 換句話說,就是通過函式宣告定義的

python的輸入輸出,以及強制型別轉換函式

我們用得一直是輸出函式:“print” 現在我們來自己輸入一些東西,也就是讓計算機知道從使用者那裡取得資訊的命令輸入“input”   eg1:取得輸入 username = input("請輸入你的姓名:") #獲得你輸入你字元 print(username)

匿名具名函式函式宣告函式表示式、立即執行函式(已完結)

匿名與具名函式 這屬於常識性問題,但是還是有必要說說 沒有函式名的函式就叫匿名函式,有函式名的函式就叫具名函式 setInterval(function(){//匿名函式 ... },1000); va

js變數名函式名重名的問題

網上有很多的部落格有談到這個重名的問題,但是我覺得將不算是很全面,至少我看了還是不懂下面這道題到底是怎麼回事。那在講解這個問題的時候,我們先來看看下面這道題,一道面試題(南山西麗xx研究院): var a = 1; function b(){ a = 10;

[ javascript ] javascript 函式宣告函式表示式的區別

還是一樣,先上程式碼: <script> var f = function g() { return 1; }; if (false) { f = function g(){ return 2;

javascript 函式宣告函式表示式的區別

還是一樣,先上程式碼: <script> var f = function g() { return 1; }; if (false) { f = function g(){ return 2;

函式宣告函式表示式

從一個傻x問題開始……畫地為牢一下午,還是第二天才發現問題所在。下面把問題掛出來,大家引以為戒。 初學JavaScript的寶寶額,寫了一段想繞死我自己的程式,不要覺得怎麼這麼搞笑額 [ 翻白眼 ] (function(){ function fn(){ do

js函式宣告賦值詳解

直接宣告函式 a(); function a(){ alert('...'); } //函式的宣告會優先讀取,無論函式的執行語句放在宣告前面還是後面都會正常執行 表示式方法定義函式

函式宣告的幾種方式,函式宣告函式表示式的區別,函式呼叫的幾種方式

函式宣告的幾種方式 三種 : 函式宣告(1),函式表示式(2~5),Function構造器(6) 1.function func1(a){}//函式宣告 2.var func2=function(b){}//函式表示式 3.var func3=function func4(

Javascript 函式宣告函式表示式匿名函式的寫法

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

函式宣告函式表示式基礎介紹

函式宣告: function a(){ alert(1); } 函式表示式: 匿名:var a=function(){alert(1);}; 命名:var a=function fn(){alert(1);}; 函式宣告轉化成函式表示式:加()、~