14.匿名函數和閉包

匿名函數和閉包

學習要點：
1.匿名函數
2.閉包

匿名函數就是沒有名字的函數，閉包是能夠訪問一個函數做用域裏變量的函數。聲明：本節內容須要有面向對象和
少許設計模式基礎。

1、匿名函數

//普通函數
function box(){ //函數名是box
return 'Lee';
}

//匿名函數
function(){ //匿名函數，會報錯，單獨的匿名函數是沒法運行的
return 'Lee';
}

//經過表達式自我執行
(function box(){ //封裝成表達式
alert('Lee');
})(); //( )表示執行函數，而且傳參。第一個圓括號放匿名函數，第二個圓括號執行

//把匿名函數賦值給變量
var box = function(){ //將匿名函數賦給變量
return 'Lee';
};
alert(box()); //調用方式和函數調用類似

//把匿名函數自我執行的返回值賦給變量
var box =(function(){
return 'Lee';
})();
alert(box); //其中box後面不用加( )

//自我執行匿名函數的傳參
(function(age){
alert(age);
})(100);

//函數裏的匿名函數
function box(){ //函數裏的匿名函數，產生閉包
return function(){
return 'journey';
}
}
alert(box()()); //調用匿名函數，若是沒有( )打印出來的就是函數的整個內容，而不是執行

2、閉包

閉包是指有權訪問另外一個函數做用域中的變量的函數，建立閉包的常見方式，就是在一個函數內部建立另外一個函數
，經過另外一個函數訪問這個函數的局部變量。

//經過閉包能夠返回局部變量
function box(){
var user = 'Lee';
return function(){ //經過匿名函數返回box()局部變量
return user;
};
}
alert(box()()); //經過box()()來直接調用匿名函數返回值

var b = box();
alert(b()); //另外一種調用匿名函數返回值

使用閉包有一個優勢，也是它的缺點：就是能夠把局部變量駐留在內存中，能夠避免使用全局變量。（全局變
量污染致使應用程序不可預測性，每一個模塊均可調用必將引來災難，因此推薦使用私有的，封裝的局部變量）。

//經過全局變量來累加
var age = 100; //全局變量
function box(){
age++; //模塊級能夠調用全局變量，進行累加
}
box(); //執行函數，累加了
alert(age); //輸出全局變量

//經過局部變量沒法實現累加
function box(){
var age = 100;
age ++; //累加
return age;
}

alert(box()); //101
alert(box()); //101，沒法實現，由於又被初始化了

//使用匿名函數實現局部變量駐留內存中，從而累加
function box(){
var age = 100;
return function (){
age++;
return age;
};
}
var b = box;
alert(b());
alert(b());
alert(b());
alert(b());
b = null ; //解除引用 等待垃圾回收機制回收

PS：因爲閉包裏做用域返回的局部變量資源不會被馬上銷燬回收，因此可能會佔用更多的內存。過分使用閉包會
致使性能降低，建議在很是有必要的時候才使用閉包。

做用域鏈的機制致使一個問題，在循環中裏的匿名函數取得的任何變量都是最後一個值。

//函數裏包含匿名函數
function box(){
var arr=[];
for ( var i = 0 ; i<10 ; i++){
arr[i] = function(){
return i;
};
}
//循環已經執行完畢了，最用由於i<4可是還要++，因此最終的i是5
return arr;
}

var b = box(); //獲得函數數組，此時賦值給b的其實就是上面函數執行完畢獲得的5
alert(b.length); //獲得函數集合長度
for(var i = 0 ; i<b.length;i++){
alert(b[i]()); //輸出每一個函數的值，都是最後一個值5
}

上面的例子輸出的結果都是5，也就是循環後獲得的最大的i值。由於b[i]調用的是匿名函數，匿名函數並無自我
執行，等到調用的時候，box()已執行完畢，i早已變成5，因此最終的結果就是5個5。

//改()
function box(){
var arr = [];
for(var i = 0 ; i<5 ; i++){
arr[i]=i;
}
}
var b = box();
for (var i = 0; i<b.length ; i++){
alert(b[i]);
}

//改1
function box(){
var arr = [];
for(var i = 0; i<5;i++){
arr[i]=(function(num){ //經過自我及時執行匿名函數
return num;
})(i);
}
return arr;
}
var b = box();
for (var i = 0; i<b.length ; i++){
alert(b[i]);
}

