JavaScript函數(shù)表達(dá)式——“函數(shù)的遞歸和閉包”的注意要點(diǎn)

winterdawn 發(fā)布于2019-08-19 17:07 / 3180人閱讀

摘要：如調(diào)用函數(shù)聲明函數(shù)不會(huì)報(bào)錯(cuò)使用函數(shù)表達(dá)式則不可以報(bào)錯(cuò)創(chuàng)建函數(shù)的兩種方式，一個(gè)是函數(shù)聲明如第一種方式一個(gè)是函數(shù)表達(dá)式如第二種方式。第二種函數(shù)創(chuàng)建方式創(chuàng)建的函數(shù)叫匿名函數(shù)或拉姆達(dá)函數(shù)，因?yàn)殛P(guān)鍵字后面沒(méi)有標(biāo)識(shí)符。

函數(shù)表達(dá)式的基本概念 name屬性和函數(shù)提升

首先，name屬性，通過(guò)這個(gè)屬性可以訪問(wèn)到給函數(shù)指定的名字。（非標(biāo)準(zhǔn)的屬性）如：

function People(){};
console.log(People.name); //People

其次，函數(shù)聲明提升，意味著可以把函數(shù)聲明放在調(diào)用它的語(yǔ)句后面。如：

sayHi(); //調(diào)用函數(shù)
function sayHi(){ //聲明函數(shù)
    console.log("Hi");
} //不會(huì)報(bào)錯(cuò)

使用函數(shù)表達(dá)式則不可以：

sayHi();
var sayHi = function(){
    console.log("Hi");
} //報(bào)錯(cuò)

創(chuàng)建函數(shù)的兩種方式，一個(gè)是函數(shù)聲明（如第一種方式）；一個(gè)是函數(shù)表達(dá)式（如第二種方式）。第二種函數(shù)創(chuàng)建方式創(chuàng)建的函數(shù)叫“匿名函數(shù)”或“拉姆達(dá)函數(shù)”，因?yàn)閒unction 關(guān)鍵字后面沒(méi)有標(biāo)識(shí)符。

函數(shù)提升的常見(jiàn)錯(cuò)誤

需要注意的是，作為對(duì)比，下面的兩種代碼中，第一個(gè)是錯(cuò)誤的（會(huì)導(dǎo)致各瀏覽器出現(xiàn)不同的問(wèn)題）；第二個(gè)才使正確的。代碼如下：

var condition = true;
if (condition){
    function sayHI(){
        console.log("hi")
    }
    sayHI(); //"hello"
}else{
    function sayHI(){
        console.log("hello")
    }
    sayHI();
}

報(bào)錯(cuò)

var condition = false;
var sayHi;
if(condition){
    sayHi = function(){
        console.log("hi")
    };
    sayHi();
}else{
    sayHi = function(){
        console.log("hello")
    };
    sayHi(); //hello
}

沒(méi)有錯(cuò)誤

var condition = true;
if(condition){
    var sayHi = function(){
        console.log("hi")
    };
    sayHi(); //hi
}else{
    var sayHi = function(){
        console.log("hello")
    };
    sayHi(); //hello
}

這里也不會(huì)出現(xiàn)問(wèn)題。出現(xiàn)上面問(wèn)題的根源就是函數(shù)提升，就是函數(shù)聲明和函數(shù)表達(dá)式之間的區(qū)別所導(dǎo)致的。

函數(shù)的遞歸

遞歸函數(shù)就是在一個(gè)函數(shù)通過(guò)名字調(diào)用自身的情況下構(gòu)成的。如：

function factorial(num){
    if(num <= 1){
        return 1;
    }else{
        return num * factorial(num - 1);
    }
}    
console.log(factorial(4)); //24 4*3*2*1

但是，函數(shù)里面包含了函數(shù)自身所以，在應(yīng)該使用arguments.callee來(lái)解決該問(wèn)題。如：

function factorial(num){
    if(num <= 1){
        return 1;
    }else{
        return num * arguments.callee(num - 1);
    }
}    
console.log(factorial(4)); //24 4*3*2*1

但如果使用上面這種方法，則在嚴(yán)格模式下行不通。不過(guò)可以使用命名函數(shù)表達(dá)式來(lái)達(dá)成相同的結(jié)果。如：

var factorial = (
    function f(num){
        if(num <= 1){
            return 1;
        }else{
            return num * f(num - 1);
        }
    }
);    
console.log(factorial(4)); //24 4*3*2*1

即，把它包含在一個(gè)變量里面，在遇到其他這種需要使用arguments.callee的時(shí)候都可以這樣做。

函數(shù)的閉包

