非严格模式下color被泄漏到全局作用域中，创建一个全局变量；严格模式下抛出ReferenceError异常

请问在非严格模式下以下JS代码最终的输出是什么？

function change(obj) {
  with(obj) {
    color = 'red'
  }
}
var box = {
  size: '15*15'
}
change(box);
console.log(color);

A
undefined

B
null

C
red

D
报错

正确答案：C

需要明确with会创建一个新的作用域，由于box本身没有color这个变量，所以这个操作相当于往全局定义了一个值为red的全局变量，而不是在box对象中定义，因此可以全局访问color。

with 代码块内部，每个变量首先会指向 obj 对象属性，所以color = 'red' 可以等效于obj.color = red

但是obj身上并没有color这个属性，于是去change函数的作用域寻找color但也没有找到，

最后在全局作用域没有color的情况下，于是直接设置 全局.color = 'red'

这就是数据泄漏的过程，经过一通操作，color泄露到全局

非严格模式下color被泄漏到全局作用域中，创建一个全局变量；严格模式下抛出ReferenceError异常