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);}; 函式宣告轉化成函式表示式:加()、~