简单了解JavaScript中的new Function

目录
  • 前言
  • 1、语法
    • 01).无效的 JSON 对象字符串合法化
    • 02).模板字符串作为模板

前言

JavaScript技术一直处于不断发展壮大中，如果你是前端开发人员或者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 语法的微妙之处。

01).无效的 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数据类型。

02).模板字符串作为模板

比如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);
};

这样，只要有对应的数据，我们就可以根据

到此这篇关于简单了解JavaScript中的new Function的文章就介绍到这了,更多相关JS new Function内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 你可能不知道的JavaScript的new Function()方法

    我们大多数人都使用过JavaScript,近年来随着各种JavaScript框架的流行使得JavaScript变得更加神奇和容易."Anonymous (匿名)函数?不知道那是什么但是看起来和自己所写的差不多."你可能并不知道可以传给 new Function() 一个字符串作为函数的body来构造一个 JavaScript函数.编程中并不经常用到,但有时候应该是很有用的. 下面是 new Function 的基本用法: 复制代码 代码如下: // 最后一个参数是函数的 body(函数

  • JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结

    JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结

    1.数据类型:JavaScript定义的数据类型有字符串.数字.布尔.数组.对象.Null.Undefined,但typeof有区分可判别的数据分类是number.string.boolean.object(null / array).function和undefined.undefined 这个值表示变量不含有值,null 可以用来清空变量 let a = 100; typeof a;//number a = undefined; typeof a;//undefined a = null;

  • javascript使用eval或者new Function进行语法检查

    使用new Function( ) 来进行语法检查 eval( ) 方法是不能乱用的,在不适当的时候使用eval( ) 方法可能导致整个程序都会出问题的: 而new Function( ) 就没这么大问题.虽然new Function( ) 在任何情况下,构造的函数都是在全局作用域下直接工作的,但只作语法检查的话,并不会因为作用域问题而产生意外结果,只要你不直接调用通过它构造的新函数. 在eval( ) 接受的参数前面增加"0," 其实这是由于IE中存在一个bug.出于某种原因,如果你

  • 简单了解JavaScript中的new Function

    目录 前言 1.语法 01).无效的 JSON 对象字符串合法化 02).模板字符串作为模板 前言 JavaScript技术一直处于不断发展壮大中,如果你是前端开发人员或者JavaScript开发工程师,那么,今天这个知识点,你有必要认真了解一下,它就是“new Function”. 1.语法 语法如下: let func = new Function ([arg1, arg2, -argN], functionBody); 最后一个参数必须是函数体,其余参数作为传递给函数体的参数. 例如: l

  • 深入了解JavaScript中let/var/function的变量提升

    目录 前言 1. let存在提升 2. var/function的变量提升 2.1 var的变量提升 2.2 function的变量提升 3. 总结 前言 在我们的印象中,当提到JavaScript中的变量提升,我们想到的是“变量和函数的声明在物理层面移动到代码的最前面“.当然这么说不大准确,变量和函数声明在代码里的位置是不会变的,而是在编译阶段被放入内存中. 可是如果我问你:let 到底有没有提升?如果有,var / let / function三者的变量提升一致吗?此时你的答案是什么? 接下

  • 简单分析javascript中的函数

    简单分析javascript中的函数

    在脚本语言JavaScript中,函数的定义是由事件驱动或者当它被调用时可重复使用的代码块.在JavaScript的标准ECMAscript中,把函数表述为可以随时随地运行的语句.我个人是不认同ECMA的说法的,因为函数只有在发生调用的时候才会执行,否则就是一段毫无生气的代码. 我们来具体认识认识函数. (一)首先是函数的定义: 在ECMAscript函数的定义是 关键字function 函数名( 参数){主体:return(返回值)};这四部分组成的,但是在脚本语言中函数的定义却分为三种方式定

  • 简单理解JavaScript中的封装与继承特性

    JavaScript中的封装 封装简单地说就是让外界只能访问对象的共有变量和函数,隐藏细节和数据. js中有三种方法创建对象,分别为门户大开型.用命名规范区分私有变量.闭包创建真正的私有变量三种. 1.门户大开型,是实现对象的最基础的方法,所有方法与变量都是共有的外界可以访问. var Book = function(name){ if(this.check(name)){ console.log("error"); throw new Error("name null&qu

  • 简单谈谈Javascript中类型的判断

    数据类型的判断有这么几种方式 1.一元运算符 typeOf 2.关系运算符 instanceof 3.constructor 属性 4.prototype属性 一.typeof typeof的返回值有以下几种 类型 结构 Undefined "undefined" Null "object" (见下方) 布尔值 "boolean" 数值 "number" 字符串 "string" Symbol (ECMAS

  • 浅谈Javascript中Object与Function对象

    1.Object对象 原型对象           原型是对象的一个属性,也就是prototype属性,每个对象都有这个内部属性,而且他本身也是一个对象. <script type="text/javascript"> Object.prototype.num= 10; alert("添加原型对象属性:"+ Object.num); Object.num = 20; alert("添加对象属性:"+Object.num); </

  • javascript中万恶的function实例分析

    javascript中最有特色而又让你困惑的function算一个了 下面看一下常用操作 复制代码 代码如下: function doit(){ ..... } doit(); javascript中的函数我们可以把它当作方法使用 复制代码 代码如下: var obj=new Object(); obj.say=function(){ ..... } obj.say(); 而function实际上就是对象(即Function类型的实例) 复制代码 代码如下: function result(nu

  • 简单谈谈javascript中的变量、作用域和内存问题

    [变量] [1]定义:可变的量,相当于给一个不定的数据起了一个外号.变量是存储信息的容器. [2]特性:js中的变量是松散类型的,可以保存任何类型的数据.它只是在特定时间用于保存特定值的一个名字而已.由于不存在定义某个变量必须要保存何种数据类型值的规则,变量的值及其数据类型可以在脚本的生命周期内改变. [3]变量声明:变量可以在声明时赋值,但不能有其他操作,如+=.-=等 var a = 2;//是正确的 var a += 2;//是错误的 var a = 2++;//是错误的,++只能用于变量

  • 简单了解JavaScript中常见的反模式

    前言 反模式 是指对反复出现的设计问题的常见的无力而低效的设计模式,俗话说就是重蹈覆辙. 这篇文章描述了 JavaScript 中常见的一些反模式,以及避免它们的办法. 硬编码 硬编码(Hard-Coding)的字符串.数字.日期-- 所有能写死的东西都会被人写死. 这是一个妇孺皆知的反模式,同时也是最广泛使用的反模式. 硬编码中最为典型的大概是 平台相关代码(Platform-Related), 这是指特定的机器或环境下才可以正常运行的代码, 可能是只在你的机器上可以运行,也可能是只在 Win

  • JavaScript中Object和Function的关系小结

    Function instanceof Object 和 Object instanceof Function 都是 true 1.我们可以认为 Object 是一个特殊的"类",而这里的"类"即:Function 于是便可以理解为: Object = Function () {} 或 Object = new Function(); 即:Object 是 Function 的一个实例,所以,Object 原型链中便包含 Function.prototype,得出:

随机推荐