---
title: with
slug: Web/JavaScript/Reference/Statements/with
translation_of: Web/JavaScript/Reference/Statements/with
---
<div class="warning">Использование оператора <code>with не рекомендуемо, т.к. он может быть источником запутанных багов и проблем совместимости</code>. Детальная информация в параграфе "Ambiguity Contra" раздела "Description".</div>

<div>{{jsSidebar("Statements")}}</div>

<p>Инструкция <strong>with</strong> расширяет цепочку областей видимости для инструкции.</p>

<h2 id="Синтаксис">Синтаксис</h2>

<pre class="syntaxbox">with (expression)
  s<em>tatement</em>
</pre>

<dl>
 <dt><code>expression</code></dt>
 <dd>Добавляет данный exrpession в цепочку областей видимости используемое когда исследуется statement. Рекомендуется использовать круглые скобки вокруг выражения.</dd>
 <dt><code>statement</code></dt>
 <dd>Любое выражение. Чтобы использовать несколько выражений, используйте оператор <a href="/en-US/docs/Web/JavaScript/Reference/Statements/block" title="JavaScript/Reference/Statements/block">block</a> statement ({ ... }), чтобы сгруппировать их.</dd>
</dl>

<h2 id="Описание">Описание</h2>

<p>JavaScript ищет unqualified имя, исследуя  цепочку областей видимости, связанную с выполнением скрипта или функции, содержащих это unqualified имя. Оператор 'with' добавляет данный объект в начало цепочки областей видимости в ходе исследования тела его оператора. Если unqualified имя используемое в теле соответствует свойству в цепочке областей видимости, тогда имя привязывается к свойству и объекту, содержащему это свойство. В противном случае возвращается {{jsxref("ReferenceError")}}.</p>

<div class="note">Использование оператора <code>with не рекомендуется</code>, и недопустимо в строгом режиме (<a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode" title="JavaScript/Strict mode">strict mode</a>)  ECMAScript 5 . Рекомендуемой альтернативой может стать связывание объекта, чьи свойства Вы хотели получить, с коротким именем переменной.</div>

<h3 id="Performance_pro_contra">Performance pro &amp; contra</h3>

<p><strong>Pro:</strong> Оператор <strong>with</strong> может помочь уменьшить размер файла, уменьшив необходимость повторять длинную ссылку на объект без снижения производительности.  Изменение цепочки контекста, необходимое для 'with', не требует больших вычислительных затрат.  Использование 'with' избавит интерпретатор от разбора повторных ссылок на объекты. Однако, обратите внимание, что во многих случаях это преимущество может быть достигнуто с помощью временной переменной для хранения ссылки на нужный объект.</p>

<p><strong>Contra:</strong> Оператор <strong>with</strong> заставляет указанный объект быть найденным сначала среди всех имён поиска.  Поэтому все идентификаторы, которые не относятся к указанному объекту, будут обнаруживаться медленнее в блоке «<strong>with</strong>.  Там, где важна производительность, «with» следует использовать только для охвата блоков кода, которые обращаются к членам указанного объекта.</p>

<h3 id="Ambiguity_contra">Ambiguity contra</h3>

<p><strong>Contra:</strong> The <code>with</code> statement makes it hard for a human reader or JavaScript compiler to decide whether an unqualified name will be found along the scope chain, and if so, in which object. So given this example:</p>

<pre class="brush: js">function f(x, o) {
  with (o) {
    console.log(x);
  }
}</pre>

<p>Only when <code>f</code> is called is <code>x</code> either found or not, and if found, either in <code>o</code> or (if no such property exists) in <code>f</code>'s activation object, where <code>x</code> names the first formal argument. If you forget to define <code>x</code> in the object you pass as the second argument, or if there's some similar bug or confusion, you won't get an error -- just unexpected results.</p>

<p><strong>Contra: </strong>Code using <code>with</code> may not be forward compatible, especially when used with something other than a plain object. Consider this example:</p>

<div>
<pre class="brush:js">function f(foo, values) {
  with (foo) {
    console.log(values);
  }
}
</pre>

<p>If you call <code>f([1,2,3], obj)</code> in an ECMAScript 5 environment, then the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>obj</code>. However, ECMAScript 6 introduces a <code>values</code> property on <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/prototype">Array.prototype</a></code> (so that it will be available on every array). So, in a JavaScript environment that supports ECMAScript 6, the <code>values</code> reference inside the <code>with</code> statement will resolve to <code>[1,2,3].values</code>.</p>
</div>

<h2 id="Примеры">Примеры</h2>

<h3 id="Использование_with">Использование <code>with</code></h3>

<p>Последующее использование <strong><code>with</code></strong> указывает что Объект <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math" title="JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> является объектом по умолчанию. Следующие инструкции  за <strong><code>with</code></strong>  ссылаются на свойства <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/PI" title="JavaScript/Reference/Global_Objects/Math/PI">PI</a><font face="Open Sans, arial, sans-serif"> и методы </font></code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/cos" title="JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> и <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/sin" title="JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a>, без указания объекта. JavaScript предполагает Объект <code>Math</code> для этих справок.</p>

<pre class="brush:js">var a, x, y;
var r = 10;

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

<h2 id="Спецификации">Спецификации</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Спецификация</th>
   <th scope="col">Статус</th>
   <th scope="col">Комментарий</th>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES6', '#sec-with-statement', 'with statement')}}</td>
   <td>{{Spec2('ES6')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES5.1', '#sec-12.10', 'with statement')}}</td>
   <td>{{Spec2('ES5.1')}}</td>
   <td>Now forbidden in strict mode.</td>
  </tr>
  <tr>
   <td>{{SpecName('ES3', '#sec-12.10', 'with statement')}}</td>
   <td>{{Spec2('ES3')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td>{{SpecName('ES1', '#sec-12.10', 'with statement')}}</td>
   <td>{{Spec2('ES1')}}</td>
   <td>Начальное определение</td>
  </tr>
 </tbody>
</table>

<h2 id="Совместимость_браузеров">Совместимость браузеров</h2>

<p>{{Compat}}</p>

<h2 id="Смотрите_также">Смотрите также</h2>

<ul>
 <li>{{jsxref("Statements/block", "block")}}</li>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Functions_and_function_scope/Strict_mode">Strict mode</a></li>
 <li>{{jsxref("Symbol.unscopables")}}</li>
 <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
</ul>