• Function 和 eval 知识点总结


    1 Function

    1.1 函数的创建方式

    • 1 函数声明
    • 2 函数表达式
    • 3 new Function
    // 1
    function foo() {}
    
    // 2
    var foo = function() {};
    
    • 结论:函数也是对象

    1.2 任意函数都是Function的实例

    通过 new Function,得出:函数也是对象
    
    • instanceof 再解释
    console.log(Array instanceof Function);
    function PersON() {}
    console.log(PersON instanceof Function);
    console.log(Date instanceof Function);
    console.log(Object instanceof Function);
    
    // Function也是函数
    console.log(Function instanceof Function);
    

    1.3 new Function使用

    • 语法
    // 伪代码
    var funcName = new Function(arg1, arg2, ..., argN, functionbody);
    
    // 示例
    var func = new Function("a", "console.log(a)");
    func();
    
    • 注意点
    1 所有的参数都是字符串类型
    2 除了最后一个参数,所有的参数都作为生成函数的参数
    3 参数可省略
    4 最后一个参数,表示函数体
    
    • 案例:求两个数的最大值
    // 原始写法
    function max(a, b) {
        return a > b ? a : b;
    }
    
    var fnMax = new Function("a", "b", "return a > b ? a : b;");
    
    var ret = fnMax(3, 8);
    console.log(ret);
    
    • 练习:求传入数字的和
    1、有两个参数?
    2、多个参数?a.拼接字符串 b.模板(不做要求)
    
    // 两个参数
    var fncSum  = new Function("a", "b", "return a + b;");
    fncSum(1, 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;'
    );
    
    • 使用模板(不做要求)
    <script type="text/html" 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;
        script.parentNode.removeChild(script);
        return body;
    }
    
    var fnSum = new Function(getBody('engin'));
    var res = fnSum(1, 2, 1);
    alert(res);
    
    </script>
    

    1.4 Function 和 eval

    共同点:都可以将字符串作为js代码来执行
    

    1.4.1 eval

    • 语法:eval("字符串");
    • 作用:这个函数在调用的时候会将字符串作为js代码来执行
    eval("var a = 10;");
    console.log(a);
    
    • 应用场景 - Ajax
    // eval
    var str = '{ name:"jim", age: 18, gender: "男"}';
    var ret = eval("(" + str + ")");
    console.log(ret.name);
    console.log(ret.age);
    console.log(ret.gender);
    
    // eval("(" + str + ")") 小括号解释:
    // {} 会被解释成代码块而非对象字面量
    
    • JavaScript中{}的用法:
    1 代码块,用来包裹代码,组织语句
    2 对象直接量/对象字面量
    
    var str = '{ "name":"jim", "age": 18, "gender": "男"}';
    eval("var o = " + str);
    console.log(o);
    
    • 使用eval将字符串转化为对象的两种方式
    // 1
    eval("var o = " + str);
    // var obj = {};
    
    // 2
    var o = eval("(" + str + ")");
    
    // 然后就可以把这个字符串当作是对象来使用了
    

    1.4.2 Function和eval的区别

    • 考虑效率使用eval
    • 考虑安全性用Function
    • eval 会造成 全局污染
    // a 是全局变量
    eval("var a = 1;");
    // b 是局部变量
    var fn = new Function("var b = 1;");
    fn();
    
    console.log(a);
    console.log(b);
    
    • 使用new Function 处理 json字符串
    var str = "{name: 'jim'}";
    var o = ( new Function("return " + str) )();
    // var fn = new Function("return " + str);
    // var o = fn();
    
    console.log(o.name);
    
    • 实际项目中转化JSON:使用 JSON.parse()
    • 如果有兼容性问题,此时,json2.js
  • 相关阅读:
    透明PNG格式图片兼容IE6浏览器
    CSS英文单词强制换行
    未能加载文件或程序集“Oracle.DataAccess, Version=2.111.7.0, Culture=neutral, PublicKeyToken=89b483f429c47342”或它的某一个依赖项。试图加载格式不正确的程序
    使用IIS 无法命中Application_Start中的断点问题
    win7 x64 后蓝牙u盘搜索不到其他设备
    使用Html.BeginForm<T>后客户端脚本验证出错的问题
    为什么使用sealed修饰符
    vs2010调试时发生监视显示表达式为false,但却进入了if块中
    MicrosoftMvcJQueryValidation.js 启用客户端验证,form无法提交
    Jquery 操作页面中iframe自动跟随窗口大小变化,而不出现滚动条,只在iframe内部出滚动条
  • 原文地址:https://www.cnblogs.com/lsy0403/p/5866593.html
Copyright © 2020-2023  润新知