new Function 和 with -自我记录

426 阅读1分钟

      学习vue2源码渲染这块的过程中,首先使用正则将html字符串解析成ast语法树,随后将ast转变成了js语法,这里面使用了模板引擎,(所有模板引擎靠的是new function和with)

      那么我们来看看new Function

let func = new Function ([arg1, arg2, ...argN], functionBody);

创建的时候首先传入的是参数,然后在传入执行的函数体

let test = new Function('v', 'd', 'return v + d');

 test(1, 2); // 3

也可以直接传入函数体(传入的是一个字符串)

let test_1 = new Function('alert("function")');

new Function可以将传入的字符串变为一个可执行的函数

而vue中这么做是创建了一个和全局平行的作用域,可以隔离作用域

    with语法

扩展一个语句的作用域链。

with (expression) {
    statement
}

简单点说就是隔离作用域,让statement去expression取值,

      mdn中的介绍比较具体,

'with'语句将某个对象添加到作用域链的顶部,如果在statement(函数内部的使用)中有某个未使用命名空间的变量,跟作用域链中的某个属性同名,则这个变量将指向这个属性值。如果沒有同名的属性,则将拋出ReferenceError异常。