JavaScript 中 "with" 语句的相关内容整理

语法

with (expression)
  statement

利弊

使用得当可规避重复而冗长的对象引用以减小代码量。

var a, x, y;
var r = 10;

with (Math) {
  a = PI * r * r;
  x = r * cos(PI);
  y = r * sin(PI / 2);
}

---

在 with 语句中查询变量、更改变量似乎十分方便，这很容易给人一种可以轻松操纵对象的错觉，直到你试图添加一个新的变量，啊哦。

var o = {
  x : 10
}

with (o) {
  x = 5;
  y = 7;
}

console.log(o.x);        // 5
console.log(o.y);        // undefined
console.log(window.y);   // 7

---

with 语句将指定对象的执行环境提升到作用域链的最前端，因此语句中若包含非指定对象执行环境中的变量，会降低查询性能。

JavaScript引擎会在编译阶段进行数项的性能优化。其中有些优化依赖于能够根据代码的词法进行静态分析，并预先确定所有变量和函数的定义位置，才能在执行过程中快速找到标识符。
但如果引擎在代码中发现了with，它只能简单地假设关于标识符位置的判断都是无效的，因为无法知道传递给with用来创建新词法作用域的对象的内容到底是什么。
最悲观的情况是如果出现了with，所有的优化可能都是无意义的，因此最简单的做法就是完全不做任何优化。
如果代码中大量使用with，那么运行起来一定会变得非常慢。无论引擎多聪明，试图将这些悲观情况的副作用限制在最小范围内，也无法避免如果没有这些优化，代码会运行得更慢这个事实。

---

使用 with 语句，在某些语义不明的情况下会降低代码可读性。

function fn1(x, o) {
  with (o) 
    print(x);
}

变量 在 with 语句中的各种可能，总之是，读者读来不易，编译器也觉得挺烦的。

但不排除在某些情况下它也可以提高代码的可读性，譬如说遇到了这样普遍使用某一符号在阅读上易造成干扰的框架：

_.People().sort(_.score(_.isa(_.Parent)),'Surname','Forename');

这时使用 with 语句，会感觉世界都明朗了起来：

with (_) {
    ...
    People().sort(score(isa(Parent)),'Surname','Forename');
    ...
}

---

with 语句无法向前兼容。

function fn2(arr, values) {
  with (arr)
    console.log(values);
}

在 ECMAScript 6 标准中，values 是 Array 对象原型的新属性。则调用 fn2([1,2,3], obj) 时，with 语句中变量 values 的指向会出现与在 ECMAScript 5 环境下不同的情况：前者指向 arr.values，后者指向传入的第二个参数 obj。

使用

利用了 with 语句延长作用域链的特性，最基本的使用方法。

var x = 20;
var o = {
  x : 10
}

with (o) {
  x = 5;
}
console.log(x);      // 20
console.log(o.x);    // 5

---

with 语句可以嵌套使用。

var box = {
  weight: 10,
  size: {
    width: 5,
    height: 7
  }
}

with(box) {
  with(size) {
    console.log(width * height / weight);    
  }
}

---

目前多使用临时变量方案替代 with 语句以简化代码。

var s = elem.style;
s.position = 'absolute';
s.top = '10px';
s.left = '0';

参考

• MDN > JavaScript > Statements and declarations > with

• JavaScript Tutorial > The "with" operator

• with Statement Considered Harmful

• "with" keyword in javascript

• with: The World's Most Misunderstood Statement

• with: Some Good Example

• JavaScript高级程序设计-第3版

• 你不知道的JavaScript-上卷