這篇文章給大家分享的是有關(guān)ES6中如何實(shí)現(xiàn)new Function()語法的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司專注于企業(yè)營銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、港南網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、成都h5網(wǎng)站建設(shè)、商城開發(fā)、集團(tuán)公司官網(wǎng)建設(shè)、外貿(mào)網(wǎng)站建設(shè)、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁設(shè)計(jì)等建站業(yè)務(wù)，價格優(yōu)惠性價比高，為港南等各大城市提供網(wǎng)站開發(fā)制作服務(wù)。

具體如下：

學(xué)習(xí)《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

這個方式與其他方式最主要的不同點(diǎn)在于，函數(shù)是由在運(yùn)行時傳入的字符串創(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();

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

閉包（Closure）

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

但是當(dāng)使用new Function()創(chuàng)建函數(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", 來自getFunc的詞法環(huán)境

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

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

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

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

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

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

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

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

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

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

語法：

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í)很好，因?yàn)樗梢允刮覀兠庥阱e誤。明確地傳遞參數(shù)在架構(gòu)上是一種更好的方法，并且不會在使用minifiers時不會產(chǎn)生問題。

感謝各位的閱讀！關(guān)于“ES6中如何實(shí)現(xiàn)new Function()語法”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！