关于new Function使用

Posted 2020-07-05 Go web

一直对Function()一知半解，今日就Function()的使用做一下总结

一、函数实际是功能完整的对象，用Fucntion()直接创建函数。

语法规则：
    var 函数名 = new Function( arg1, arg2, arg3, ..., argN, body );
    解释：
    Function 构造函数所有的参数都是字符串类型的，body是生成函数的函数体。

实例：求多个参数的和

var fnSum = new Function( 
                \'var total = 0,args = arguments;for (var i = 0; i < args.length; i++ ) {total += args[ i ];}return total;\' );
            var res = fnSum(4,5,6);
            alert ( res );

View Code

注意：以上代码不允许有空格

对以上写法加以改进

第一种写法（传统）：将字符串分割

var fnSum = new Function(
                \'var total = 0, \' +
                \'    args = arguments;\' + 
                \'for ( var i = 0; i < args.length; i++ ) { \' +
                \'    total += args[ i ]; \' +
                \'} \' +
                \'return total; \'
            );
            var res = fnSum( 1,2,3,4 );
            alert ( res );//10

View Code

第二种写法：吸收了MVC思想

<script id="engin">             
                 /*var total = 0, 
                    args = arguments, 
                    len = args.length;
                for ( var i = 0; i < len; i++ ) {
                    total += args[ i ];
                }
                return total;*/             
        </script>
        <script>
            var getBody = function ( id ) {
            var script = document.getElementById( id );
            var body = script.innerhtml.replace(\'/*\', \'\').replace(\'*/\', \'\');        
            script.parentNode.removeChild( script );
            return body;
        }
            onload = function () {                
                var fnSum = new Function( getBody( \'engin\' ) );                
                var res = fnSum( 1, 2, 3 );            
                alert( res );    //6
            };        

View Code

二、Function 和 eval 都可以实现字符串执行代码在实际开发中, 如果考虑效率可以直接使用 eval，但是考虑安全性则建议使用 Function

var str = \'{ name: "jim" }\';
eval( \'var o = \' + str )
//var o = eval( \'(\' + str + \')\' ); 等同于上句
console.log(o);//Object {name: "jim"}

 

eval( \'var a = 10;\' );  // eval 会污染全局变量
   eval 等价于 var a = 10;//全局变量

    mdn：https://developer.mozilla.org/zh-CN/docs/Web/javascript/Reference/Global_Objects/eval

eval()是一个顶级函数并且跟任何对象无关。

eval()的参数是一个字符串。如果字符串表示了一个表达式，eval()会对表达式求值。如果参数表示了一个或多个JavaScript声明， 那么eval()会执行声明。不要调用eval()来为算数表达式求值； JavaScript 会自动为算数表达式求值。

如果要将算数表达式构造成为一个字符串，你可以用eval()在随后对其求值。比如，你有一个变量 x ，你可以通过一个字符串表达式来对涉及x的表达式延迟求值，将 "3 * x + 2"，当作变量，通过在脚本中调用eval()，随后求值。

如果参数不是字符串，eval()将会将参数原封不动的返回。在下面的例子中，字符串构造器是指定的，eval()返回了字符串对象而不是对字符串求值。

eval() 是一个危险的函数， 它可以像拥有调用者的权力一样调用代码。如果你使用了字符串来运行eval()，那么你的代码可能被恶意方（不怀好意的人）影响, 通过在使用方的机器上使用恶意代码，可能让你失去在网页或者扩展程序上的权限 

 在JS中将JSON的字符串解析成JSON对象格式，一般有三种方式：

1.一种为使用eval()函数。

var str = \'{ "name": "yy", "gender": "girl" }\'; 
var obj = eval(\'(\'+str+\')\');
console.log(obj)//Object {name: "yy", gender: "girl"}

 

2. 使用Function对象来进行返回解析。

var str = \'{ "name": "yy", "gender": "girl" }\'; 
var obj = (new Function(\'\',\'return\'+str))();
console.log(obj);//Object {name: "yy", gender: "girl"}

 

3.使用JSON.parse()

var str = \'{ "name": "yy", "gender": "girl" }\'; 
var obj = JSON.parse(str);
console.log(obj);//Object {name: "yy", gender: "girl"}