JavaScript with

with 語句就可以擴展一個語句的作用域鏈?！狹DN

with 可以指定代碼塊的作用域，特別是在訪問對象成員時，它使得代碼非常簡潔。

1. 基本語法

with (表達式) {
  代碼塊;
}

表達式通常會直接給定一個對象。

var person = {
  name: '小明',
  age: 666,
  major: 'english',
};

with (person) {
  console.log(name); // 輸出："小明"
  console.log(age); // 輸出：666
  console.log(major); // 輸出："english"
}

可以看到，with 代碼塊內(nèi)輸出的變量，實際上是 person 對象的屬性。

在 with 語句中，訪問變量會先去看這個變量是不是在給定的對象中作為屬性存在，如果存在，則取對象中屬性的值，否則繼續(xù)往上層找。

2. 不推薦使用 with

盡管 with 很方便，但 with 會造成諸多的問題。

2.1 造成語義不明

先看這段代碼：

function fn(block, height) {
  with (block) {
    console.log(height);
  }
}

這樣的代碼，有點讓閱讀代碼的人難以理解具體含義。

閱讀代碼的時候，無法確定 height 要取 block 下的屬性，還是要取形參 height。

2.2 造成污染

function fn(obj) {
  with (obj) {
    b = 1;
  }
}

這個場景其實和上面的類似，假如 obj 中沒有屬性 b ，則會造成上層作用域的污染。

事實上很少有前端開發(fā)者會使用 with，在很長篇幅的代碼中，with 會讓代碼邏輯變得不清晰，需要反復(fù)確認作用域。

盡可能的避免使用 with ，使用短變量名和合理的空行來使代碼變得整潔易懂。

var family = [
  {
    seniority: '子',
    name: '小明',
    detail: {
      birth: '1192/01/22',
      sex: 'man',
      hand: 8,
      leg: 44,
      deposit: 9999,
    },
  },
];

// 不好的表述形式
family[0].detail.birth = '1122/22/11';
family[0].detail.sex = '?';
var deposit = family[0].detail.family[0].detail;


// 取出要操作的數(shù)據(jù) 并控制空行
var detail = family[0].detail;

detail.birth = '2312/22/33';
detail.sex = '未知性別';

var deposit = detail.deposit;

3. 小結(jié)

with 的使用需要謹慎，盡量在可控范圍內(nèi)使用。

使用 with 常見的遇到問題的情況，都是恰巧污染了上層作用域，又恰巧污染的是同名的變量，這也產(chǎn)生的 bug 定位也相對困難。

前端框架 Vue 將 template 轉(zhuǎn)化成 render 函數(shù)的時候就用到了 with。