你需要深入了解一下 JavaScript 的 new Function
1、語法
語法如下：
let func = new Function ([arg1, arg2, …argN], functionBody);
最后一個參數必須是函數體，其余參數作為傳遞給函數體的參數。
例如：
let sum = new Function('a', 'b', 'return a + b');
console.log(sum(1, 2)); // the result is 3
我們平時開發 JavaScript 或者 Node.js 的時候，沒有理由使用 new Function 構造函數，因為不需要直接使用函數或者 () => {} 箭頭函數。
這是否意味著 new Function 語法是一個雞肋的功能？
千萬不要這樣想！ 因為它絕對不是你想的那樣！
new Function 語法有一個特別強大的特性，使它在 JavaScript 中發揮著不可替代的作用。
有什么特點？也就是函數體的數據格式是字符串，真是不可思議！
不可替代的角色
這里有幾個例子來展示 new Function 語法的微妙之處。
1).無效的 JSON 對象字符串合法化
例如，有以下字符串：
let str = `{ "id": 103, name: 'yh', 'date': '2022–07–06' }`;
其中的字符串不符合JSON格式（鍵值需要雙引號），使用JSON.parse()解析會報錯。
那么，有沒有什么辦法可以把這個字符串對象轉換成可以解析的JSON呢？
很多人會想到正則匹配然后替換，或者使用eval等渣屬性進行處理。
沒必要這么麻煩， new Function 上線了，就完美了！
JS 代碼如下所示：
console.log(JSON.stringify(new Function('return ' + str)()));
// The return result is: '{"id":10393,"name":"yh","date":"2022–07–06"}'
使用返回語法，你可以輕松地將任意字符串轉換為其他 JavaScript數據類型。
2).模板字符串作為模板
比如Vue、React等現在都有自己的模板語法，比如{}語法。
如果我們想直接使用 ES6 自己的語法作為模板語言，就必須使用 new Function 的能力，比如下面的 HTML：
<template id="template">
${data.map(function (obj, index) {
return `<p>Article: ${obj.article}</p>
<p>Author: ${obj.author}</p>
`;
}).join('')}
</template>
我們可以擴展字符串并定義一個名為 interpolate 的字符串方法來將 ES6 語法字符串轉換為可執行的 ES6 代碼：
String.prototype.interpolate = function (params) {
const names = Object.keys(params);
const vals = Object.values(params);return new Function(…names,`return \`${this}\`;`)(…vals);
};
至此，只要有對應的數據，我們就可以根據<template>模板獲取最終編譯好的HTML字符串，例如：
const html = template.innerHTML.interpolate({
data: [{
article: 'Article title one',
author: 'y'
}, {
article: 'Article title two',
author: 'h'
}]
});
console.log(html);
可以看出，無需任何第三方模板渲染引擎，就能使用復雜語法下的模板渲染效果，原生JS愛好者欣喜若狂。
3).閉包和上下文
new Function 的 body 參數中變量的上下文是全局的，不是私有的，沒有所謂的閉包。
例如，下面新函數代碼中的值與主函數中的值無關：
function getFunc() {
let value = 'yh';
let func = new Function('console.log(value)');
return func;
}
getFunc()(); // error: value is not defined
如果是常規函數語法，沒有問題：
function getFunc() {
let value = 'yh';
let func = function () {
console.log(value)
};
return func;
}
getFunc()(); // print 'yh'
4).其他
與 new Function 語法類似的是新的RegExp，它可以使用字符串作為正則表達式的內容，特別適合動態匹配，或者增加代碼混淆（一些混淆工具可以對字符串進行混淆）。
例如，要匹配以動態值開頭的屬性值，可以使用以下用法：
let reg = new RegExp('^' + value, 'g');
總結
以上就是我今天跟你分享的關于new Function語法的知識，希望對你有所幫助，如果你覺得有用的話，請記得點贊我，關注我，并將其分享給你身邊的朋友，也許能夠幫助到他。
最后，感謝你的閱讀，期待你的關注，我們一起快樂學編程。
