学习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异常。