简单说 eval 函数

说明

我觉得eval( )函数是一个比较有趣的函数,虽然我平常基本用不到它。但我们还是来说说吧!

eval( ) 函数可计算某个字符串,并执行其中的的 JavaScript 代码。
就是说,有一段字符串,把它放在eval()中就可以当 JavaScript代码执行了。

解释

var a=1;
var b=2;
eval(a+b); //返回 3

很简单吧,我们继续说,eval( )经常会用到的地方就是解析json 字符串了,比如这样

var jsonStr='{j:1, s:2, o:3, n:4}';
console.log(jsonStr.j);   //undefined
var jsonObj=eval("("+jsonStr+")");//转换为json对象
console.log(jsonObj.j);   //1

这段代码应该是足够清楚了,jsonStr变量原来是字符串,所以没法用 . 和 [ ] 来获取属性,但是我们用了eval( )之后,它变为对象了,所以我们用 . 和 [ ] 来获取属性 就能获取到了。
嗯,但是这不是重点,重点是eval("("+jsonStr+")"); 中为什么要拼接一个(),看代码

var jsonEx=" 'j'+1 ";
var jsonSt='{j:1, s:2, o:3, n:4}';
console.log( eval(jsonEx) );  //返回j1
console.log( eval(jsonSt) );  //报错
console.log( eval("("+jsonSt+")") );   //返回 Object

没有加()会报错,为什么呢?
这是因为json是{ }的方式开始和结束的,它会被当成一个语句块来处理,{ }里面的东西都被执行了,所以为了获得一个对象,必须强制性的将它转换成一种表达式。
加上圆括号的目的也就是让eval( )函数在处理JavaScript代码的时候强制将括号内的表达式(expression)转化为对象,而不是作为语句(statement)来执行。

我们再来看一段奇怪的代码

var obj={
    //number 属性的值是随机的,只是知道它的范围是 1<= number <=3
    number:Math.floor(Math.random()*3+1)
}

//3段执行不同代码的函数
function fn_1(){
    console.log(1);
};
function fn_2(){
    console.log(5);
};
function fn_3(){
    console.log(15);
};

num=obj.number;
eval('fn_'+num)();

obj对象有一个number属性,它的值是随机的,要根据这个值,去决定执行哪个函数,这里用eval( ) 函数解决了这个问题,当然,这并不是唯一的解决方案。只是告诉大家如果遇到这样问题,可以用eval( )解决。

而eval( )函数还是有点缺点的
1、可读性不好
2、不容易调试
3、性能比较低

总结

相信大家已经明白eval( )函数的用法,它就是能把字符串当JavaScript代码执行的一个函数。

参考文章:
JavaScript立即执行函数的解释分析(2)—函数表达式与函数声明的区别
JavaScript立即执行函数的解释分析(3)—谈谈圆括号()
JavaScript eval() 函数

简单说 eval 函数_第1张图片

你可能感兴趣的:(JavaScript,前端简单说)