//改2
function box(){
var arr = [];
for(var i = 0; i<5;i++){
arr[i]=(function(num){
//num其實在這裏
return function(){ //由於閉包能夠將變量駐留在內存中，和上一節課的累加是一個道理
return num;
}
})(i);
}

//已經執行完畢了,num爲何能夠0,1,2,3,4
return arr;
}
var b = box();
for (var i = 0; i<b.length ; i++){
alert(b[i]());
}

function box(){
var arr = [];
for(var i = 0; i<5;i++){
arr[i]=function(num){
//num其實在這裏
return function(){ //由於閉包能夠將變量駐留在內存中，和上一節課的累加是一個道理
return num;
}
}(i);
}

//已經執行完畢了,num爲何能夠0,1,2,3,4
return arr;
}
var b = box();
for (var i = 0; i<b.length ; i++){
alert(b[i]());
}

咱們經過匿名函數自我執行，當即把結果賦值給a[i]。每個i,是調用方經過按值傳遞的，因此最終返回的都是指
定的遞增的i。而不是box()函數裏的i。

關於this對象
在閉包中使用this對象也可能會致使一些問題，this對象是在運行時基於函數的執行環境綁定的，若是this在全局
範圍就是window，若是在對象內部就是指向這個對象。而閉包卻在運行時指向window的，由於閉包並不屬於這
個對象的屬性或方法。

var user = 'The Window',
var obj = {
user : 'The Object',
getUserFunction : function(){
return function(){ //閉包不屬於obj，裏面的this是指向window的
return this.user;
};
}
};
alert(box.getUserFunction()());

//對象冒充
alert(box.getUserFunction().call(box));

//咱們也能夠這樣作
var user = 'The Window',
var obj = {
user : 'The Object',
getUserFunction : function(){
//這裏做用域的this是Box
return function(){
//這裏做用域的this是window
return this.user;
};
}
};
//咱們能夠將Box中的this賦值給一個變量var that = this;而後返回return that.user;
var user = 'The Window',
var obj = {
user : 'The Object',
getUserFunction : function(){
//這裏做用域的this是Box
var that = this;
return function(){
//這裏做用域的this是window
return that.user;
};
}
};
//這樣的話這個閉包中的this就是The Object

//關於this對象
var box = {
getThis : function(){
return this;
}
};
alert(this); //object Window
alert(box.getThis()); //object Object

var box = {
getThis : function(){
return function(){
return this;
}
}
};
alert(box.getThis()()); //object Window

 

內存泄漏
因爲IE的JScript對象和DOM對象使用不一樣的垃圾收集方式，所以閉包在IE中會致使一些問題。就是內存泄漏的
問題，也就是沒法銷燬駐留在內存中的元素。如下代碼有兩個知識點尚未學習到，一個是DOM，一個是事件。

function box(){
var oDiv = document.getElementById('oDiv'); //oDiv用完以後一直駐留在內存中
oDiv.onclick=function(){
alert(oDiv.innerHTML); //這裏的oDiv致使了內存泄漏
};
}
box();

那麼在最後應該將oDiv解除引用來避免內存泄漏。
function box(){
var oDiv=document.getElementById('oDiv');
var text = oDiv.innerHTML;
oDiv.onclick = function(){
alert(text);
};
oDiv = null; //解除引用，等待回收
}

PS：若是並無使用解除引用，那麼須要等到瀏覽器關閉才能得以釋放

私有化
模仿塊級做用域(私有做用域)
Javascript沒有塊級做用域的概念

function box(count){
for(var i = 0 ; i <count ; i++){};
alert(i);
}
box(2);

function box(count){
for(var i = 0 ; i<count ; i++){}
var i; //就算從新聲明，也不會影響以前聲明初始化的i值
alert(i);
}
box(2);

以上兩個例子，說明Javascript沒有塊級語句的做用域，if( ){ } for( ){ }等沒有做用域。若是有，出了這個範圍：
就應該被銷燬了。就算從新聲明同一個變量也不會改變它的值。

Javascript不會提醒你是否屢次聲明瞭同一個變量：遇到這種狀況，它只會對後續的聲明視而不見（若是初始化
了，固然還會執行的）。使用模仿塊級做用域可避免這個問題。

//模仿塊級做用域（私有做用域）
(function(){
//這裏是塊級做用域
})();

