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

本文实例讲述了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.jb51.net/code/HtmlJsRun测试上述代码运行效果。

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

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

(0)

相关推荐

  • javascript ES6中箭头函数注意细节小结

    前言 ES6标准新增了一种新的函数:Arrow Function(箭头函数). 为什么叫Arrow Function?因为它的定义用的就是一个箭头: x => x * x 上面的箭头函数相当于: function (x) { return x * x; } 但箭头函数带来了些许问题,下面来一起看看吧. 关于{} 第一个问题是关于箭头函数与{}. 箭头函数,乍一看,用法似乎很简单,比如像下面这样用来给数组每一项乘以2: const numbers = [1, 2, 3]; const result

  • ES6中箭头函数的定义与调用方式详解

    本文主要介绍的是关于ES6箭头函数的定义与调用方式的相关内容,分享出来供大家参考学习,下面来看看详细的介绍: 基本用法: ES6中允许使用"箭头"(=>)定义函数 var f = v => v; 上面代码相当于: var f = function( v ) { return v; } 根据箭头函数有参数和无参数来区分 1.无参数的箭头函数 var f = () => 5; 等同于 var f = function() { return 5}; 2.有参数的箭头函数 v

  • es6学习笔记之Async函数基本教程

    本文介绍的是关于es6中Async函数的相关内容,非常出来供大家参考学习,需要的朋友们下面来看看详细的介绍: async 函数 async 函数,使得异步操作变得更加方便.它是 Generator 函数的语法糖. Generator 函数,依次读取两个文件: var fs = require('fs'); var readFile = function (fileName) { return new Promise(function (resolve, reject) { fs.readFile

  • 关于ES6箭头函数中的this问题

    简要介绍:箭头函数中的this,指向与一般function定义的函数不同,箭头函数this的定义:箭头函数中的this是在定义函数的时候绑定,而不是在执行函数的时候绑定. (1)一般函数this指向在执行是绑定  当运行obj.say()时候,this指向的是obj这个对象. var x=11; var obj={ x:22, say:function(){ console.log(this.x) } } obj.say(); //console.log输出的是22 (2)所谓的定义时候绑定,就

  • ES6中javascript实现函数绑定及类的事件绑定功能详解

    本文实例讲述了ES6中javascript实现函数绑定及类的事件绑定功能的方法.分享给大家供大家参考,具体如下: 函数绑定 箭头函数可以绑定this对象,大大减少了显式绑定this对象的写法(call.apply.bind).但是,箭头函数并不适用于所有场合,所以 ES7 提出了 " 函数绑定 " ( function bind )运算符,用来取代call.apply.bind调用.虽然该语法还是 ES7 的一个提案,但是 Babel 转码器已经支持. 函数绑定运算符是并排的两个双冒号

  • ES6新特性八:async函数用法实例详解

    本文实例讲述了ES6新特性之async函数用法.分享给大家供大家参考,具体如下: 1. async 函数是什么? node.js 版本7及之后版本才支持该函数. 可以简单的理解为他是Generator 函数的语法糖,即Generator 函数调用next() 返回的结果. ① Generator 函数需要next() 或执行器进行执行,而async 函数只需和普通函数一样执行. ② async和await,比起星号和yield,语义更清楚了.async表示函数里有异步操作,await表示紧跟在后

  • Es6 Generator函数详细解析

    ECMAScript 6 (简称 ES6 )作为下一代 JavaScript 语言,将 JavaScript 异步编程带入了一个全新的阶段. Generator函数跟普通函数的写法有非常大的区别: 一是,function关键字与函数名之间有一个星号: 二是,函数体内部使用yield语句,定义不同的内部状态(yield在英语里的意思就是"产出"). 本文重点给大家介绍Es6 Generator函数,具体内容如下所示: /* 一.generator函数的定义 1.Generator 函数是

  • ES6中的箭头函数实例详解

    本文实例讲述了ES6中的箭头函数.分享给大家供大家参考,具体如下: 语法 我们先来看看箭头函数的语法: ([param] [, param]) => { statements } param => expression param 是参数,根据参数个数不同,分这几种情况: () => { - } // 零个参数用 () 表示: x => { - } // 一个参数可以省略 (): (x, y) => { - } // 多参数不能省略 (): 示例 我们再来看看一些示例,看看在

  • 利用es6 new.target来对模拟抽象类的方法

    起源 最近在使用 Symbol 来做为唯一值,发现 Symbol 无法进行 new 操作,只能当作函数使用,只要进行了new 就会发生类型错误 new Symbol() // error Uncaught TypeError: Symbol is not a constructor at new Symbol (<anonymous>) at <anonymous>:1:1 在不考虑底层实现的情况下,在代码层面是否能够实现一个函数只可以进行调用而不可以进行 new 操作呢?思考之后

  • 详解Javascript ES6中的箭头函数(Arrow Functions)

    ES6可以使用"箭头"(=>)定义函数,注意是函数,不要使用这种方式定义类(构造器). 一.语法 1. 具有一个参数的简单函数 var single = a => a single('hello, world') // 'hello, world' 2. 没有参数的需要用在箭头前加上小括号 var log = () => { alert('no param') } 3. 多个参数需要用到小括号,参数间逗号间隔,例如两个数字相加 var add = (a, b) =&g

  • ES6新特性之函数的扩展实例详解

    本文实例讲述了ES6新特性之函数的扩展.分享给大家供大家参考,具体如下: 一.函数参数默认值 1. ES6允许为函数的参数设置默认值,即直接写在参数定义的后面. function log(x, y = 'World') { console.log(x, y); } log('Hello') // Hello World log('Hello', 'China') // Hello China log('Hello', '') // Hello 这种写法有两个好处:首先,阅读代码的人,可以立刻意识

  • js es6系列教程 - 基于new.target属性与es5改造es6的类语法

    es5的构造函数前面如果不用new调用,this指向window,对象的属性就得不到值了,所以以前我们都要在构造函数中通过判断this是否使用了new关键字来确保普通的函数调用方式都能让对象复制到属性 function Person( uName ){ if ( this instanceof Person ) { this.userName = uName; }else { return new Person( uName ); } } Person.prototype.showUserNam

随机推荐