diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:43:23 -0500 |
commit | 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 (patch) | |
tree | a9ef8ac1e1b8fe4207b6d64d3841bfb8990b6fd0 /files/uk/web/javascript/reference/functions/set/index.html | |
parent | 074785cea106179cb3305637055ab0a009ca74f2 (diff) | |
download | translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.gz translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.tar.bz2 translated-content-218934fa2ed1c702a6d3923d2aa2cc6b43c48684.zip |
initial commit
Diffstat (limited to 'files/uk/web/javascript/reference/functions/set/index.html')
-rw-r--r-- | files/uk/web/javascript/reference/functions/set/index.html | 152 |
1 files changed, 152 insertions, 0 deletions
diff --git a/files/uk/web/javascript/reference/functions/set/index.html b/files/uk/web/javascript/reference/functions/set/index.html new file mode 100644 index 0000000000..b26e0e2824 --- /dev/null +++ b/files/uk/web/javascript/reference/functions/set/index.html @@ -0,0 +1,152 @@ +--- +title: сетер +slug: Web/JavaScript/Reference/Functions/set +tags: + - ECMAScript 2015 + - ECMAScript 5 + - JavaScript + - set + - функції +translation_of: Web/JavaScript/Reference/Functions/set +--- +<div>{{jsSidebar("Functions")}}</div> + +<p>Оператор <strong><code>set</code></strong> прив'язує властивість об'єкта до функції, яка буде викликана під час спроби присвоїти значення даній властивості.</p> + +<p>{{EmbedInteractiveExample("pages/js/functions-setter.html")}}</p> + +<div class="hidden"> +<p>The source for this interactive example is stored in a GitHub repository. If you'd like to contribute to the interactive examples project, please clone <a href="https://github.com/mdn/interactive-examples">https://github.com/mdn/interactive-examples</a> and send us a pull request.</p> +</div> + +<h2 id="Синтаксис">Синтаксис</h2> + +<pre class="syntaxbox notranslate">{set <em>prop</em>(<em>val</em>) { . . . }} +{set [expression](<em>val</em>) { . . . }}</pre> + +<h3 id="Параметри">Параметри</h3> + +<dl> + <dt><em><code>prop</code></em></dt> + <dd>Ім'я властивості, котра має бути прив'язана до даної функції.</dd> +</dl> + +<dl> + <dt><em><code>val</code></em></dt> + <dd>Псевдонім змінної, що містить значення, для якого виконується спроба присвоїти його властивості <em><code>prop</code></em>.</dd> + <dt><em>expression</em></dt> + <dd>Починаючи від ECMAScript 2015, можна також використовувати вираз для обчислюваного імені властивості, до якої буде прив'язана дана функція.</dd> +</dl> + +<h2 id="Опис">Опис</h2> + +<p>У JavaScript сетер можна використати для виконання функції під час здійснення спроби змінити певну властивість. Найчастіше сетери використовуються у поєднанні з ґетерами для створення свого роду псевдовластивостей. Не можна водночас мати сетера на властивості, яка містить фактичне значення.</p> + +<p>Зауважте особливість використання синтаксису <code>set</code>:</p> + +<div> +<ul> + <li>Він може мати ідентифікатор, який є або числом, або рядком;</li> + <li>Він повинен мати рівно один параметр (дивіться більше інформації у статті <a href="http://whereswalden.com/2010/08/22/incompatible-es5-change-literal-getter-and-setter-functions-must-now-have-exactly-zero-or-one-arguments/" rel="external nofollow noopener">Несумісна зміна <abbr title="ECMAScript 5th edition">ES5</abbr>: літеральні функції гетерів та сетерів тепер повинні мати рівно нуль аргументів та один аргумент</a>);</li> + <li>Він не повинен з'являтись у об'єктному літералі з іншим сетером чи введеними даними для тієї ж властивості.<br> + ( <code>{ set x(v) { }, set x(v) { } }</code> та <code>{ x: ..., set x(v) { } }</code> заборонені)</li> +</ul> +</div> + +<h2 id="Приклади">Приклади</h2> + +<h3 id="Визначення_сетерів_на_нових_обєктах_у_обєктних_ініціалізаторах">Визначення сетерів на нових об'єктах у об'єктних ініціалізаторах</h3> + +<p>Наступний код визначає псевдовластивість <code>current</code> об'єкта <code>language</code>. Коли <code>current</code> присвоюється значення, це змінює <code>log</code> на таке саме значення:</p> + +<pre class="brush: js notranslate">const language = { + set current(name) { + this.log.push(name); + }, + log: [] +} + +language.current = 'EN'; +console.log(language.log); // ['EN'] + +language.current = 'UA'; +console.log(language.log); // ['EN', 'UA'] +</pre> + +<p>Зверніть увагу, що властивість <code>current</code> не визначена, і будь-які спроби звернутись до неї повернуть значення <code>undefined</code>.</p> + +<h3 id="Видалення_сетера_оператором_delete">Видалення сетера оператором <code>delete</code></h3> + +<p>Якщо вам потрібно прибрати сетер, ви можете його просто {{jsxref("Operators/delete", "видалити")}}:</p> + +<pre class="brush: js notranslate">delete o.current; +</pre> + +<h3 id="Визначення_сетера_на_існуючому_обєкті_за_допомогою_defineProperty">Визначення сетера на існуючому об'єкті за допомогою <code>defineProperty</code></h3> + +<p>Щоб додати сетер до <em>існуючого</em> об'єкта, використовуйте {{jsxref("Object.defineProperty()")}}.</p> + +<pre class="brush: js notranslate">const o = {a: 0}; + +Object.defineProperty(o, 'b', { + set: function(x) { this.a = x / 2; } +}); + +o.b = 10; +// Запускає сетер, який присвоює 10 / 2 (5) властивості 'a' + +console.log(o.a) +// 5</pre> + +<h3 id="Використання_обчислюваного_імені_властивості">Використання обчислюваного імені властивості</h3> + +<pre class="brush: js notranslate">const expr = 'foo'; + +const obj = { + baz: 'bar', + set [expr](v) { this.baz = v; } +}; + +console.log(obj.baz); +// "bar" + +obj.foo = 'baz'; +// запустити сетер + +console.log(obj.baz); +// "baz" +</pre> + +<h2 id="Специфікації">Специфікації</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">Специфікація</th> + </tr> + <tr> + <td>{{SpecName('ESDraft', '#sec-method-definitions', 'Method definitions')}}</td> + </tr> + </tbody> +</table> + +<h2 id="Сумісність_з_веб-переглядачами">Сумісність з веб-переглядачами</h2> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p> +</div> + +<p>{{Compat("javascript.functions.set")}}</p> + +<div id="compat-mobile"></div> + +<h2 id="Див._також">Див. також</h2> + +<ul> + <li><a href="/uk/docs/Web/JavaScript/Reference/Functions/get">гетер</a></li> + <li>{{jsxref("Operators/delete", "delete")}}</li> + <li>{{jsxref("Object.defineProperty()")}}</li> + <li>{{jsxref("Object.__defineGetter__", "__defineGetter__")}}</li> + <li>{{jsxref("Object.__defineSetter__", "__defineSetter__")}}</li> + <li><a href="/uk/docs/Web/JavaScript/Guide/Working_with_Objects#Визначення_гетерів_та_сетерів">Визначення гетерів та сетерів</a> у посібнику JavaScript</li> +</ul> |