前端new Function()的用法

2019-05-05  本文已影响0人  QDzzzhy

在使用JavaScript时,大家一般都会怎样创建函数?我相信大部分都是这样的:

function foo(arg1,arg2...){
    ...
}

今天在学习ES6的时候发现了一种以前没有尝试过的写法,具体如下:

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

当看到这里的时候我是懵逼的,为什么传入了两个字符串?下面我为大家解析一下:

大家肯定都知道new Function ,因为大家都用过new Array等方法,那么我们是否考虑过其底部原理是什么?

其实,new Function的实现是这样的:
var function_name=new function(arg1,arg2,...,argN,function_body)

其中arg1,arg2直到argN就是我们需要传递的形参,可以有任意个,最后一个function_body就是我们希望函数执行的函数体,这里函数体必须放在最后,而且参数和函数体都必须用字符串的形式写入。

现在让我们再分析一下上面的代码

    let str = 'return ' + '`Hello ${name}!`';       //关于${name}可以搜索ES6模板字符串进行了解
    let func = new Function('name', str);
    func('Jack') // "Hello Jack!"
    //第二行代码中,第一个参数name表示形参,需要我们调用时传递,第二个参数str是我们自定义的一个字符串"return hello ${name}!",这就相当于如下写法
    function func(name){
        return "hello" + name;
    }

记录每天的学习体会,如有错误或建议,请及时指正。

上一篇 下一篇

猜你喜欢

热点阅读