學(xué)習(xí)javascript的閉包,原型,和匿名函數(shù)之旅
本文通過示例給大家介紹javascript的閉包,原型,和匿名函數(shù),具體詳情請看下文。
一 .>關(guān)于閉包
理解閉包 需要的知識
1.變量的作用域
例1:
var n =99; //建立函數(shù)外的全局變量 function readA(){ alert(n); //讀取全局變量 }
readA(); //執(zhí)行此函數(shù)
例2:
function readB(){ var c = 9; function readC(){ console.log(c); //ok c可見 } return readC; } alert(c); //error c is not defined.
note: 函數(shù)內(nèi)部聲明變量c時(shí),一定要加上 var,否則 c會(huì)成為一個(gè)全局變量
所以函數(shù)內(nèi)可見全局變量,函數(shù)內(nèi)的局部變量卻對外不可見
js的作用域是鏈?zhǔn)降?父對象里的變量總對子對象可見,子對象的對象卻對父對象不可見
當(dāng)我們要獲取函數(shù)內(nèi)的內(nèi)部變量
于是有了例3:
function readB(){ var c = 9; function readC(){ console.log(c); } return readC(); } readB();
閉包很類似基于此做了一個(gè)變式
function readB(){ var c = 9; function readC(){ console.log(c); } return readC; } var res = readB(); res();
note:
1.慎用閉包,注意內(nèi)存占用,因?yàn)樗鼤?huì)保存父函數(shù)的狀態(tài)
2.不要隨便改變父函數(shù)內(nèi)部變量的值
理解閉包
note: this 指包含它的函數(shù)被執(zhí)行時(shí)所屬的對象
例1:
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ //此時(shí)this (這個(gè)執(zhí)行函數(shù))是屬于object對象的,是object對象下的一個(gè)屬性的值 return function(){ //此時(shí)this (這個(gè)執(zhí)行函數(shù))是一個(gè)匿名函數(shù),從根對象window生成,是屬于window return this.name; }; } }; console.log(object.getNameFunc()()); //the window
例2:
var name = "The Window"; var object = { name : "My Object", getNameFunc : function(){ var that = this; return function(){ return that.name; }; } }; console.log(object.getNameFunc()()); //My Object
二 .>匿名函數(shù)
直接定義一個(gè)匿名函數(shù) 然后調(diào)用這個(gè)匿名函數(shù),這種形式在jquery插件的定義時(shí)很常見
1.通過函數(shù)字母量的方式. 先聲明一個(gè)匿名函數(shù),然后執(zhí)行它
( function(){ console.log('excute self'); }) ();
2.通過優(yōu)先表達(dá)式的方式 , 由于Javascript執(zhí)行表達(dá)式是從圓括號里面到外面,所以可以用圓括號強(qiáng)制執(zhí)行聲明的函數(shù)
( function () { alert(2); } () );
3.void操作符 用void操作符去執(zhí)行一個(gè)沒有用圓括號包圍的一個(gè)單獨(dú)操作數(shù)
void function(){ console.log('void') } ();
三 .>關(guān)于prototype
原型 prototype
理解js中的protitype首先需要明白js的面向?qū)ο笤O(shè)計(jì)
function People(name){ this.name = name; console.log(this); //Window 或者 object { name: 'xxx' } this.introduce = function(){ //實(shí)例對象方法 console.log(this.name); } } new People('leon').introduce(); //這里有一個(gè)非常有趣的現(xiàn)象,結(jié)合前面的來看的話, //首先function people里的this指向的默認(rèn)是Window對象 //當(dāng) 調(diào)用 People();時(shí) this 輸出為 Window對象 //但一旦調(diào)用new People('xx')時(shí), this 輸出為 {name:'xx'} //其實(shí)也很好理解,一旦new ,便新建了一個(gè)對象
實(shí)例對象方法只能這樣 new People('leon').introduce(); 調(diào)用 因?yàn)樗褂们氨仨毘跏蓟?/p>
類的對象的靜態(tài)方法
var People = {}; //等于一個(gè)對象 {} 或者 function 數(shù)組都可以 此時(shí)People需要是引用類型 People.sayhi = function(to_who){ console.log('hi '+ to_who); } People.sayhi('lee'); //調(diào)用時(shí)這樣調(diào)用
原型方法
var People = function(){}; // People 必須為一個(gè) function(){} 即為一個(gè)類,不能是對象或值類型或其他引用類型 People.prototype.meet = function(meet_who) { console.log('I am '+this.name + ',going to meet ' + meet_who); }; new People('lee').meet('xx');
原型方法只能由該類的對象 調(diào)用
A.prototype = new B();
原型看起來很像繼承,但其實(shí)不是,它更像clone更準(zhǔn)確
如果出現(xiàn)了父類和子類出現(xiàn)了重名的屬性,采取就近原則,如果找不到一級一級向上找,如果要指定調(diào)用上級的屬性,使用call方法
extendClass.prototype = new baseClass(); var instance = new extendClass(); var baseinstance = new baseClass(); baseinstance.showMsg.call(instance); obj1.func.call(obj);
以上內(nèi)容是小編給大家分享的學(xué)習(xí)javascript的閉包,原型,和匿名函數(shù)之旅,希望對大家有用。
相關(guān)文章
JS實(shí)現(xiàn)將圖片轉(zhuǎn)為base64格式
Base64是一種用64個(gè)字符來表示任意二進(jìn)制數(shù)據(jù)的方法,這篇文章主要為大家介紹了如何實(shí)現(xiàn)將圖片轉(zhuǎn)為base64格式,感興趣的小伙伴可以學(xué)習(xí)一下2023-07-07js實(shí)現(xiàn)當(dāng)復(fù)選框選擇匿名登錄時(shí)隱藏登錄框效果
這篇文章主要介紹了js實(shí)現(xiàn)當(dāng)復(fù)選框選擇匿名登錄時(shí)隱藏登錄框效果,實(shí)例分析了javascript動(dòng)態(tài)操作頁面元素樣式的相關(guān)技巧,非常簡單實(shí)用,需要的朋友可以參考下2015-08-08不依賴Flash和任何JS庫實(shí)現(xiàn)文本復(fù)制與剪切附源碼下載
本篇文章給大家分享的文本復(fù)制與剪切板功能,實(shí)現(xiàn)此功能不依賴falsh插件和任何js庫實(shí)現(xiàn)的,感興趣的朋友一起看看吧2015-10-10JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能完整示例
這篇文章主要介紹了JS實(shí)現(xiàn)滑動(dòng)拼圖驗(yàn)證功能,結(jié)合完整實(shí)例形式分析了JS滑動(dòng)拼圖驗(yàn)證相關(guān)原理、實(shí)現(xiàn)步驟與操作注意事項(xiàng),需要的朋友可以參考下2020-03-03如何利用Promises編寫更優(yōu)雅的JavaScript代碼
如何利用Promises編寫更優(yōu)雅的JavaScript代碼?下面小編就為大家?guī)硪黄肞romises編寫更優(yōu)雅的JavaScript代碼。希望對大家有所幫助。一起跟隨小編過來看看吧2016-05-05基于Arcgis for javascript實(shí)現(xiàn)百度地圖ABCD marker的效果
本篇文章由腳本之家小編給大家分享的基于Arcgis for javascript實(shí)現(xiàn)百度地圖ABCD marker的效果,需要的朋友一起學(xué)習(xí)吧2015-09-09移動(dòng)web開發(fā)之touch事件實(shí)例詳解
下面小編就為大家分享一篇移動(dòng)web開發(fā)之touch事件實(shí)例詳解,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01A標(biāo)簽中通過href和onclick傳遞的this對象實(shí)現(xiàn)思路
想傳遞當(dāng)前對象給一個(gè)函數(shù),于是就將這個(gè)URL寫成"Javascript:shoControlSidebar(this)",可是結(jié)果發(fā)現(xiàn)這并不可行,接下來為大家詳細(xì)介紹下解決方法2013-04-04