通過(guò)javascript的匿名函數(shù)來(lái)分析幾段簡(jiǎn)單有趣的代碼
更新時(shí)間:2010年06月29日 01:19:19 作者:
想起自己很久以前學(xué)習(xí)javascript的經(jīng)歷,也曾經(jīng)碰到過(guò)幾個(gè)由匿名函數(shù)造成的困擾(其中一個(gè)就是由閉包引起的),下面就整理幾段簡(jiǎn)單代碼討論一下,讓我們大家一起進(jìn)步。
1、簡(jiǎn)單形式的封裝調(diào)用
var userName = function() { return "jeff wong" } ();
alert(userName);
上面的代碼確實(shí)簡(jiǎn)單,我們可以逐步分解成下面的寫(xiě)法:
var anonymousFunc = function() { return "jeff wong" }; //匿名函數(shù)
var name = anonymousFunc(); //執(zhí)行該函數(shù) 返回人名
alert(name);
2、new 一下Function的形式(大寫(xiě)Function)
var a = new Object();
var b = new Function();
//alert(typeof (a)); //object
//alert(typeof (b)); //function
alert(a); //[object Object]
alert(b); //匿名函數(shù)
//alert(a == b); //false
//alert(a === b); //false
正如你所看到的那樣,我們new一個(gè)Object,變量a彈出的是[object Object],而new一個(gè)Function(注意,是大寫(xiě)Function),b在彈出的時(shí)候,生成了匿名函數(shù)。 既然b是匿名函數(shù),函數(shù)當(dāng)然可以執(zhí)行,我們可以繼續(xù)試試下面的代碼驗(yàn)證自己的猜測(cè):
alert(b()); //undefined
alert(a()); //腳本錯(cuò)誤 提示“缺少函數(shù)”
3、new 一下function也大有乾坤(小寫(xiě)function)
(1)、簡(jiǎn)單的空函數(shù)
var func = new function() { };
alert(typeof (func)); //object
alert(func); //[object Object]
//alert(func()); //腳本錯(cuò)誤 func不是函數(shù)
其實(shí)上面的代碼也就等價(jià)于下面的寫(xiě)法:
function anonymousClass() { } //匿名類(lèi)
var instance = new anonymousClass();
alert(typeof (instance));//object
alert(instance); //[object Object]
[code]
(2)、函數(shù)帶個(gè)返回值的,也不是很難理解
[code]
var func = new function() { return "jeff wong" };
alert(typeof (func));
alert(func);
//alert(func()); //腳本錯(cuò)誤 缺少函數(shù)
其實(shí)上面的代碼也就等價(jià)于下面的寫(xiě)法:
function anonymousClass() { return "jeff wong"; } //匿名類(lèi)
var instance = new anonymousClass();
alert(typeof (instance));//object
alert(instance); //[object Object]
(3)、還是函數(shù)帶個(gè)返回值的,寫(xiě)法稍微有點(diǎn)不同
下面的代碼請(qǐng)注意和(2)中的區(qū)分一下,因?yàn)榻酉聛?lái)要重點(diǎn)討論的就是那一點(diǎn)點(diǎn)的不同書(shū)寫(xiě)形式:
var func = new function() { return new String("jeff wong"); };
alert(typeof (func)); //object 意料之中
alert(func); //這里?!
//alert(func()); //腳本錯(cuò)誤 缺少函數(shù)
上面代碼的等價(jià)形式依然簡(jiǎn)單:
function anonymousClass() { return new String("jeff wong"); }
var instance = new anonymousClass();
alert(typeof (instance));
alert(instance);
已經(jīng)運(yùn)行看到結(jié)果了嗎?沒(méi)錯(cuò),第三種寫(xiě)法我們?cè)趶棾鰂unc或者instance的時(shí)候,都出人意料地得到了一段字符串"jeff wong"。細(xì)心比較(2)和(3)中的代碼,除了return處的寫(xiě)法稍有不同之外,兩處代碼幾乎完全一致,所以我們推斷,毫無(wú)疑問(wèn),是new String的形式讓我們的函數(shù)產(chǎn)生了意想不到的效果。 為什么會(huì)這樣呢?
原來(lái),在javascript中,只要在new表達(dá)式之后的constructor返回(return)一個(gè)原始類(lèi)型(無(wú)return時(shí)其實(shí)是return原始類(lèi)型undefined,如(1)),比如第(2)種寫(xiě)法,那么就返回new創(chuàng)建的匿名對(duì)象;而如果new表達(dá)式之后的constructor返回一個(gè)引用對(duì)象,比如對(duì)象(Object),函數(shù)(function)及數(shù)組(Array)等等,那么返回的該引用對(duì)象就將覆蓋new創(chuàng)建的匿名對(duì)象?,F(xiàn)在再來(lái)分析(3)中的寫(xiě)法,由于new String會(huì)構(gòu)造一個(gè)字符串引用對(duì)象,它就覆蓋了new所創(chuàng)建的匿名對(duì)象,而new String的所指向引用值是“jeff wong”,所以彈出的必然是當(dāng)前new String所分配的值。
最后,留個(gè)思考題,大家看看下面的代碼返回什么結(jié)果:
var func = new function() { var str = new String("jeff wong"); return str; };//再換種寫(xiě)法
//alert(typeof (func)); //object 意料之中
alert(func); //猜一下這里應(yīng)該是什么結(jié)果?
作者:Jeff Wong
復(fù)制代碼 代碼如下:
var userName = function() { return "jeff wong" } ();
alert(userName);
上面的代碼確實(shí)簡(jiǎn)單,我們可以逐步分解成下面的寫(xiě)法:
復(fù)制代碼 代碼如下:
var anonymousFunc = function() { return "jeff wong" }; //匿名函數(shù)
var name = anonymousFunc(); //執(zhí)行該函數(shù) 返回人名
alert(name);
2、new 一下Function的形式(大寫(xiě)Function)
復(fù)制代碼 代碼如下:
var a = new Object();
var b = new Function();
//alert(typeof (a)); //object
//alert(typeof (b)); //function
alert(a); //[object Object]
alert(b); //匿名函數(shù)
//alert(a == b); //false
//alert(a === b); //false
正如你所看到的那樣,我們new一個(gè)Object,變量a彈出的是[object Object],而new一個(gè)Function(注意,是大寫(xiě)Function),b在彈出的時(shí)候,生成了匿名函數(shù)。 既然b是匿名函數(shù),函數(shù)當(dāng)然可以執(zhí)行,我們可以繼續(xù)試試下面的代碼驗(yàn)證自己的猜測(cè):
復(fù)制代碼 代碼如下:
alert(b()); //undefined
alert(a()); //腳本錯(cuò)誤 提示“缺少函數(shù)”
3、new 一下function也大有乾坤(小寫(xiě)function)
(1)、簡(jiǎn)單的空函數(shù)
復(fù)制代碼 代碼如下:
var func = new function() { };
alert(typeof (func)); //object
alert(func); //[object Object]
//alert(func()); //腳本錯(cuò)誤 func不是函數(shù)
其實(shí)上面的代碼也就等價(jià)于下面的寫(xiě)法:
復(fù)制代碼 代碼如下:
function anonymousClass() { } //匿名類(lèi)
var instance = new anonymousClass();
alert(typeof (instance));//object
alert(instance); //[object Object]
[code]
(2)、函數(shù)帶個(gè)返回值的,也不是很難理解
[code]
var func = new function() { return "jeff wong" };
alert(typeof (func));
alert(func);
//alert(func()); //腳本錯(cuò)誤 缺少函數(shù)
其實(shí)上面的代碼也就等價(jià)于下面的寫(xiě)法:
復(fù)制代碼 代碼如下:
function anonymousClass() { return "jeff wong"; } //匿名類(lèi)
var instance = new anonymousClass();
alert(typeof (instance));//object
alert(instance); //[object Object]
(3)、還是函數(shù)帶個(gè)返回值的,寫(xiě)法稍微有點(diǎn)不同
下面的代碼請(qǐng)注意和(2)中的區(qū)分一下,因?yàn)榻酉聛?lái)要重點(diǎn)討論的就是那一點(diǎn)點(diǎn)的不同書(shū)寫(xiě)形式:
復(fù)制代碼 代碼如下:
var func = new function() { return new String("jeff wong"); };
alert(typeof (func)); //object 意料之中
alert(func); //這里?!
//alert(func()); //腳本錯(cuò)誤 缺少函數(shù)
上面代碼的等價(jià)形式依然簡(jiǎn)單:
復(fù)制代碼 代碼如下:
function anonymousClass() { return new String("jeff wong"); }
var instance = new anonymousClass();
alert(typeof (instance));
alert(instance);
已經(jīng)運(yùn)行看到結(jié)果了嗎?沒(méi)錯(cuò),第三種寫(xiě)法我們?cè)趶棾鰂unc或者instance的時(shí)候,都出人意料地得到了一段字符串"jeff wong"。細(xì)心比較(2)和(3)中的代碼,除了return處的寫(xiě)法稍有不同之外,兩處代碼幾乎完全一致,所以我們推斷,毫無(wú)疑問(wèn),是new String的形式讓我們的函數(shù)產(chǎn)生了意想不到的效果。 為什么會(huì)這樣呢?
原來(lái),在javascript中,只要在new表達(dá)式之后的constructor返回(return)一個(gè)原始類(lèi)型(無(wú)return時(shí)其實(shí)是return原始類(lèi)型undefined,如(1)),比如第(2)種寫(xiě)法,那么就返回new創(chuàng)建的匿名對(duì)象;而如果new表達(dá)式之后的constructor返回一個(gè)引用對(duì)象,比如對(duì)象(Object),函數(shù)(function)及數(shù)組(Array)等等,那么返回的該引用對(duì)象就將覆蓋new創(chuàng)建的匿名對(duì)象?,F(xiàn)在再來(lái)分析(3)中的寫(xiě)法,由于new String會(huì)構(gòu)造一個(gè)字符串引用對(duì)象,它就覆蓋了new所創(chuàng)建的匿名對(duì)象,而new String的所指向引用值是“jeff wong”,所以彈出的必然是當(dāng)前new String所分配的值。
最后,留個(gè)思考題,大家看看下面的代碼返回什么結(jié)果:
復(fù)制代碼 代碼如下:
var func = new function() { var str = new String("jeff wong"); return str; };//再換種寫(xiě)法
//alert(typeof (func)); //object 意料之中
alert(func); //猜一下這里應(yīng)該是什么結(jié)果?
作者:Jeff Wong
您可能感興趣的文章:
- (轉(zhuǎn)載)JavaScript中匿名函數(shù),函數(shù)直接量和閉包
- Javascript的匿名函數(shù)講解
- Javascript的匿名函數(shù)小結(jié)
- javascript 匿名函數(shù)的理解(透徹版)
- JavaScript 編寫(xiě)匿名函數(shù)的幾種方法
- Javascript 匿名函數(shù)及其代碼模式原理
- Javascript匿名函數(shù)的一種應(yīng)用 代碼封裝
- JavaScript 匿名函數(shù)(anonymous function)與閉包(closure)
- 一個(gè)關(guān)于javascript匿名函數(shù)的問(wèn)題分析
- Javascript中的回調(diào)函數(shù)和匿名函數(shù)的回調(diào)示例介紹
- 詳談JavaScript 匿名函數(shù)及閉包
- JavaScript函數(shù)的一些注意要點(diǎn)小結(jié)及js匿名函數(shù)
相關(guān)文章
es6函數(shù)之嚴(yán)格模式用法實(shí)例分析
這篇文章主要介紹了es6函數(shù)之嚴(yán)格模式用法,結(jié)合實(shí)例形式分析了es6函數(shù)嚴(yán)格模式的定義、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-03-03
JavaScript避免代碼的重復(fù)執(zhí)行經(jīng)驗(yàn)技巧分享
經(jīng)常會(huì)發(fā)現(xiàn)一個(gè)問(wèn)題,那就是重復(fù)的代碼執(zhí)行,下面就是一些在查看它們的源代碼時(shí)發(fā)現(xiàn)一些問(wèn)題,把這些分享給大家,希望能讓你們更加簡(jiǎn)潔高效的寫(xiě)出JavaScript代碼2014-04-04
JS實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)拖動(dòng)滑塊驗(yàn)證,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
js實(shí)現(xiàn)改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單效果代碼
這篇文章主要介紹了js實(shí)現(xiàn)改進(jìn)的仿藍(lán)色論壇導(dǎo)航菜單效果代碼,涉及JavaScript頁(yè)面元素的遍歷及樣式動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-09-09
微信小程序封裝網(wǎng)絡(luò)請(qǐng)求和攔截器實(shí)戰(zhàn)步驟
這篇文章主要介紹了微信小程序封裝網(wǎng)絡(luò)請(qǐng)求和攔截器實(shí)戰(zhàn)步驟,這樣可以提高開(kāi)發(fā)效率,減少代碼重復(fù),同時(shí)也可以提高代碼的可維護(hù)性和可讀性2023-03-03
mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼
這篇文章主要介紹了mustache.js實(shí)現(xiàn)首頁(yè)元件動(dòng)態(tài)渲染的示例代碼,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-12-12

