Function的一些结论与eval函数.

1.1 函数的创建方式

• 1 函数声明
• 2 函数表达式
• 3 new Function

 

 

// 1
function foo() {}

// 2
var foo = function() {};

// 3 

new Function使用
// 语法

var 函数名 = new Function( arg1, arg2, arg3, ..., argN, body );

// 解释
//     Function 构造函数所有的参数都是字符串类型的
// 除了最后一个参数, 所有的参数都作为生成函数的参数. 这里可以没有参数
// 最后一个参数也是字符串, 表示的是生成函数的函数体

function max( a, b )  {
   return a > b ? a : b;
}

var fnMax = new Function( 'a', 'b', 'return a > b ? a : b;' );

var res = fnMax( 1, 2 );

1, 有两个参数的时候

function sum( a, b ) {
   return a + b;
}
var fnSum = new Function( 'a', 'b', 'return a + b;' );

var res = fnSum( 123, 456 );
alert( res );

2, 多个参数的时候

/*
function sum() {
   var total = 0, 
      args = arguments, 
      len = args.length;
   for ( var i = 0; i < len; i++ ) {
      total += args[ i ];
   }
   return total;
}

var res = sum( 1, 2, 3, 4, 5 );
alert( res );
*/

// new Function

var fnSum = new Function( 'var total = 0, args = arguments, len = args.length;for ( var i = 0; i < len; i++ ) {total += args[ i ];}return total;' );

var res = fnSum( -1, 1,1,1,1,1,1 );
alert ( res );

// 解决这个问题比较晦涩, 代码难以维护
// 给出两个解决方案
// 1, 传统
// 将字符串进行换行分割

// 将字符串进行换行分割
var fnSum = new Function(
   'var total = 0, ' +
   '  args = arguments, ' + 
   '  len = args.length; ' +
   'for ( var i = 0; i < len; i++ ) { ' +
   '  total += args[ i ]; ' +
   '} ' +
   'return total; '
);
var res = fnSum( 1,1,1,1,1,1 );
alert ( res );

// 2, 吸收了 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 );
      
   };
   
   
</script>

// 使用 Function 和 使用 eval
  他们都有一个共同 的特点, 可以将字符串作为 js 代码来执行

      区别

　　　　考虑效率使用eval

　　　　考虑安全性用Function

　　　　eval 会造成 全局污染

// eval 函数的语法
// eval( 字符串 )
// 这个函数在调用的时候会将字符串作为 js 代码来执行

 var a = 10;
 eval( 'var a = 10;' );

console.log( a );

// 应用方向比较的广泛, 可以利用该方法实现动态操作
// 1, ajax
// 服务器与浏览器交互, 服务器发给浏览器的数据是一个字符串
// 那么要执行这个代码, 就需要将字符串作为 代码执行, 这个就要用到 eval

var str = '{ name: "jim", age: 19, gender: "男" }';
// '[{{}},{{},[]}]'
// 当从服务器拿到字符串以后, 理论上应该将其作为数据对象使用
// 解析字符串
// 传统的做法
/*
str = str.replace('{', "").replace("}", "");
// ' name: "jim", age: 19, gender: "男" '
var arr = str.split( ',' );
// [ ' name: "jim"', ' age: 19', ' gender: "男" ' ]

var o = {};
for ( var k in arr ) {
   var tempArr = arr[ k ].split( ':' );
   
   // 去空格
   var key = tempArr[ 0 ].trim();
   var value = tempArr[ 1 ].trim();
   
   o[ key ] = value;
   
}


console.log( o.name );
console.log( o.age );
console.log( o.gender );
*/

var o1 = {  };

// var o2 = eval( "(" + str + ")" );

var o2 = eval(  str );

console.log( o2.name );
console.log( o2.age );
console.log( o2.gender );

// eval("(" + str + ")") 小括号解释：
// () 会被解释成代码块而非对象字面量

• JavaScript中{}的用法：

1 代码块，用来包裹代码，组织语句
2 对象直接量/对象字面量

• 使用eval将字符串转化为对象的两种方式

// 1
eval("var o = " + str);
// var obj = {};

// 2
var o = eval("(" + str + ")");

// 然后就可以把这个字符串当作是对象来使用了