閉包就是有權(quán)訪問(wèn)另一個(gè)函數(shù)作用域中的變量的函數(shù)。常見(jiàn)的創(chuàng)建閉包的方式就是在一個(gè)函數(shù)內(nèi)部創(chuàng)建另一個(gè)函數(shù)。在此之前應(yīng)該先掌握作用域鏈的概念（見(jiàn)《Javascript執(zhí)行環(huán)境和作用域的注意要點(diǎn)》一文《Javascript執(zhí)行環(huán)境和作用域的注意要點(diǎn)》）

作用域鏈

以下面的代碼為例

function compare(value1,value2){
    if (value1 > value2){
        return 1;
    }else if (value1 < value2){
        return -1;
    }else {
        return 0;
    }
}
var result = compare(5,10);

調(diào)用函數(shù)compare時(shí)，函數(shù)執(zhí)行環(huán)境中的作用域鏈：

作用域鏈本質(zhì)上是一個(gè)指向變量對(duì)象的指針列表。

另一個(gè)例子：

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"});

這個(gè)就相當(dāng)于：

var compare = function(object1,object2){
    var value1 = object1["name"];
    var value2 = object2["name"];
    
    if (value1 < value2){
        return -1;
    }else if(value1 > value2){
        return 1;
    }else{
        return 0;
    }
};
var result = compare({name: "Nicholas"},{name: "Greg"});

相當(dāng)于：

var result = function(){
    var value1 = {name: "Nicholas"}["name"];
    var value2 = {name: "Greg"}["name"];
    
    if (value1 < value2){
        return -1;
    }else if(value1 > value2){
        return 1;
    }else{
        return 0;
    }
};
console.log(result()); //1

所以，完整的代碼如下：

var compareNames = createComparisonFunction("name");

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 result = compareNames({name: "Nicholas"},{name: "Greg"});

compareNames = null;

調(diào)用compareNames()函數(shù)的過(guò)程中產(chǎn)生的作用域鏈之間的關(guān)系圖如下：

常見(jiàn)的閉包的模式一般都是這樣：

var X = function A(a){
    return function(b1,b2){...a...} //匿名函數(shù)
};    
var Y = X(b1,b2);

舉個(gè)例子：

var obj1 = {
    name: "co",
    color: ["white","black"]
};
var obj2 = {
    name: "lor",
    color: ["yellow","red"]
};

function displayProperty(propertyName){
    return function(obj1,obj2){
        var value1 = obj1[propertyName];
        var value2 = obj2[propertyName];
        
        if(typeof value1 === "string"){
            return value1 + " and " + value2 + "
";
        }else if(value1 instanceof Array){
            return value1.toString() + "
" + value2.toString();
        }else{
            return false;
        }
    };
}

var displayP = displayProperty("name");
var displayStr = displayP(obj1,obj2);
document.write(displayStr);
displayP = null;

var displayP = displayProperty("color");
var displayStr = displayP(obj1,obj2);
document.write(displayStr);    
/*
co and lor
white,black
yellow,red
*/

閉包會(huì)攜帶他包含的函數(shù)的作用域，因此會(huì)更多的占用內(nèi)存資源，建議只有在絕對(duì)必要的時(shí)候再考慮使用閉包。V8 優(yōu)化后的js 引擎會(huì)嘗試收回被閉包占用的內(nèi)存。

閉包與變量

閉包的副作用是閉包只能取得包含函數(shù)中任何變量的最后一個(gè)值。

this對(duì)象

全局函數(shù)中this = window；當(dāng)函作為位某個(gè)對(duì)象的方法調(diào)用時(shí)this = 那個(gè)對(duì)象；但是匿名函數(shù)的執(zhí)行環(huán)境又全局性，this 通常指向window；但也有例外：

var name = "the window";

var obj = {
    name: "the obj",
    
    getNameFunc: function(){
        return function(){
            return this.name;
        };
    }
};

console.log(obj.getNameFunc()()); //"the window" 別忘了要寫(xiě)兩個(gè)小括號(hào)

因?yàn)槊總€(gè)函數(shù)在被調(diào)用的時(shí)候都會(huì)自動(dòng)取得兩個(gè)特殊的變量：this 和arguments；內(nèi)部函數(shù)在搜索這兩個(gè)變量時(shí)，只會(huì)搜索到其活動(dòng)對(duì)象為止。

var obj = {
    name: "Oliver",
    age: 18,
    friends: ["alice","troy"],
    sayName: function(){
        return this.name;
    },
    sayFriends: function(){
        return function(){
            return this.friends;
        };
    }
    
};

console.log(obj.sayFriends()()); //undefined

上面這個(gè)代碼就是因?yàn)殚]包的問(wèn)題，導(dǎo)致錯(cuò)誤。又如：

var friends = "window"s friends";

var obj = {
    name: "Oliver",
    age: 18,
    friends: ["alice","troy"],
    sayName: function(){
        return this.name;
    },
    sayFriends: function(){
        return function(){
            return this.friends;
        };
    }
    
};

