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