ES6中new Function()语法及应用实例分析


Posted in Javascript onFebruary 19, 2020

本文实例讲述了ES6中new Function()语法及应用。分享给大家供大家参考,具体如下:

学习《ECMAScript6入门》中的模板字符串的案例中看见了new Function()创建函数的语法:

let str = 'return ' + '`Hello ${name}!`';
let func = new Function('name', str);
func('Jack') // "Hello Jack!"

上面的代码传入name参数和字符串函数体,字符串函数体由模板字符串提供,非常简洁方便。

为理解new Function,于是找到了下面这篇文章:

下文翻译自:https://javascript.info/new-function

这里有一个很少被用到的新建函数的方法,但是有时候不得不使用它。

语法

新建函数的语法:

let func = new Function ([arg1[, arg2[, ...argN]],] functionBody)

换句话说,函数的参数(或更确切地说,各参数的名称)首先出现,而函数体在最后。所有参数都写成字符串形式。

通过查看示例,可以更容易理解。这是一个有两个参数的函数:

let sum = new Function('a', 'b', 'return a + b');
alert( sum(1, 2) ); // 3

如果所要新建的函数没有参数,那么new Function()只有一个函数体参数:

let sayHi = new Function('alert("Hello")');
sayHi(); // Hello

这个方式与其他方式最主要的不同点在于,函数是由在运行时传入的字符串创建的。

之前的所有声明都要求程序员在脚本中编写功能代码。

但new Function允许将任何字符串转换为函数。例如,我们可以从服务器接收新函数然后执行它:

let str = ... receive the code from a server dynamically ...
let func = new Function(str);
func();

它在非常特殊的情况下使用,例如当我们从服务器接收代码时,或者使用模板动态编译函数。对此的需求通常出现在开发的进阶阶段。

闭包(Closure)

通常,函数将它所创建的位置记录在特殊属性[[Environment]]中。 它引用了创建地点的词法环境。

但是当使用new Function()创建函数时,其[[Environment]]不是引用当前的词法环境,而是引用全局环境。

function getFunc() {
 let value = "test";
 let func = new Function('alert(value)');
 return func;
}
getFunc()(); // error: value is not defined

与常规方法比较:

function getFunc() {
 let value = "test";
 let func = function() { alert(value); };
 return func;
}
getFunc()(); // "test", 来自getFunc的词法环境

这个特殊的new Function表面看起来很奇怪,但在实践中显得非常有用。

想象一下,我们必须从字符串创建一个函数。在编写脚本时不知道该函数的代码(这就是我们不使用常规函数的原因),但在执行过程中将会知道。我们可能会从服务器或其他来源收到它。

我们的新函数需要与主脚本进行交互。

也许我们希望它能够访问外部的局部变量?

问题是在JavaScript发布到生产之前,它是使用minifier压缩的——一个通过删除额外的注释,空格来缩小代码的特殊程序,而且 - 重要的是,会将局部变量重命名为较短的变量。

例如,如果一个函数中有let userName,那么minifier会替换它为let a(或者如果a被占用,则用另一个字母替换),这个过程会在任何地方进行。这通常是一件安全的事情,因为被替换的变量是局部的,函数外部没有任何东西可以访问它。并且在函数内部,minifier取代了它的每一个提及。Minifiers很聪明,他们会分析代码结构,所以他们不会破坏任何东西。他们不是只会愚蠢地发现和替换。

但是,如果new Function可以访问外部变量,那么它将无法找到userName,因为userName在代码缩小后才作为字符串传入。

所以,即使我们可以在new Function中访问外部词汇环境,我们也会遇到minifiers的问题。

而这时,new Function的“特色”可以让我们免于犯错。

它强制执行更好的代码。如果我们需要将某些东西传递给由new Function创建的函数,我们应该将它作为参数显式传递(可以避免直接读取外部变量时产生的问题)。

我们的“sum”函数实际上是这样正确使用的:

let sum = new Function('a', 'b', 'return a + b');
let a = 1, b = 2;
// 外部变量作为参数传入
alert( sum(a, b) ); // 3

总结