console.log(obj.sayFriends()()); //window"s friends 匿名函數(shù)執(zhí)行環(huán)境的全局性

解決這個(gè)問(wèn)題的方法是：

var friends = "window"s friends";

var obj = {
    name: "Oliver",
    age: 18,
    friends: ["alice","troy"],
    sayName: function(){
        return this.name;
    },
    sayFriends: function(){
        var outer = this;
        return function(){
            return outer.friends;
        };
    }
    
};

console.log(obj.sayFriends()()); //["alice","troy"] 這樣就可以正常搜索到了

又如：

var friends = "window"s friends";

var obj = {
    name: "Oliver",
    age: 18,
    friends: ["alice","troy"],
    sayWindowFriends: function(){
        return function(){
            return this.friends;
        };
    },
    sayFriends: function(){
        var outer = this;
        return function(){
            return function(){
                return function(){
                    return outer.friends
                };
            };
        };
    }
};

console.log(obj.sayWindowFriends()()); //"window"s friends"
console.log(obj.sayFriends()()()()); //["alice", "troy"]

再舉個(gè)例子：

var obj = {
    name: "Oliver",
    age: 18,
    friends: ["alice","troy"],
    sayFriends: function(i){
        var outer = this;
        return function(j){
            return outer.friends[i] + outer.friends[j];
        };
    }
};

console.log(obj.sayFriends(0)(1)); //alicetroy

另外，在幾種特殊情況下，this 的值可能會(huì)發(fā)生改變。如：

var name = "the window";

var obj = {
    name: "my object",
    
    getName: function(){
        return this.name;
    }
};

console.log(obj.getName()); //my object
console.log((obj.getName)()); //my object 與上面的是相同的，多了個(gè)括號(hào)而已
console.log((obj.getName = obj.getName)()); //the window

只要不用下面兩種方式調(diào)用函數(shù)即可。

內(nèi)存泄露

經(jīng)過(guò)上面的一番折騰，最明顯的就是window.name 一直占用內(nèi)存，無(wú)法清空。必須手動(dòng)把它清理掉，用window.name = null來(lái)操作。

GPU云服務(wù)器云服務(wù)器 javascript的函數(shù) javascript中的函數(shù) 函數(shù)表達(dá)式 javascript表達(dá)式

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/78219.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

winterdawn

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

【C++初階】關(guān)鍵字,命名空間,缺省參數(shù),IO和函數(shù)重載

閱讀 4013·2021-10-12 10:12
CMIVPS：VPS主機(jī)年付7折月付8折,香港大帶寬/直連線路，月付$7.52起

閱讀 2954·2021-09-10 11:18
CSS學(xué)習(xí)（二）：背景圖片如何定位？

閱讀 3742·2019-08-30 15:54
JavaScript 工作原理之十三－CSS 和 JS 動(dòng)畫(huà)底層原理及如何優(yōu)化其性能

閱讀 2884·2019-08-30 15:53
VSCODE常用插件使用記錄

閱讀 714·2019-08-30 13:54
2016年最具潛力前端開(kāi)源項(xiàng)目Top20

閱讀 1045·2019-08-30 13:21
CSS3實(shí)現(xiàn)全景圖特效

閱讀 2317·2019-08-30 12:57
【Electron】酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享 — 進(jìn)程通信

閱讀 1794·2019-08-30 11:10

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript函數(shù)表達(dá)式——“函數(shù)的遞歸和閉包”的注意要點(diǎn)

相關(guān)文章

***JavaScript函數(shù)表達(dá)式——“函數(shù)模仿塊級(jí)作用域及函數(shù)的私有變量”的注意要點(diǎn)***

***JavaScript引用類型——“單體內(nèi)置對(duì)象”的注意要點(diǎn)***

***JavaScript引用類型——“Function類型”的注意要點(diǎn)***

***JavaScript引用類型——“RegExp類型”的注意要點(diǎn)***

**深入理解javascript原型和閉包**

發(fā)表評(píng)論

0條評(píng)論

winterdawn

男|高級(jí)講師

TA的文章

【C++初階】關(guān)鍵字,命名空間,缺省參數(shù),IO和函數(shù)重載

CMIVPS：VPS主機(jī)年付7折月付8折,香港大帶寬/直連線路，月付$7.52起

CSS學(xué)習(xí)（二）：背景圖片如何定位？

JavaScript 工作原理之十三－CSS 和 JS 動(dòng)畫(huà)底層原理及如何優(yōu)化其性能

VSCODE常用插件使用記錄

2016年最具潛力前端開(kāi)源項(xiàng)目Top20

CSS3實(shí)現(xiàn)全景圖特效

【Electron】酷家樂(lè)客戶端開(kāi)發(fā)實(shí)踐分享 — 進(jìn)程通信

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

JavaScript函數(shù)表達(dá)式——“函數(shù)的遞歸和閉包”的注意要點(diǎn)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！