---
title: with
slug: Web/JavaScript/Reference/Statements/with
tags:
  - JavaScript
  - Оператор
  - не рекомендований
translation_of: Web/JavaScript/Reference/Statements/with
---
<div class="warning">Використання оператора <code>with</code> не рекомендоване, оскільки може бути джерелом заплутаних помилок та проблем із сумісністю. Дивіться абзац "Мінуси для однозначності" у розділі "Опис", щоб дізнатись більше.</div>

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

<p>Оператор <strong>with</strong> розширює ланцюжок областей видимості для інструкції.</p>

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

<pre class="syntaxbox notranslate">with (expression)
  <em>statement</em>
</pre>

<dl>
 <dt><code>expression</code></dt>
 <dd>Додає наданий вираз до ланцюжка областей видимості, який використовується під час обчислення інструкції. Круглі дужки навколо виразу є обов'язковими.</dd>
 <dt><code>statement</code></dt>
 <dd>Будь-яка інструкція. Щоб виконати більше однієї інструкції, скористайтесь <a href="/uk/docs/Web/JavaScript/Reference/Statements/block">блоком</a> ({ ... }), щоб згрупувати ці інструкції.</dd>
</dl>

<h2 id="Опис">Опис</h2>

<p>JavaScript шукає некваліфіковане ім'я у ланцюжку областей видимості, пов'язаних з контекстом виконання скрипта чи функції, що містить це некваліфіковане ім'я. Оператор 'with' додає наданий об'єкт у початок цього ланцюжка під час обчислення своїх інструкцій. Якщо некваліфіковане ім'я, що використовується у інструкціях, співпадає з властивістю з ланцюжка областей видимості, це ім'я зв'язується з властивістю та об'єктом, що містить цю властивість. Інакше, викидається помилка {{jsxref("ReferenceError")}}.</p>

<div class="note">Використання <code>with</code> не рекомендоване та заборонене у <a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">строгому режимі </a>ECMAScript 5. Рекомендованою альтернативою є присвоєння об'єкта, чиї властивості вам потрібні, тимчасовій змінній.</div>

<h3 id="Плюси_та_мінуси_для_швидкодії">Плюси та мінуси для швидкодії</h3>

<p><strong>Плюси:</strong> Оператор <code>with</code> може допомогти зменшити розмір файлу, скорочуючи необхідність повторювати довгі посилання на об'єкти без погіршення швидкодії. Зміна ланцюжка областей видимості, спричинена використанням 'with', не є затратною для обчислення. Використання 'with' звільнить інтерпретатор від розбору повторюваних посилань на об'єкти. Зауважте, однак, що у багатьох випадках ця перевага досягається використанням тимчасової змінної для зберігання посилання на необхідний об'єкт.</p>

<p><strong>Мінуси:</strong> Оператор <code>with</code> спочатку спричиняє пошук усіх імен на вказаному об'єкті. Таким чином, усі ідентифікатори, що не є членами вказаного об'єкта, шукатимуться у блоці 'with' набагато повільніше. У випадках, коли швидкодія важлива, 'with' слід використовувати лише у тих блоках коду, які звертаються до членів вказаного об'єкта.</p>

<h3 id="Мінуси_для_однозначності">Мінуси для однозначності</h3>

<p><strong>Мінус:</strong> З оператором <code>with</code> стає важко зрозуміти, людині чи компілятору JavaScript, чи буде некваліфіковане ім'я знайдене у ланцюжку областей видимості, і, якщо так, то в якому об'єкті. Отже, у наступному прикладі:</p>

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

<p>Лише коли функція <code>f</code> викликана, змінна <code>x</code> або буде знайдена, або ні, а, якщо буде знайдена, то або в <code>o</code>, або (якщо такої властивості не існує) у об'єкті активації <code>f</code>, де <code>x</code> іменує перший формальний аргумент. Якщо ви забудете визначити <code>x</code> у об'єкті, який передаєте другим аргументом, або в разі якоїсь схожої помилки чи плутанини, ви не отримаєте помилку -- лише неочікувані результати.</p>

<p><strong>Мінус: </strong>Код, що використовує <code>with</code>, може бути несумісним знизу вгору, особливо при використанні з чимось інакшим, ніж простий об'єкт. Розглянемо цей приклад:</p>

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

<p>Якщо ви викличете <code>f([1,2,3], obj)</code> у середовищі ECMAScript 5, то посилання <code>values</code> всередині блоку <code>with</code> поверне <code>obj</code>. Однак, ECMAScript 2015 вводить властивість <code>values</code> у {{jsxref("Array.prototype")}} (таким чином, доступну у кожному масиві). Отже, у середовищі JavaScript, яке підтримує ECMAScript 2015, посилання <code>values</code> всередині блоку <code>with</code> може повернути <code>[1,2,3].values</code>. Однак, конкретно у цьому прикладі {{jsxref("Array.prototype")}} було визначено з <code>values</code> у об'єкті {{jsxref("Symbol.unscopables")}}. Якби не це, ми б побачили, як важко було б його відлагоджувати.</p>
</div>

<h2 id="Приклади">Приклади</h2>

<h3 id="Використання_with">Використання <code>with</code></h3>

<p>Наступний оператор <code>with</code> вказує, що об'єкт <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math"><code>Math</code></a> є об'єктом за замовчуванням. Інструкції, що йдуть після <code>with</code>, посилаються на властивість <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/PI"><code>PI</code></a>, а також методи <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/cos"><code>cos</code></a> та <a href="/uk/docs/Web/JavaScript/Reference/Global_Objects/Math/sin"><code>sin</code></a> без зазначення об'єкта. JavaScript припускає, що об'єктом цих посилань є <code>Math</code>.</p>

<pre class="brush:js notranslate">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>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-with-statement', 'with statement')}}</td>
  </tr>
 </tbody>
</table>

<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2>



<p>{{Compat("javascript.statements.with")}}</p>

<h2 id="Див._також">Див. також</h2>

<ul>
 <li>{{jsxref("Statements/block", "block")}}</li>
 <li><a href="/uk/docs/Web/JavaScript/Reference/Strict_mode">Строгий режим</a></li>
 <li>{{jsxref("Symbol.unscopables")}}</li>
 <li>{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}</li>
</ul>