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 相关文章推荐
根据分辨率不同,调用不同的css文件
Aug 25 Javascript
javascript开发技术大全-第1章javascript概述
Jul 03 Javascript
jquery实现的3D旋转木马特效代码分享
Aug 25 Javascript
js 提交form表单和设置form表单请求路径的实现方法
Oct 25 Javascript
VueJs路由跳转——vue-router的使用详解
Jan 10 Javascript
JavaScript中Hoisting详解 (变量提升与函数声明提升)
Aug 18 Javascript
jQuery读取本地的json文件(实例讲解)
Oct 31 jQuery
element-ui 限制日期选择的方法(datepicker)
May 16 Javascript
vue中使用vee-validator完成表单校验方案
Nov 01 Javascript
Vuex实现数据共享的方法
Dec 20 Javascript
修改vue源码实现动态路由缓存的方法
Jan 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
用php实现批量查询清除一句话后门的代码
2008/01/20 PHP
深入解析PHP中的(伪)多线程与多进程
2013/07/01 PHP
php自定义函数实现二维数组按指定key排序的方法
2016/09/29 PHP
PHP 爬取网页的主要方法
2018/07/13 PHP
基于jquery的一行代码轻松实现拖动效果
2010/12/28 Javascript
可以用鼠标拖动的DIV实现思路及代码
2013/10/21 Javascript
javascript浏览器窗口之间传递数据的方法
2015/01/20 Javascript
jQuery使用CSS()方法给指定元素同时设置多个样式
2015/03/26 Javascript
jquery模拟alert的弹窗插件
2015/07/31 Javascript
详解jQuery选择器
2016/12/21 Javascript
微信小程序scroll-view实现横向滚动和上拉加载示例
2017/03/06 Javascript
详解Angular2组件之间如何通信
2017/06/22 Javascript
详解Vue的computed(计算属性)使用实例之TodoList
2017/08/07 Javascript
Vue 2.5.2下axios + express 本地请求404的解决方法
2018/02/21 Javascript
vue-cli脚手架build目录下utils.js工具配置文件详解
2018/09/14 Javascript
[01:06]DOTA2小知识课堂 Ep.01 TP出门不要忘记帮队友灌瓶哦
2019/12/05 DOTA
python高手之路python处理excel文件(方法汇总)
2016/01/07 Python
Flask的图形化管理界面搭建框架Flask-Admin的使用教程
2016/06/13 Python
Python tornado队列示例-一个并发web爬虫代码分享
2018/01/09 Python
python对日志进行处理的实例代码
2018/10/06 Python
python xpath获取页面注释的方法
2019/01/14 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
详解Python Qt的窗体开发的基本操作
2019/07/14 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
HTML5 Canvas阴影使用方法实例演示
2013/08/02 HTML / CSS
NUK奶瓶美国官网:NUK美国
2016/09/26 全球购物
Alba Moda德国网上商店:意大利时尚女装销售
2016/11/14 全球购物
Book Depository美国:全球领先的专业网上书店之一
2019/08/14 全球购物
Bed Bath & Beyond加拿大官网:购买床上用品、浴巾、厨房电器等
2019/10/04 全球购物
毕业生实习鉴定
2013/12/11 职场文书
计算机专业毕业生自我鉴定
2014/01/16 职场文书
2015年暑假工作总结
2015/07/13 职场文书
读《儒林外史》有感:少一些功利,多一些真诚
2020/01/19 职场文书
Python实现打乒乓小游戏
2021/09/25 Python
MYSQL 运算符总结
2021/11/11 MySQL