建站
咨詢
售后
建站咨詢
新聞中心
1、語法
語法如下：
創(chuàng)新互聯(lián)長期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團隊從業(yè)經(jīng)驗10年，關(guān)注不同地域、不同群體，并針對不同對象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺，與合作伙伴共同營造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為愛輝企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計、成都外貿(mào)網(wǎng)站建設(shè)，愛輝網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗和眾多成功案例,為您定制開發(fā)。
let func = new Function ([arg1, arg2, …argN], functionBody);
最后一個參數(shù)必須是函數(shù)體，其余參數(shù)作為傳遞給函數(shù)體的參數(shù)。
例如：
let sum = new Function('a', 'b', 'return a + b');
console.log(sum(1, 2)); // the result is 3我們平時開發(fā) JavaScript 或者 Node.js 的時候，沒有理由使用 new Function 構(gòu)造函數(shù)，因為不需要直接使用函數(shù)或者 () => {} 箭頭函數(shù)。
這是否意味著 new Function 語法是一個雞肋的功能？
千萬不要這樣想！ 因為它絕對不是你想的那樣！
new Function 語法有一個特別強大的特性，使它在 JavaScript 中發(fā)揮著不可替代的作用。
有什么特點？也就是函數(shù)體的數(shù)據(jù)格式是字符串，真是不可思議！
不可替代的角色
這里有幾個例子來展示 new Function 語法的微妙之處。
1).無效的 JSON 對象字符串合法化
例如，有以下字符串：
let str = `{ "id": 103, name: 'yh', 'date': '2022–07–06' }`;其中的字符串不符合JSON格式（鍵值需要雙引號），使用JSON.parse()解析會報錯。
那么，有沒有什么辦法可以把這個字符串對象轉(zhuǎn)換成可以解析的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"}'使用返回語法，你可以輕松地將任意字符串轉(zhuǎn)換為其他 JavaScript數(shù)據(jù)類型。
2).模板字符串作為模板
比如Vue、React等現(xiàn)在都有自己的模板語法，比如{}語法。
如果我們想直接使用 ES6 自己的語法作為模板語言，就必須使用 new Function 的能力，比如下面的 HTML：
${data.map(function (obj, index) {
return `Article: ${obj.article}
Author: ${obj.author}
`;
}).join('')}
我們可以擴展字符串并定義一個名為 interpolate 的字符串方法來將 ES6 語法字符串轉(zhuǎn)換為可執(zhí)行的 ES6 代碼：
String.prototype.interpolate = function (params) {
const names = Object.keys(params);
const vals = Object.values(params);return new Function(…names,`return \`${this}\`;`)(…vals);
};至此，只要有對應(yīng)的數(shù)據(jù)，我們就可以根據(jù)模板獲取最終編譯好的HTML字符串，例如：
const html = template.innerHTML.interpolate({
data: [{
article: 'Article title one',
author: 'y'
}, {
article: 'Article title two',
author: 'h'
}]
});
console.log(html);可以看出，無需任何第三方模板渲染引擎，就能使用復(fù)雜語法下的模板渲染效果，原生JS愛好者欣喜若狂。
3).閉包和上下文
new Function 的 body 參數(shù)中變量的上下文是全局的，不是私有的，沒有所謂的閉包。
例如，下面新函數(shù)代碼中的值與主函數(shù)中的值無關(guān)：
function getFunc() {
let value = 'yh';
let func = new Function('console.log(value)');
return func;
}
getFunc()(); // error: value is not defined如果是常規(guī)函數(shù)語法，沒有問題：
function getFunc() {
let value = 'yh';
let func = function () {
console.log(value)
};
return func;
}
getFunc()(); // print 'yh'4).其他
與 new Function 語法類似的是新的RegExp，它可以使用字符串作為正則表達式的內(nèi)容，特別適合動態(tài)匹配，或者增加代碼混淆（一些混淆工具可以對字符串進行混淆）。
例如，要匹配以動態(tài)值開頭的屬性值，可以使用以下用法：
let reg = new RegExp('^' + value, 'g');
總結(jié)
以上就是我今天跟你分享的關(guān)于new Function語法的知識，希望對你有所幫助，如果你覺得有用的話，請記得點贊我，關(guān)注我，并將其分享給你身邊的朋友，也許能夠幫助到他。
最后，感謝你的閱讀，期待你的關(guān)注，我們一起快樂學(xué)編程。
網(wǎng)頁標(biāo)題：你需要深入了解一下JavaScript的newFunction
本文來源：http://www.5511xx.com/article/dhoodgh.html
