本文實(shí)例講述了ES6中new Function()語(yǔ)法及應(yīng)用。分享給大家供大家參考，具體如下：

學(xué)習(xí)《ECMAScript6入門(mén)》中的模板字符串的案例中看見(jiàn)了new Function()創(chuàng)建函數(shù)的語(yǔ)法：

let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"

上面的代碼傳入name參數(shù)和字符串函數(shù)體，字符串函數(shù)體由模板字符串提供，非常簡(jiǎn)潔方便。

為理解new Function，于是找到了下面這篇文章：

下文翻譯自：https://javascript.info/new-function

這里有一個(gè)很少被用到的新建函數(shù)的方法，但是有時(shí)候不得不使用它。

語(yǔ)法

新建函數(shù)的語(yǔ)法：

let func = new Function ([arg1[, arg2[, ...argN]],] functionBody)

換句話說(shuō)，函數(shù)的參數(shù)（或更確切地說(shuō)，各參數(shù)的名稱）首先出現(xiàn)，而函數(shù)體在最后。所有參數(shù)都寫(xiě)成字符串形式。

通過(guò)查看示例，可以更容易理解。這是一個(gè)有兩個(gè)參數(shù)的函數(shù)：

let sum = new Function('a', 'b', 'return a + b');
alert( sum(1, 2) ); // 3

如果所要新建的函數(shù)沒(méi)有參數(shù)，那么new Function()只有一個(gè)函數(shù)體參數(shù)：

let sayHi = new Function('alert("Hello")');
sayHi(); // Hello

這個(gè)方式與其他方式最主要的不同點(diǎn)在于，函數(shù)是由在運(yùn)行時(shí)傳入的字符串創(chuàng)建的。

之前的所有聲明都要求程序員在腳本中編寫(xiě)功能代碼。

但new Function允許將任何字符串轉(zhuǎn)換為函數(shù)。例如，我們可以從服務(wù)器接收新函數(shù)然后執(zhí)行它：

let str = ... receive the code from a server dynamically ...
let func = new Function(str);
func();

它在非常特殊的情況下使用，例如當(dāng)我們從服務(wù)器接收代碼時(shí)，或者使用模板動(dòng)態(tài)編譯函數(shù)。對(duì)此的需求通常出現(xiàn)在開(kāi)發(fā)的進(jìn)階階段。

閉包（Closure）

通常，函數(shù)將它所創(chuàng)建的位置記錄在特殊屬性[[Environment]]中。 它引用了創(chuàng)建地點(diǎn)的詞法環(huán)境。

但是當(dāng)使用new Function()創(chuàng)建函數(shù)時(shí)，其[[Environment]]不是引用當(dāng)前的詞法環(huán)境，而是引用全局環(huán)境。

function getFunc() {
 let value = "test";
 let func = new Function('alert(value)');
 return func;
}
getFunc()(); // error: value is not defined

與常規(guī)方法比較：

function getFunc() {
 let value = "test";
 let func = function() { alert(value); };
 return func;
}
getFunc()(); // "test", 來(lái)自getFunc的詞法環(huán)境

這個(gè)特殊的new Function表面看起來(lái)很奇怪，但在實(shí)踐中顯得非常有用。

想象一下，我們必須從字符串創(chuàng)建一個(gè)函數(shù)。在編寫(xiě)腳本時(shí)不知道該函數(shù)的代碼（這就是我們不使用常規(guī)函數(shù)的原因），但在執(zhí)行過(guò)程中將會(huì)知道。我們可能會(huì)從服務(wù)器或其他來(lái)源收到它。

我們的新函數(shù)需要與主腳本進(jìn)行交互。

也許我們希望它能夠訪問(wèn)外部的局部變量？

問(wèn)題是在JavaScript發(fā)布到生產(chǎn)之前，它是使用minifier壓縮的——一個(gè)通過(guò)刪除額外的注釋，空格來(lái)縮小代碼的特殊程序，而且 - 重要的是，會(huì)將局部變量重命名為較短的變量。

例如，如果一個(gè)函數(shù)中有l(wèi)et userName，那么minifier會(huì)替換它為let a（或者如果a被占用，則用另一個(gè)字母替換），這個(gè)過(guò)程會(huì)在任何地方進(jìn)行。這通常是一件安全的事情，因?yàn)楸惶鎿Q的變量是局部的，函數(shù)外部沒(méi)有任何東西可以訪問(wèn)它。并且在函數(shù)內(nèi)部，minifier取代了它的每一個(gè)提及。Minifiers很聰明，他們會(huì)分析代碼結(jié)構(gòu)，所以他們不會(huì)破壞任何東西。他們不是只會(huì)愚蠢地發(fā)現(xiàn)和替換。

但是，如果new Function可以訪問(wèn)外部變量，那么它將無(wú)法找到userName，因?yàn)閡serName在代碼縮小后才作為字符串傳入。

所以，即使我們可以在new Function中訪問(wèn)外部詞匯環(huán)境，我們也會(huì)遇到minifiers的問(wèn)題。

而這時(shí)，new Function的“特色”可以讓我們免于犯錯(cuò)。

它強(qiáng)制執(zhí)行更好的代碼。如果我們需要將某些東西傳遞給由new Function創(chuàng)建的函數(shù)，我們應(yīng)該將它作為參數(shù)顯式傳遞（可以避免直接讀取外部變量時(shí)產(chǎn)生的問(wèn)題）。

我們的“sum”函數(shù)實(shí)際上是這樣正確使用的：

let sum = new Function('a', 'b', 'return a + b');
let a = 1, b = 2;
// 外部變量作為參數(shù)傳入
alert( sum(a, b) ); // 3

總結(jié)

語(yǔ)法：

let func = new Function(arg1, arg2, ..., body);

歷史原因，參數(shù)也可以以逗號(hào)分隔的列表的形式給出。

這三個(gè)意思相同：

new Function('a', 'b', 'return a + b'); // 基礎(chǔ)語(yǔ)法
new Function('a,b', 'return a + b'); // 逗號(hào)分隔
new Function('a , b', 'return a + b'); // 逗號(hào)加空格分隔

使用new Function創(chuàng)建的函數(shù)，其[[Environment]]引用全局詞法環(huán)境，而不是包含該函數(shù)的外部詞法環(huán)境。因此，他們不能使用外層的變量。但這確實(shí)很好，因?yàn)樗梢允刮覀兠庥阱e(cuò)誤。明確地傳遞參數(shù)在架構(gòu)上是一種更好的方法，并且不會(huì)在使用minifiers時(shí)不會(huì)產(chǎn)生問(wèn)題。

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運(yùn)行工具：http://tools.jb51.net/code/HtmlJsRun測(cè)試上述代碼運(yùn)行效果。

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript操作DOM技巧總結(jié)》、《JavaScript頁(yè)面元素操作技巧總結(jié)》、《JavaScript事件相關(guān)操作與技巧大全》、《JavaScript查找算法技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論