eval()与new Function()

[pfan123]

eval()与new Function()

eval

eval 接受字符串参数，可将任意字符串当做一个JavaScript代码来执行。使用 eval存在一些安全隐患，可能执行被篡改过的代码，严格模式是不允许的。

function f(){
	var foo = 1
    eval( 'foo++' );  //不是一种沙盒状态，会影响上下级作用域，可读取上级作用域，影响下层作用域
    console.log( foo ); // 1
}

eval实际使用转换JSON

var jsonStr = '{ "age": 20, "name": "jack" }';
eval('(' + jsonStr + ')');
//{age: 20, name: "jack"}

function getData(data){
	return data
}
//注意这里用了上面的作用域 getData方法
eval('try{getData({ "age": 20, "name": "jack" })}catch(e){}')

//{age: 20, name: "jack"}

为什么要加括号呢？
因为js中{}通常是表示一个语句块，eval只会计算语句块内的值进行返回。加上括号就变成一个整体的表达式。

console.log( eval('{}') );      // undefind
console.log( eval('({})') );    // Object {}

Function 构造函数

Function 构造函数 创建一个新的Function对象。 在 JavaScript 中, 每个函数实际上都是一个Function对象。

语法：new Function ([arg1[, arg2[, ...argN]],] functionBody)

• arg1, arg2, ... argN，被函数使用的参数的名称必须是合法命名的。参数名称是一个有效的JavaScript标识符的字符串，或者一个用逗号分隔的有效字符串的列表;例如“×”，“theValue”，或“A，B”。
• functionBody，一个含有包括函数定义的JavaScript语句的字符串。

var add = new Function('a', 'b', 'return a+b;');
console.log( add(2, 3) );    // 5

使用Function构造器生成的Function对象是在函数创建时解析的。这比你使用函数声明或者函数表达式(function)并在你的代码中调用更为低效，因为使用后者创建的函数是跟其他代码一起解析的。

注意: 使用Function构造器生成的函数，并不会在创建它们的上下文中创建闭包；它们一般在全局作用域中被创建。当运行这些函数的时候，它们只能访问自己的本地变量和全局变量，不能访问Function构造器被调用生成的上下文的作用域。

var jsonStr = '{ "age": 20, "name": "jack" }',
    json = (new Function('return ' + jsonStr))();

//Function构造器被调用生成的上下文的作用域,只能访问自己的本地变量和全局变量  
var jsonStr = 'getData({ "age": 20, "name": "jack" })'
new Function('function getData(data){return data};return ' + jsonStr)()   
// Object {age: 20, name: "jack"}, 记住jsonStr不能含try{}catch(e){}

new Function()三种运行形势

以下三种形式输出结果是等价的

new Function()()
(new Function())()
Function()()

示例：

//第一种
var jsonStr = 'getData({ "age": 20, "name": "jack" })'
(new Function('function getData(data){return data};return ' + jsonStr))() 

//第二种
var jsonStr = 'getData({ "age": 20, "name": "jack" })'
new Function('function getData(data){return data};return ' + jsonStr)()  

//第三种
var jsonStr = 'getData({ "age": 20, "name": "jack" })'
Function('function getData(data){return data};return ' + jsonStr)() 

eval 与 new Function 区别

1.eval会影响到作用域（访问和修改它外部作用域的变化），而 Function 更多地类似于一个沙盒。无论在哪里执行 Function，它都仅仅能全局作用域，因此对局部变量影响较小
2.使用eval经常会自动生成为全局变量，因封装即时函数

ps: jQuery.parseJSON的兼容实现用的是new Function()

引起小聊jsonp（数据解析）

jsonp的原理：

• 1、浏览器的同源策略把跨域请求禁止（Ajax直接请求普通文件存在跨域无权限访问的问题，无论是静态页面、动态网页、web服务、WCF，只要是跨域请求，一律不允许）
• 2、HTML的<script>标签是例外，可以突破同源策略从其他来源获取数据（bug级的存在，然后拥有"src"这个属性的标签都拥有跨域的能力，比如<script>、、<iframe>）
• 3、为了便于客户端使用数据，逐渐形成了一种非正式传输协议，称作JSONP，该协议的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据

Function
【译】以 eval() 和 new Function() 执行JavaScript代码
神奇的eval()与new Function()
说说JSON和JSONP，也许你会豁然开朗，含jQuery用例