建站
咨詢
售后
建站咨詢
新聞中心
1、語法
語法如下：
創(chuàng)新互聯(lián)長(zhǎng)期為超過千家客戶提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為愛輝企業(yè)提供專業(yè)的成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、成都外貿(mào)網(wǎng)站建設(shè)，愛輝網(wǎng)站改版等技術(shù)服務(wù)。擁有十余年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開發(fā)。
let func = new Function ([arg1, arg2, …argN], functionBody);
最后一個(gè)參數(shù)必須是函數(shù)體，其余參數(shù)作為傳遞給函數(shù)體的參數(shù)。
例如：
let sum = new Function('a', 'b', 'return a + b');
console.log(sum(1, 2)); // the result is 3我們平時(shí)開發(fā) JavaScript 或者 Node.js 的時(shí)候，沒有理由使用 new Function 構(gòu)造函數(shù)，因?yàn)椴恍枰苯邮褂煤瘮?shù)或者 () => {} 箭頭函數(shù)。
這是否意味著 new Function 語法是一個(gè)雞肋的功能？
千萬不要這樣想！ 因?yàn)樗^對(duì)不是你想的那樣！
new Function 語法有一個(gè)特別強(qiáng)大的特性，使它在 JavaScript 中發(fā)揮著不可替代的作用。
有什么特點(diǎn)？也就是函數(shù)體的數(shù)據(jù)格式是字符串，真是不可思議！
不可替代的角色
這里有幾個(gè)例子來展示 new Function 語法的微妙之處。
1).無效的 JSON 對(duì)象字符串合法化
例如，有以下字符串：
let str = `{ "id": 103, name: 'yh', 'date': '2022–07–06' }`;其中的字符串不符合JSON格式（鍵值需要雙引號(hào)），使用JSON.parse()解析會(huì)報(bào)錯(cuò)。
那么，有沒有什么辦法可以把這個(gè)字符串對(duì)象轉(zhuǎn)換成可以解析的JSON呢？
很多人會(huì)想到正則匹配然后替換，或者使用eval等渣屬性進(jìn)行處理。
沒必要這么麻煩， 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('')}
我們可以擴(kuò)展字符串并定義一個(gè)名為 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);
};至此，只要有對(duì)應(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，它可以使用字符串作為正則表達(dá)式的內(nèi)容，特別適合動(dòng)態(tài)匹配，或者增加代碼混淆（一些混淆工具可以對(duì)字符串進(jìn)行混淆）。
例如，要匹配以動(dòng)態(tài)值開頭的屬性值，可以使用以下用法：
let reg = new RegExp('^' + value, 'g');
總結(jié)
以上就是我今天跟你分享的關(guān)于new Function語法的知識(shí)，希望對(duì)你有所幫助，如果你覺得有用的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將其分享給你身邊的朋友，也許能夠幫助到他。
最后，感謝你的閱讀，期待你的關(guān)注，我們一起快樂學(xué)編程。
網(wǎng)站題目：你需要深入了解一下JavaScript的newFunction
網(wǎng)站URL：http://fisionsoft.com.cn/article/dhoodgh.html