语法:

let func = new Function(arg1, arg2, ..., body);

历史原因,参数也可以以逗号分隔的列表的形式给出。

这三个意思相同:

new Function('a', 'b', 'return a + b'); // 基础语法
new Function('a,b', 'return a + b'); // 逗号分隔
new Function('a , b', 'return a + b'); // 逗号加空格分隔

使用new Function创建的函数,其[[Environment]]引用全局词法环境,而不是包含该函数的外部词法环境。因此,他们不能使用外层的变量。但这确实很好,因为它可以使我们免于错误。明确地传递参数在架构上是一种更好的方法,并且不会在使用minifiers时不会产生问题。

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具:http://tools.3water.com/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题:《JavaScript操作DOM技巧总结》、《JavaScript页面元素操作技巧总结》、《JavaScript事件相关操作与技巧大全》、《JavaScript查找算法技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript错误与调试技巧总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
用JS实现的一个include函数
Jul 21 Javascript
javascript 写类方式之九
Jul 05 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
jquery 动态创建元素的方式介绍及应用
Apr 21 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
js省市县三级联动效果实例
Apr 15 Javascript
JavaScript中的对象继承关系
Aug 01 Javascript
jQuery实现的动态文字变化输出效果示例【附演示与demo源码下载】
Mar 24 jQuery
详解tween.js的使用教程
Sep 14 Javascript
你应该知道的几类npm依赖包管理详解
Oct 06 Javascript
JS实现去除数组中重复json的方法示例
Dec 21 Javascript
webpack常用构建优化策略小结
Nov 21 Javascript
es6中使用map简化复杂条件判断操作实例详解
Feb 19 #Javascript
JS继承定义与使用方法简单示例
Feb 19 #Javascript
深入浅析golang zap 日志库使用(含文件切割、分级别存储和全局使用等)
Feb 19 #Javascript
vue中实现回车键登录功能
Feb 19 #Javascript
Vue中实现回车键切换焦点的方法
Feb 19 #Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 #Javascript
Vue常用的全选/反选的示例代码
Feb 19 #Javascript
You might like
PHP5权威编程阅读学习笔记 附电子书下载
2012/07/05 PHP
Laravel框架实现调用百度翻译API功能示例
2019/05/30 PHP
ArrayList类(增强版)
2007/04/04 Javascript
JavaScript中的toLocaleLowerCase()方法使用详解
2015/06/06 Javascript
详解javascript实现瀑布流绝对式布局
2016/01/29 Javascript
详解Javascript继承的实现
2016/03/25 Javascript
JavaScript 节流函数 Throttle 详解
2016/07/04 Javascript
利用原生JS自动生成文章标题树的实例
2016/08/22 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
ECMAScript6 新特性范例大全
2017/03/24 Javascript
webpack 单独打包指定JS文件的方法
2018/02/22 Javascript
解决easyui日期时间框ie的兼容的问题
2018/03/01 Javascript
JS表单传值和URL编码转换
2018/03/03 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
vue中使用带隐藏文本信息的图片、图片水印的方法
2020/04/24 Javascript
[01:24]2014DOTA2 TI第二日 YYF表示这届谁赢都有可能
2014/07/11 DOTA
[01:16:12]完美世界DOTA2联赛PWL S2 FTD vs Inki 第一场 11.21
2020/11/23 DOTA
Python中类的继承代码实例
2014/10/28 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
python实现邮件发送功能
2019/08/10 Python
关于matplotlib-legend 位置属性 loc 使用说明
2020/05/16 Python
通过案例解析python鸭子类型相关原理
2020/10/10 Python
英智兴达软件测试笔试题
2016/10/12 面试题
信息技术专业大学生职业生涯规划书
2014/01/24 职场文书
公共艺术专业自荐信
2014/09/01 职场文书
学校师德师风整改措施
2014/10/27 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
先进工作者事迹材料
2014/12/23 职场文书
教师岗位职责范本
2015/04/02 职场文书
毕业生自我鉴定范文
2019/05/13 职场文书
element tree树形组件回显数据问题解决
2022/08/14 Javascript