Устаревшая конструкция "with"

Конструкция with позволяет использовать в качестве области видимости для переменных произвольный объект.

В современном JavaScript от этой конструкции отказались. С use strict она не работает, но её ещё можно найти в старом коде, так что стоит познакомиться с ней, чтобы если что – понимать, о чём речь.

Синтаксис:

with(obj) {
  ...код...
}

Любое обращение к переменной внутри with сначала ищет её среди свойств obj, а только потом – вне with.

Пример

В примере ниже переменная будет взята не из глобальной области, а из obj:

var a = 5;

var obj = {
  a: 10
};

with(obj) {
    alert( a ); // 10, из obj
  }

Попробуем получить переменную, которой в obj нет:

var b = 1;

var obj = {
  a: 10
};

with(obj) {
    alert( b ); // 1, из window
  }

Здесь интерпретатор сначала проверяет наличие obj.b, не находит и идёт вне with.

Особенно забавно выглядит применение вложенных with:

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

with(obj) {
  with(size) { // size будет взят из obj
    alert( width * height / weight ); // width,height из size, weight из obj
  }
}

Свойства из разных объектов используются как обычные переменные… Магия! Порядок поиска переменных в выделенном коде: size => obj => window.

Изменения переменной

При использовании with, как и во вложенных функциях – переменная изменяется в той области, где была найдена.

Например:

var obj = {
  a: 10
}

with(obj) {
    a = 20;
  }
alert( obj.a ); // 20, переменная была изменена в объекте

Почему отказались от with?

Есть несколько причин.

1. В современном стандарте JavaScript отказались от with, потому что конструкция with подвержена ошибкам и непрозрачна.

   Проблемы возникают в том случае, когда в with(obj) присваивается переменная, которая по замыслу должна быть в свойствах obj, но её там нет.

   Например:

   var obj = {
     weight: 10
   };
   
   with(obj) {
     weight = 20; // (1)
     size = 35; // (2)
   }
   
   alert( obj.size );
   alert( window.size );

   В строке (2) присваивается свойство, отсутствующее в obj. В результате интерпретатор, не найдя его, создаёт новую глобальную переменную window.size.

   Такие ошибки редки, но очень сложны в отладке, особенно если size изменилась не в window, а где-нибудь во внешнем LexicalEnvironment.

2. Ещё одна причина – алгоритмы сжатия JavaScript не любят with. Перед выкладкой на сервер JavaScript сжимают. Для этого есть много инструментов, например Closure Compiler и UglifyJS. Обычно они переименовывают локальные переменные в более короткие имена, но не свойства объектов. С конструкцией with до запуска кода непонятно – откуда будет взята переменная. Поэтому выходит, что, на всякий случай (если это свойство), лучше её не переименовывать. Таким образом, качество сжатия кода страдает.

3. Ну и, наконец, производительность – усложнение поиска переменной из-за with влечёт дополнительные накладные расходы.

   Современные движки применяют много внутренних оптимизаций, ряд которых не может быть применён к коду, в котором есть with.

   Вот, к примеру, запустите этот код в современном браузере. Производительность функции fast существенно отличается от slow с пустым(!) with. И дело тут именно в with, т.к. наличие этой конструкции препятствует оптимизации.

   var i = 0;
   
   function fast() {
     i++;
   }
   
   function slow() {
     with(i) {}
     i++;
   }
   
   var time = performance.now();
   while (i < 1000000) fast();
   alert( "Без with: " + (performance.now() - time) );
   
   var time = performance.now();
   i = 0;
   while (i < 1000000) slow();
   alert( "С with: " + (performance.now() - time) );

Замена with

Вместо with рекомендуется использовать временную переменную, например:

/* вместо
with(elem.style) {
  top = '10px';
  left = '20px';
}
*/

var s = elem.style;

s.top = '10px';
s.left = '0';

Это не так элегантно, но убирает лишний уровень вложенности и абсолютно точно понятно, что будет происходить и куда присвоятся свойства.

Итого

• Конструкция with(obj) { ... } использует obj как дополнительную область видимости. Все переменные, к которым идёт обращение внутри блока, сначала ищутся в obj.
• Конструкция with устарела и не рекомендуется по ряду причин. Избегайте её.