[JavaScript]-----匿名函數與閉包

一 匿名函數

匿名函數就是沒有名字的函數,閉包是可訪問一個函數作用域裏變量的函數.

//匿名函數

(           //封裝成表達式

function(){

alert('Lee');

}

)();  //()表示執行


//把匿名函數賦值給變量

var box = function(){
return 'Lee';
};

alert(box());


//函數裏面的匿名函數
function box(){
return function(){   //函數裏的匿名函數,產生閉包
return 'Lee';  
}
}
alert(box()()); //調用匿名函數

二  閉包

閉包是指有權訪問另一個函數作用域中的變量的函數,創建閉包的常見的方式,就是在
一個函數內部創建另一個函數,通過另一個函數訪問這個函數的局部變量。

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

PS:使用閉包有一個優點,也是缺點:就是可以把局部變量駐留在內存中,可以避免使用全局變量。(全局變量污染導致程序的不可預測性,每個模塊都可調用必將引來災難,所以推薦使用私有的,封裝的局部變量。)

//通過閉包可以實現局部變量的累加
function box(){
var age = 100;
return function(){
age++;
return age;
}
}
var b = box();
alert(b());
alert(b());

PS: 由於閉包裏作用域返回的局部變量資源不會立即銷燬回收,所以可能會佔用更多的資源。

//循環裏包含匿名函數
function box(){
var arr = [];
for(var i = 0; i < 5; i++){
arr[i] = function(){
return i;
};
}
return arr;
}
var b = box();
alert(b.length);
for(var i = 0 ; i < b.length; i++){
alert(b[i]());
}
上面的例子輸出的結果都是5,也就是循環後得到的最大的i 值。因爲b[i]調用的是匿
名函數,匿名函數並沒有自我執行,等到調用的時候,box()已執行完畢,i 早已變成5,所
以最終的結果就是5 個5。

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]); //這裏返回的是數組,直接打印即可
}
改1中,我們讓匿名函數進行自我執行,導致最終返回給a[i]的是數組而不是函數了。
最終導致b[0]-b[4]中保留了0,1,2,3,4 的值。

關於this對象

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

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

//可以強制指向某個對象
alert(obj.getUserFunction().call(obj));

內存泄漏

由於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); //i 不會因爲離開了for 塊就失效
}
box(2);
function box(count) {
for (var i=0; i<count; i++) {}
var i; //就算重新聲明,也不會前面的值
alert(i);
}
box(2);
以上兩個例子,說明JavaScript 沒有塊級語句的作用域,if () {} for () {}等沒有作用域,
如果有,出了這個範圍i 就應該被銷燬了。

模仿了塊級作用域(私有作用域)後,匿名函數中定義的任何變量,都會在執行結束時被銷燬。

這種技術經常在全局作用域中被用在函數外部,從而限制向全局作用域中添加過多的
變量和函數。一般來說,我們都應該儘可能少向全局作用域中添加變量和函數。在大型項目
中,多人開發的時候,過多的全局變量和函數很容易導致命名衝突,引起災難性的後果。如
果採用塊級作用域(私有作用域),每個開發者既可以使用自己的變量,又不必擔心搞亂全局
作用域。

在全局作用域中使用塊級作用域可以減少閉包占用的內存問題,因爲沒有指向匿名函數
的引用。只要函數執行完畢,就可以立即銷燬其作用域鏈了。

私有變量

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

靜態私有變量
通過塊級作用域(私有作用域)中定義私有變量或函數,同樣可以創建對外公共的特權方法。

(function () {
var age = 100;
function run() {
return '運行中...';
}
Box = function () {}; //構造方法
Box.prototype.go = function () { //原型方法
return age + run();
};
})();
var box = new Box();
alert(box.go());

上面的對象聲明,採用的是Box = function () {} 而不是function Box() {} 因爲如果用後
面這種,就變成私有函數了,無法在全局訪問到了,所以使用了前面這種。

(function () {
var user = '';
Person = function (value) {
user = value;
};
Person.prototype.getUser = function () {
return user;
};
Person.prototype.setUser = function (value) {
user = value;
}
})();
使用了prototype 導致方法共享了,而user 也就變成靜態屬性了。(所謂靜態屬性,即共
享於不同對象中的屬性)。

模塊模式

字面量的對象聲明,其實在設計模式中可以看作是一種單例模式,所謂單例模式,就是
永遠保持對象的一個實例。

增強的模塊模式,這種模式適合返回自定義對象,也就是構造函數。
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());




發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章