• 技术文章 >web前端 >js教程

    聊聊JavaScript中eval()函数的用法

    青灯夜游青灯夜游2021-05-25 10:14:41转载571
    本篇文章给大家介绍一下JavaScript中eval()函数的用法。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    1. eval函数有什么用?

    调用eval函数,可以将其参数作为javascript程序进行解释。换句话说,eval可以把它的参数当做代码

    来执行。

    例子

    function f(x) {
        eval('var y=x');
        console.log('y:', y);
    }
    f('hello');//y:hello

    在这个例子中,eval将它的string参数var y=x作为一行代码执行了,在函数f内部声明了一个局部变量y。这和

    function f(x) {
        var y=x;
        console.log('y:', y);
    }
    f('hello');//y:hello

    的执行效果基本相同。

    2. 避免使用eval函数创建局部变量

    允许eval函数干扰作用域,是一个相当错误的做法。这种做法会使一段代码变得难以理解,并且不再安全。下面这个例子便赋予了外部调用者修改局部变量,改变局部作用域的能力。

    例子

    let g = '全局变量'
    function f(src) {
        eval(src);
        console.log('g:', g);
    }
    //以上为源代码
    f("var g= '局部变量'");//g:局部变量
    f("var y= '局部变量'");//g:全局变量

    当我们把一个没有在源代码中定义的变量y,传入eval函数时,这段代码执行的结果将变得难以预测。

    保证eval函数不影响外部作用域的一个简单方法是使用嵌套的作用域。ES5的严格模式便是这样做的。

    例子

    let g = '全局变量'
    function f(src) {
       (()=> eval(src))();//在嵌套作用域中执行eval
        console.log('g:', g);
    }
    //以上为源代码
    f("var g= '局部变量'");//g:全局变量
    f("var y= '局部变量'");//g:全局变量

    3. eval函数的两种调用方式

    3.1 直接调用方式:

    当函数调用涉及eval标识符时,可以称为直接调用。此时,被执行的程序(eval的参数)具有完全访问调用者局部作用域的权限。

    例子

    const g = '全局变量';
    function foo() {
        const g = '局部变量';
        console.log(eval('g'));//直接调用,可以访问到foo的局部作用域,所以输出的是局部变量g
    }
    foo(); //局部变量

    3.2 间接调用方式:

    绑定eval到另一个变量名,在通过该变量调用eval,称之为间接调用。此时,被执行的程序(eval的参数)失去对局部作用域的访问能力。利用逗号操作符,,可以实现间接调用的简洁写法。

    例子

    const g = '全局变量';
    function foo2() {
        const g = '局部变量';
        cont test = eval;
        //间接调用,不能访问函数内部的变量g
        console.log(test('g')); //全局变量
        //间接调用简洁方式
        console.log((0, eval)('g'));//全局变量
    }

    更多编程相关知识,请访问:编程入门!!

    以上就是聊聊JavaScript中eval()函数的用法的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:segmentfault,如有侵犯,请联系admin@php.cn删除
    专题推荐:javascript eval() 函数 es6
    上一篇:浅谈浏览器中本地运行Node.js的方法 下一篇:Angular CLI中的在线和离线安装
    大前端线上培训班

    相关文章推荐

    • javascript如何将时间字符串转化为时间• 详解JavaScript中怎么实现队列结构• 详解javascript中动态合并两个对象的属性• 学会这20+个JavaScript单行代码,让你像专业人士一样编写代码• JavaScript中解析parseInt()的怪异行为

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网