小白也能看懂的前端知识之七：为什么说eval和with会影响性能

前置知识：
js引擎在执行一段代码之前，会有一个语法分析的阶段，也就是预解析。这个阶段会做语法检查，比较低级的语法错误会在这个阶段被检测到并抛出错误。其次会确定每个变量的作用域，制定出作用域链，并绘制“抽象语法树”，也就是AST。以后的执行以及性能优化都是基于ASt来进行的

eval：

function foo (str, a) {
	eval(str)
 	console.log(a, b)
}
var b = 2
foo('var b = 3', 1) // 1, 3

这段代码其实就相当于

var b = 2
function foo (a) {
 	var b = 3
 	console.log(a, b)
}
foo(1)

本来函数foo的局部作用域中是没有变量b的，会顺着原型链往上找到全局作用域的b,它的值是2。但是因为有了eval的存在，硬是给foo局部作用域内添加了一个局部变量b，导致最后打印出的b的值为3。
那么，eval的作用就是改变eval中代码的作用域

with

function foo (obj) {
	width (obj) {
		a = 2
	}
}
var obj1 = {a: 3}
var obj2 = {b: 4}
foo(obj1)
console.log(obj1.a) // 2
foo(obj2)
console.log(obj2.a) // undefined
console.log(a) // 2

这里，obj1拥有a属性，那么通过with之后，把obj1.a变成了2
由于obj2没有a属性，所以obj2.a是undefined,但是由于with让a泄露到了全局作用域，所以a是2

那么，width的作用就是将width中的变量的局部作用域绑定到形参obj上，并且副作用是泄露到全局作用域。

性能

js的执行和性能优化均依赖于预解析的结果，预解析时如果碰到eval和with，由于作用域会变，索性先不确定eval和width部分代码的作用域。这样也就不能坐性能优化了，如果大量使用，将严重影响代码性能。