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

學習《ECMAScript6入門》中的模板字符串的案例中看見了new Function()創(chuàng)建函數(shù)的語法：

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

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

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

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

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

語法

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

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

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

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

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

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

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

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

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

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

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

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

閉包（Closure）

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

但是當使用new Function()創(chuàng)建函數(shù)時，其[[Environment]]不是引用當前的詞法環(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", 來自getFunc的詞法環(huán)境

這個特殊的new Function表面看起來很奇怪，但在實踐中顯得非常有用。

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

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

也許我們希望它能夠訪問外部的局部變量？

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

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

但是，如果new Function可以訪問外部變量，那么它將無法找到userName，因為userName在代碼縮小后才作為字符串傳入。

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

而這時，new Function的“特色”可以讓我們免于犯錯。

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

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

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

總結(jié)

語法：

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

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

這三個意思相同：

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

使用new Function創(chuàng)建的函數(shù)，其[[Environment]]引用全局詞法環(huán)境，而不是包含該函數(shù)的外部詞法環(huán)境。因此，他們不能使用外層的變量。但這確實很好，因為它可以使我們免于錯誤。明確地傳遞參數(shù)在架構(gòu)上是一種更好的方法，并且不會在使用minifiers時不會產(chǎn)生問題。

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

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

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

最新評論