符合中小企业对网站设计、功能常规化式的企业展示型网站建设
本套餐主要针对企业品牌型网站、中高端设计、前端互动体验...
商城网站建设因基本功能的需求不同费用上面也有很大的差别...
手机微信网站开发、微信官网、微信商城网站...
这篇文章给大家分享的是有关ES6中如何实现new Function()语法的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。
创新互联公司专注于企业营销型网站建设、网站重做改版、港南网站定制设计、自适应品牌网站建设、成都h5网站建设、商城开发、集团公司官网建设、外贸网站建设、高端网站制作、响应式网页设计等建站业务,价格优惠性价比高,为港南等各大城市提供网站开发制作服务。
具体如下:
学习《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时不会产生问题。
感谢各位的阅读!关于“ES6中如何实现new Function()语法”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,让大家可以学到更多知识,如果觉得文章不错,可以把它分享出去让更多的人看到吧!