Skip to content

Commit 2417155

Browse files
iliakaniliakan
committed
renovations
1 parent e706693 commit 2417155

23 files changed

Lines changed: 196 additions & 76 deletions

File tree

‎1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/solution.md‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,21 +11,19 @@ true + false = 1
1111
"4" - 2
 = 2
1212
"4px" - 2
 = NaN
1313
7 / 0
 = Infinity
14-
parseInt("09")
 = "0" или "9" // (3)
1514
" -9\n" + 5 = " -9\n5"
1615
" -9\n" - 5 = -14
1716
5 && 2
 = 2
1817
2 && 5
 = 5
1918
5 || 0
 = 5
2019
0 || 5 = 5
21-
null + 1 = 1 // (4)
22-
undefined + 1 = NaN // (5)
20+
null + 1 = 1 // (3)
21+
undefined + 1 = NaN // (4)
2322
```
2423

2524
<ol>
2625
<li>Оператор `"+"` в данном случае прибавляет `1` как строку, и затем `0`.</li>
2726
<li>Оператор `"-"` работает только с числами, так что он сразу приводит `""` к `0`.</li>
28-
<li>В некоторых браузерах `parseInt` без второго аргумента интерпретирует `09` как восьмиричное число.</li>
2927
<li>`null` при численном преобразовании становится `0`</li>
3028
<li>`undefined` при численном преобразовании становится `NaN`</li>
3129
</ol>

‎1-js/2-first-steps/14-types-conversion/1-primitive-conversions-questions/task.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ true + false
1515
"4" - 2

1616
"4px" - 2

1717
7 / 0

18-
parseInt("09")

1918
" -9\n" + 5
2019
" -9\n" - 5
2120
5 && 2


‎1-js/4-data-structures/11-datetime/6-get-seconds-today/solution.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -17,3 +17,12 @@ function getSecondsToday() {
1717
alert( getSecondsToday() );
1818
```
1919

20+
Альтернативное решение -- получить часы/минуты/секунды и преобразовать их все в секунды:
21+
22+
```js
23+
//+ run
24+
function getSecondsToday(){
25+
var d = new Date();
26+
return d.getHours() * 3600 + d.getMinutes() * 60 + d.getSeconds();
27+
};
28+
```

‎1-js/4-data-structures/11-datetime/7-get-seconds-to-tomorrow/solution.md‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,3 @@ function getSecondsToTomorrow() {
1414
return Math.round(diff / 1000); // перевести в секунды
1515
}
1616
```
17-

‎1-js/5-functions-closures/5-closures-module/article.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -174,7 +174,7 @@ function work() {
174174
```html
175175
<!--+ run -->
176176
<p>Подключим библиотеку</p>
177-
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.js"></script>
177+
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
178178

179179
<p>Функция <code>_.defaults()</code> добавляет отсутствующие свойства.</p>
180180
<script>

‎1-js/6-objects-more/2-object-conversion/4-object-types-conversion-questions/solution.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,4 +30,4 @@ alert( [1,[0],2][1] );
3030
Квадратные скобки после массива/объекта обозначают не другой массив, а взятие элемента.
3131
</li>
3232
<li>Каждый объект преобразуется к примитиву. У встроенных объектов `Object` нет подходящего `valueOf`, поэтому используется `toString`, так что складываются в итоге строковые представления объектов.</li>
33-
</ol>
33+
</ol>

