1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
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>
|
