Javascript中有幾個非常重要的語言特性——對象、原型繼承、閉包。其中閉包 對于那些使用傳統靜態語言C/C++的程序員來說是一個新的語言特性，本文給大家介紹js的閉包,原型,和匿名函數之旅，感興趣的朋友一起學習吧

本文通過示例給大家介紹javascript的閉包,原型,和匿名函數，具體詳情請看下文。

一 .>關于閉包

理解閉包 需要的知識

1.變量的作用域

例1:

1. var n =99; //建立函數外的全局變量 
2. function readA(){ 
3. alert(n); //讀取全局變量 
4. } 

readA(); //執行此函數

例2:

1. function readB(){ 
2. var c = 9; 
3. function readC(){ 
4. console.log(c); //ok c可見 
5. } 
6. return readC; 
7. } 
8. alert(c); //error c is not defined. 

note: 函數內部聲明變量c時,一定要加上 var,否則 c會成為一個全局變量

所以函數內可見全局變量,函數內的局部變量卻對外不可見

js的作用域是鏈式的,父對象里的變量總對子對象可見,子對象的對象卻對父對象不可見

當我們要獲取函數內的內部變量

于是有了例3:

1. function readB(){ 
2. var c = 9; 
3. function readC(){ 
4. console.log(c); 
5. } 
6. return readC(); 
7. } 
8. readB(); 

閉包很類似基于此做了一個變式

1. function readB(){ 
2. var c = 9; 
3. function readC(){ 
4. console.log(c); 
5. } 
6. return readC; 
7. } 
8. var res = readB(); 
9. res(); 

note:

1.慎用閉包,注意內存占用,因為它會保存父函數的狀態

2.不要隨便改變父函數內部變量的值

理解閉包

note: this 指包含它的函數被執行時所屬的對象

例1:

1. var name = "The Window"; 
2.  
3. var object = { 
4. name : "My Object", 
5.  
6. 　　getNameFunc : function(){ //此時this (這個執行函數)是屬于object對象的,是object對象下的一個屬性的值 
7. 　　 return function(){ //此時this (這個執行函數)是一個匿名函數,從根對象window生成,是屬于window 
8. 　　　　 return this.name; 
9. 　　　　}; 
10. 　　} 
11. }; 
12. console.log(object.getNameFunc()()); //the window 

例2:

1. var name = "The Window"; 
2.  
3. var object = { 
4. name : "My Object", 
5.  
6. getNameFunc : function(){ 
7. var that = this; 
8. 　　return function(){ 
9. 　　 return that.name; 
10. 　　}; 
11.  
12. } 
13. }; 
14. console.log(object.getNameFunc()()); //My Object 

二 .>匿名函數

直接定義一個匿名函數 然后調用這個匿名函數,這種形式在jquery插件的定義時很常見

1.通過函數字母量的方式. 先聲明一個匿名函數,然后執行它

1. ( function(){ 
2. console.log('excute self'); 
3. }) (); 

2.通過優先表達式的方式 , 由于Javascript執行表達式是從圓括號里面到外面，所以可以用圓括號強制執行聲明的函數

1. ( 
2. function () { 
3. alert(2); 
4. } 
5. () 
6. ); 

3.void操作符 用void操作符去執行一個沒有用圓括號包圍的一個單獨操作數

1. void function(){ console.log('void') } (); 

三 .>關于prototype

原型 prototype

理解js中的protitype首先需要明白js的面向對象設計

1. function People(name){ 
2. this.name = name; 
3.  
4. console.log(this); //Window 或者 object { name: 'xxx' } 
5. this.introduce = function(){ //實例對象方法 
6. console.log(this.name); 
7. } 
8. } 
9. new People('leon').introduce(); 
10. //這里有一個非常有趣的現象,結合前面的來看的話, 
11. //首先function people里的this指向的默認是Window對象 
12. //當 調用 People();時 this 輸出為 Window對象 
13. //但一旦調用new People('xx')時, this 輸出為 {name:'xx'} 
14. //其實也很好理解,一旦new ,便新建了一個對象 

實例對象方法只能這樣 new People('leon').introduce(); 調用 因為它使用前必須初始化

類的對象的靜態方法

1. var People = {}; //等于一個對象 {} 或者 function 數組都可以 此時People需要是引用類型 
2. People.sayhi = function(to_who){ 
3. console.log('hi '+ to_who); 
4. } 
5. People.sayhi('lee'); //調用時這樣調用 

原型方法

1. var People = function(){}; // People 必須為一個 function(){} 即為一個類,不能是對象或值類型或其他引用類型 
2. People.prototype.meet = function(meet_who) { 
3. console.log('I am '+this.name + ',going to meet ' + meet_who); 
4. }; 
5. new People('lee').meet('xx'); 

原型方法只能由該類的對象 調用

A.prototype = new B();

原型看起來很像繼承,但其實不是,它更像clone更準確

如果出現了父類和子類出現了重名的屬性,采取就近原則,如果找不到一級一級向上找,如果要指定調用上級的屬性,使用call方法

1. extendClass.prototype = new baseClass(); 
2. var instance = new extendClass(); 
3. var baseinstance = new baseClass(); 
4. baseinstance.showMsg.call(instance); 
5. obj1.func.call(obj); 

以上內容是小編給大家分享的學習javascript的閉包,原型,和匿名函數之旅，希望對大家有用。