閉包函數(shù)

pcChao 發(fā)布于2019-08-23 12:29 / 2392人閱讀

摘要：當(dāng)閉包函數(shù)外部包含了一個(gè)匿名函數(shù)指向全局匿名函數(shù)執(zhí)行具有全局性指向原理每個(gè)函數(shù)在被調(diào)用時(shí)都會(huì)自動(dòng)取得兩個(gè)特殊變量和。過(guò)度使用閉包可能會(huì)導(dǎo)致內(nèi)存占用過(guò)多閉包只能取得包含函數(shù)中任何變量的最后一個(gè)值所以要注意寫(xiě)法

面試的時(shí)候一直會(huì)被問(wèn)到什么是閉包,以前也不是很在意,更沒(méi)有去總結(jié)和歸納.

閉包就是能夠讀取其他函數(shù)內(nèi)部變量的函數(shù)。
所以，在本質(zhì)上，閉包就是將函數(shù)內(nèi)部和函數(shù)外部連接起來(lái)的一座橋梁。

（一）閉包最基本的應(yīng)用：

少?gòu)U話,上代碼

還是<>的栗子，

function createComparisonFunction(propertyName) {
    return function(object1, object2) {
        var value1 = object1[propertyName];
        var value2 = object2[propertyName];

        if(value1 < value2) {
            return -1;
        } else if(value1 > value2) {
            return 1;
        } else {
            return 0;
        }
    };
}
var compare = createComparisonFunction("name"); 

var result = compare({ name: "Nicholas" }, { name: "Greg" });

分析:
(1)閉包函數(shù)可以訪問(wèn)其外部函數(shù)
return出來(lái)的這個(gè)匿名函數(shù)就是一個(gè)閉包函數(shù),這個(gè)匿名函數(shù)中的訪問(wèn)了外部函數(shù)的活動(dòng)對(duì)象,就是這個(gè)propertyName參數(shù)。因?yàn)橥獠康淖饔糜蜴湵贿@個(gè)匿名函數(shù)所包含(也可以理解為:compare函數(shù)包含
createComparisonFunction()函數(shù)的活動(dòng)對(duì)象和全局變量對(duì)象),所以返回的這個(gè)匿名函數(shù)可以一直訪問(wèn)他外部的這個(gè)propertyName以及全局變量。
(2)閉包所引用的外部變量不會(huì)因?yàn)樗谧饔糜蜾N毀而銷毀
因?yàn)樵诜祷氐拈]包函數(shù)中,引用了外部函數(shù)的活動(dòng)對(duì)象,所以createComparisonFunction()內(nèi)的活動(dòng)對(duì)象（即propertyName）在createComparisonFunction（）執(zhí)行完后不會(huì)被銷毀。因?yàn)殡m然createComparisonFunction執(zhí)行完后，會(huì)把其執(zhí)行環(huán)境中的作用域鏈銷毀，但是他的活動(dòng)對(duì)象仍然被閉包函數(shù)引用，放入了匿名函數(shù)的執(zhí)行環(huán)境的作用域中

（二）閉包的副作用

(1).閉包只能取得包含函數(shù)中任何變量的最后一個(gè)值

        function createFunctions(){ 
            var result = new Array(); 
            for (var i=0; i < 10; i++){ 
                result[i] = function(){ 
                return i; 
                }; 
            } 
            return result; 
        }
        
        var res = createFunctions();
        console.log(res[0]());  //10
        console.log(res[1]());  //10

原理:
因?yàn)槊總€(gè)函數(shù)的作用域鏈中都保存著 createFunctions() 函數(shù)的活動(dòng)對(duì)象，所以它們引用的都是同一個(gè)變量 i 。當(dāng)createFunctions()函數(shù)返回后，變量 i 的值是 10，此時(shí)每個(gè)函數(shù)都引用著保存變量 i 的同一個(gè)變量對(duì)象，所以在每個(gè)函數(shù)內(nèi)部 i 的值都是 10

解決方法:

獲取內(nèi)部函數(shù)的對(duì)象result[i]時(shí),使用匿名函數(shù),并在匿名函數(shù)中再使用閉包函數(shù),使得當(dāng)前環(huán)境下的num被閉包函數(shù)函數(shù)調(diào)用,存儲(chǔ)在作用域中不會(huì)被釋放.

        function  createFunctions2(){
            var result  = new Array();
            for(var i = 0 ; i <10 ; i++){
                result[i] = (function(num){
                    return function(){
                        return num
                    }
                })(i)
            }
            return result;
        }
        
        var res2 =  createFunctions2();
        console.log(res2[0]());  // 0 
        console.log(res2[1]());  // 1

原理:
定義了一個(gè)匿名函數(shù)，并將立即執(zhí)行該匿名函數(shù)的結(jié)果賦給數(shù)組。這里的匿名函數(shù)有一個(gè)參數(shù) num，也就是最終的函數(shù)要返回的值。在調(diào)用每個(gè)匿名函數(shù)時(shí)，我們傳入了變量 i。由于函數(shù)參數(shù)是按值傳遞的，所以就會(huì)將變量 i 的當(dāng)前值復(fù)制給參數(shù) num。而在這個(gè)匿名函數(shù)內(nèi)部，又創(chuàng)建并返回了一個(gè)訪問(wèn) num 的閉包。這樣一來(lái)，result 數(shù)組中的每個(gè)函數(shù)都有自己num 變量的一個(gè)副本，因此就可以返回各自不同的數(shù)值了。

(2).當(dāng)閉包函數(shù)外部包含了一個(gè)匿名函數(shù),this指向全局

        var name = "The Window";
        var object = {
            name: "My Object",
            getNameFunc: function () {   
                return function () {        //匿名函數(shù)執(zhí)行具有全局性
                    return this.name;       //this指向window
                };
            }
        };

        console.log(object.getNameFunc()())  //  The Window

原理:
每個(gè)函數(shù)在被調(diào)用時(shí)都會(huì)自動(dòng)取得兩個(gè)特殊變量：this 和 arguments。內(nèi)部函
數(shù)在搜索這兩個(gè)變量時(shí)，只會(huì)搜索到其活動(dòng)對(duì)象為止,所以無(wú)法獲取到外部的this,此時(shí)getNameFunc()返回的是一個(gè)匿名函數(shù),并且匿名函數(shù)具有全局性,因此this指向全局的window

解決方案:
把外部作用域中的 this 對(duì)象保存在一個(gè)閉包能夠訪問(wèn)到的變量里，就可以讓閉包訪問(wèn)該對(duì)象了

    var name2 =  "The  Window";
    var object2 = {
        name:"My Object",
        getNameFunc:function(){
            var that =  this; //將外部函數(shù)的this保存在外部函數(shù)的活動(dòng)對(duì)象中(函數(shù)中申明的變量中)
            return function (){
                return that.name
            }
        }
    }
    
    console.log(object2.getNameFunc()())   //My Object

(三)
閉包的缺點(diǎn)
(1).由于閉包會(huì)攜帶包含它的函數(shù)的作用域，因此會(huì)比其他函數(shù)占用更多的內(nèi)存。過(guò)度使用閉包可能會(huì)導(dǎo)致內(nèi)存占用過(guò)多
(2).閉包只能取得包含函數(shù)中任何變量的最后一個(gè)值,所以要注意寫(xiě)法