‎1-js/6-objects-more/2-object-conversion/article.md‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -234,5 +234,29 @@ if ( value ) {
234234
Полный алгоритм преобразований есть в спецификации EcmaScript, смотрите пункты [11.8.5](http://es5.github.com/x11.html#x11.8.5), [11.9.3](http://es5.github.com/x11.html#x11.9.3), а также [9.1](http://es5.github.com/x9.html#x9.1) и [9.3](http://es5.github.com/x9.html#x9.3).
235235

236236

237+
Заметим, для полноты картины, что некоторые тесты знаний в интернет предлагают вопросы типа:
238+
```js
239+
{}[0] // чему равно?
240+
{} + {} // а так?
241+
```
242+
243+
Если вы запустите эти выражения в консоли, то результат может показаться странным. Подвох здесь в том, что если фигурные скобки `{...}` идут не в выражении, а в основном потоке кода, то JavaScript считает, что это не объект, а "блок кода" (как `if`, `for`, но без оператора, просто группировка команд вместе, используется редко).
244+
245+
Вот блок кода с командой:
246+
```js
247+
//+run
248+
{
249+
alert("Блок")
250+
}
251+
```
252+
253+
А если команду изъять, то будет пустой блок `{}`, который ничего не делает. Два примера выше как раз содержат пустой блок в начале, который ничего не делает. Иначе говоря:
254+
```js
255+
{}[0] // то же что и: [0]
256+
{} + {} // то же что и: + {}
257+
```
258+
259+
То есть, такие вопросы -- не на преобразование типов, а на понимание, что если `{ ... }` находится вне выражений, то это не объект, а блок.
260+
237261

238262

‎1-js/6-objects-more/7-bind/2-write-to-object-after-bind/solution.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ function f() {
77
}
88

99
var user = {
10-
g: bind(f, "Hello")
10+
g: f.bind("Hello")
1111
}
1212

1313
user.g();

‎1-js/6-objects-more/7-bind/2-write-to-object-after-bind/task.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ function f() {
1010
}
1111

1212
var user = {
13-
g: bind(f, "Hello")
13+
g: f.bind("Hello")
1414
}
1515

1616
user.g();

‎1-js/6-objects-more/7-bind/article.md‎

Lines changed: 75 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -116,25 +116,57 @@ function bind(func, context) {
116116
Посмотрим, что она делает, как работает, на таком примере:
117117

118118
```js
119-
var oldSayHi = user.sayHi;
120-
var sayHi = bind(oldSayHi, user);
119+
//+ run
120+
function f() { alert(this); }
121+
122+
var g = bind(f, "Context");
123+
g(); // Context
121124
```
122125

123-
Результатом `bind(oldSayHi, user)`, как видно из кода, будет анонимная функция `(*)`, вот она отдельно:
126+
То есть, `bind(f, "Context")` привязывает `"Context"` в качестве `this` для `f`.
127+
128+
Посмотрим, за счёт чего это происходит.
129+
130+
Результатом `bind(f, "Context")`, как видно из кода, будет анонимная функция `(*)`.
131+
132+
Вот она отдельно:
124133

125134
```js
126135
function() { // (*)
127-
return oldSayHi.apply(user, arguments);
136+
return func.apply(context, arguments);
128137
};
129138
```
130139

131-
Она запишется в переменную `sayHi`.
140+
Если подставить наши конкретные аргументы, то есть `f` и `"Context"`, то получится так:
141+
142+
```js
143+
function() { // (*)
144+
return f.apply("Context", arguments);
145+
};
146+
```
147+
148+
Эта функция запишется в переменную `g`.
149+
150+
Далее, если вызвать `g`, то вызов будет передан в `f`, причём `f.apply("Context", arguments)` передаст в качестве контекста `"Context"`, который и будет выведен.
151+
152+
Если вызвать `g` с аргументами, то также будет работать:
153+
154+
```js
155+
//+ run
156+
function f(a, b) {
157+
alert(this);
158+
alert(a + b);
159+
}
160+
161+
var g = bind(f, "Context");
162+
g(1, 2); // Context, затем 3
163+
```
132164

133-
Далее, если её вызвать с какими-то аргументами, например `sayHi("Петя")`, то она "передаёт вызов" в `oldSayHi` -- используется `.apply(user, arguments)`, чтобы передать в качестве контекста `user` (он будет взят из замыкания) и текущие аргументы `arguments`.
165+
Аргументы, которые получила `g(...)`, передаются в `f` также благодаря методу `.apply`.
134166

135-
Иными словами, в результате вызова `bind(func, context)` мы получаем "функцию-обёртку", которая прозрачно передаёт вызов в `func`, с теми же аргументами, но фиксированным контекстом `context`.
167+
**Иными словами, в результате вызова `bind(func, context)` мы получаем "функцию-обёртку", которая прозрачно передаёт вызов в `func`, с теми же аргументами, но фиксированным контекстом `context`.**
136168

137-
Пример с `bind`:
169+
Вернёмся к `user.sayHi`. Вариант с `bind`:
138170

139171
```js
140172
//+ run
@@ -158,22 +190,25 @@ setTimeout( bind(user.sayHi, user), 1000 );
158190

159191
Теперь всё в порядке!
160192

161-
Вызов `bind(user.sayHi, user)` возвращает такую функцию-обёртку, которая гарантированно вызовет `user.sayHi` в контексте `user`. В данном случае, через 1000мс.
193+
Вызов `bind(user.sayHi, user)` возвращает такую функцию-обёртку, которая привязывает вызовет `user.sayHi` к контексту `user`. Она будет вызвана через 1000мс.
162194

163-
Причём, если вызвать обёртку с аргументами -- они пойдут в `user.sayHi` без изменений, фиксирован лишь контекст.
195+
Полученную обёртку можно вызвать и с аргументами -- они пойдут в `user.sayHi` без изменений, фиксирован лишь контекст.
164196

165197
```js
166198
//+ run
167199
var user = {
168200
firstName: "Вася",
169-
sayHi: function(who) {
201+
*!*
202+
sayHi: function(who) { // здесь у sayHi есть один аргумент
203+
*/!*
170204
alert(this.firstName + ": Привет, " + who);
171205
}
172206
};
173207

174208
var sayHi = bind(user.sayHi, user);
175209

176210
*!*
211+
// контекст Вася, а аргумент передаётся "как есть"
177212
sayHi("Петя"); // Вася: Привет, Петя
178213
sayHi("Маша"); // Вася: Привет, Маша
179214
*/!*
@@ -187,9 +222,26 @@ sayHi("Маша"); // Вася: Привет, Маша
187222

188223
В современном JavaScript (или при подключении библиотеки [es5-shim](https://github.com/kriskowal/es5-shim) для IE8-) у функций уже есть встроенный метод [bind](https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Function/bind), который мы можем использовать.
189224

190-
Он позволяет получить обёртку, которая привязывает функцию не только к нужному контексту но, если нужно, то и к аргументам.
225+
Он работает примерно так же, как `bind`, который описан выше.
191226

192-
Синтаксис `bind`:
227+
Изменения очень небольшие:
228+
229+
```js
230+
//+ run
231+
function f(a, b) {
232+
alert(this);
233+
alert(a + b);
234+
}
235+
236+
*!*
237+
// вместо
238+
// var g = bind(f, "Context");
239+
var g = f.bind("Context");
240+
*/!*
241+
g(1, 2); // Context, затем 3
242+
```
243+
244+
Синтаксис встроенного `bind`:
193245

194246
```js
195247
var wrapper = func.bind(context[, arg1, arg2...])
@@ -199,7 +251,7 @@ var wrapper = func.bind(context[, arg1, arg2...])
199251
<dt>`func`</dt>
200252
<dd>Произвольная функция</dd>
201253
<dt>`context`</dt>
202-
<dd>Обертка `wrapper` будет вызывать функцию с контекстом `this = context`.</dd>
254+
<dd>Контекст, который привязывается к `func`</dd>
203255
<dt>`arg1`, `arg2`, ...</dt>
204256
<dd>Если указаны аргументы `arg1, arg2...` -- они будут прибавлены к каждому вызову новой функции, причем встанут *перед* теми, которые указаны при вызове.</dd>
205257
</dl>
@@ -227,6 +279,14 @@ setTimeout( user.sayHi.bind(user), 1000 ); // аналог через встро
227279

228280
Далее мы будем использовать именно встроенный метод `bind`.
229281

282+
[warn header="bind не похож call/apply"]
283+
Методы `bind` и `call/apply` близки по синтаксису, но есть важнейшее отличие.
284+
285+
Методы `call/apply` вызывают функцию с заданным контекстом и аргументами.
286+
287+
А `bind` не вызывает функцию. Он только возвращает "обёртку", которую мы можем вызвать позже, и которая передаст вызов в исходную функцию, с привязанным контекстом.
288+
[/warn]
289+
230290
[smart header="Привязать всё: `bindAll`"]
231291
Если у объекта много методов и мы планируем их активно передавать, то можно привязать контекст для них всех в цикле:
232292

@@ -241,6 +301,7 @@ for(var prop in user) {
241301
В некоторых JS-фреймворках есть даже встроенные функции для этого, например [_.bindAll(obj)](http://lodash.com/docs#bindAll).
242302
[/smart]
243303

304+
244305
## Карринг
245306

246307
До этого мы говорили о привязке контекста. Теперь пойдём на шаг дальше. Привязывать можно не только контекст, но и аргументы. Используется это реже, но бывает полезно.

0 commit comments

Comments
 (0)