//使用塊級做用域（私有做用域）改寫
function box(count){
(function(){
for(var i = 0 ; i<count ; i++){}
})();
alert(i); //報錯，沒法訪問
}

使用了塊級做用域（私有做用域）後，匿名函數中定義的任何變量，都會在執行結束時被銷燬，這種技術常常在
全局做用域中被用在函數外部，從而限制向全局做用域中添加過多的變量和函數。通常來講，咱們都應該儘量
少向全局做用域中添加變量和函數。在大型項目中，多人開發的時候，過多的全局變量和函數很容易致使命名衝
突，引發災難性的後果。若是採用塊級做用域（私有做用域），每一個開發者既可使用本身的變量，又不會擔憂
搞亂全局做用域。

(function(){
var box = [1,2,3,4];
alert(box); //box出來就不認識了
})();

//全局變量

var age = 100;
alert(age);

//全局變量用完以後必須使用null清空等待回收，而使用私有做用域不須要，由於會自動銷燬，從而很好的限制
變量的使用

//私有做用域來表示

(function(){
var age = 100;
alert(age);
})();

在全局做用域中使用塊級做用域能夠減小閉包占用的內存問題，由於沒有指向匿名函數的引用。只要函數執行
完畢，就能夠當即銷燬其做用域鏈了。

 

 

 

私有變量
Javascript沒有私有屬性的概念；全部的對象屬性都是公有的。不過，卻有一個私有變量的概念。任何在函數中
定義的變量，均可以認爲是私有變量，由於不能在函數的外部訪問這些變量。
function box(){
var age = 100; //私有變量，外部沒法訪問
}

而經過函數內部建立一個閉包，那麼閉包經過本身的做用域鏈也能夠訪問這些變量。而利用這一點，能夠建立用
於訪問私有變量的公有方法。

function Box(){
this.age = 100; //屬性，公有的
this.run = function(){ //方法，公有的
return '運行中...';
};
}
var box = new Box();
alert(box.age);

//私有就不能用this了
function Box(){
var age = 100; //私有變量
function run(){ //私有函數
return '運行中...';
}
this.get = function(){ //對外公共的特權方法
return age+run();
};
}
var box = new Box();
alert(box.get());

還能夠經過構造方法傳參來訪問私有變量。
function Person(value){
var user = value;
this.getUser = function(){
return user;
};
this.setUser = function(value){
user = value;
};
}
var person= new Person('journey');
alert(person.getUser());

可是對象的方法，在屢次調用的時候，會屢次建立，可使用靜態私有變量來避免這個問題。

靜態私有變量

經過塊級做用域（私有做用域）中定義私有變量和函數，同時能夠建立對外公共的特權方法。

(function(){
var user = '';
Person = function(value){
user = value;
};
Person.prototype.getUser=function(){
return user;
};
Person.prototype.setUser=function(){
user = value;
}
})();
var person =new Person('journey');
alert(person.getUser());

使用了prototype致使方法共享了，而user也改變了靜態屬性了。（所謂靜態屬性，即共享於不一樣對象中的屬性
）。

模塊模式
以前採用的都是構造函數的方式來建立私有變量和特權方法。那麼對象字面量方式就採用模塊模式來建立。
什麼叫單例：就是永遠只實例化一次，其實就是字面量對象聲明方式
var box = { //字面量對象，也是單例對象，沒法第二次實例化
age : 100; //這是公有屬性，將要改爲私有
run : function(){ //這是公有函數，將要改爲私有
return '運行中...';
};
};

私有化變量和函數：
var box = function(){
var age = 100;
function fun(){
return '運行中...';
}
return{ //直接返回對象
go : function(){
return age+fun();
}
};
}();

上面的直接返回對象的例子，也能夠這麼寫：
var box = function(){
var age = 100;
function run(){
return '運行中...';
}
var obj = {
go : function(){
return age + run();
}
};
return obj;
}();

字面量的對象聲明，其實在設計模式中能夠看做是一種單例模式，所謂單例模式，就是永遠保存對象的一個實例加強的模塊模式，這種模式適合返回自定義對象，也就是構造函數。function Desk(){};var box = function(){ var age = 100; function run(){ return '運行中...'; } var desk = new Desk(); //能夠實例化特定的對象 desk.go = function(){ return age + run(); }; return desk;}();alert(box.go());