2014-10-30 15:04:56 +00:00
|
|
|
|
---
|
|
|
|
|
language: javascript
|
|
|
|
|
contributors:
|
|
|
|
|
- ["Adam Brenecki", "http://adam.brenecki.id.au"]
|
|
|
|
|
- ["Ariel Krakowski", "http://www.learneroo.com"]
|
|
|
|
|
filename: javascript-ru.js
|
2014-12-24 13:15:34 +00:00
|
|
|
|
translators:
|
|
|
|
|
- ["Alexey Gonchar", "http://github.com/finico"]
|
2014-10-30 15:04:56 +00:00
|
|
|
|
lang: ru-ru
|
|
|
|
|
---
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
JavaScript был создан в 1995 году Бренданом Айком, работающим в компании Netscape.
|
|
|
|
|
Изначально он был задуман как простой язык сценариев для веб-сайтов, дополняющий
|
|
|
|
|
Java для более сложных веб-приложений, но его тесная интеграция с веб-страницами
|
2014-12-24 13:40:47 +00:00
|
|
|
|
и втроенная поддержка браузерами привели к тому, что он стал более распространённым,
|
2014-12-24 13:15:34 +00:00
|
|
|
|
чем Java в веб-интерфейсах.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
JavaScript не ограничивается только веб-браузером, например, Node.js, программная
|
|
|
|
|
платформа, позволяющая выполнять JavaScript, основанная на движке V8 от браузера
|
|
|
|
|
Google Chrome, становится все более популярной.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
|
|
|
|
```js
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Си-подобные комментарии. Однострочные комментарии начинаются с двух символов слэш,
|
|
|
|
|
/* а многострочные комментарии начинаются с звёздочка-слэш
|
|
|
|
|
и заканчиваются символами слэш-звёздочка */
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Выражения заканчиваються точкой с запятой ;
|
2014-10-30 15:04:56 +00:00
|
|
|
|
doStuff();
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// ... но они необязательны, так как точки с запятой автоматически вставляются
|
|
|
|
|
// везде, где есть символ новой строки, за некоторыми исключениями.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
doStuff()
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Так как эти исключения могут привести к неожиданным результатам, мы будем всегда
|
|
|
|
|
// использовать точку с запятой в этом руководстве.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
|
|
|
|
///////////////////////////////////
|
2014-10-30 18:44:21 +00:00
|
|
|
|
// 1. Числа, Строки и Операторы
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// В JavaScript только один тип числа (64-bit IEEE 754 double).
|
|
|
|
|
// Он имеет 52-битную мантиссу, которой достаточно для хранения целых чисел
|
|
|
|
|
// с точностью вплоть до 9✕10¹⁵.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
3; // = 3
|
|
|
|
|
1.5; // = 1.5
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Некоторые простые арифметические операции работают так, как вы ожидаете.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
1 + 1; // = 2
|
2014-12-24 13:15:34 +00:00
|
|
|
|
0.1 + 0.2; // = 0.30000000000000004 (а некоторые - нет)
|
2014-10-30 15:04:56 +00:00
|
|
|
|
8 - 1; // = 7
|
|
|
|
|
10 * 2; // = 20
|
|
|
|
|
35 / 5; // = 7
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Включая деление с остатком.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
5 / 2; // = 2.5
|
|
|
|
|
|
2014-12-24 13:40:47 +00:00
|
|
|
|
// Побитовые операции также имеются; они производят операции, используя
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// двоичное представление числа, и возвращают новую последовательность из
|
|
|
|
|
// 32 бит (число) в качестве результата.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
1 << 2; // = 4
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Приоритет в выражениях явно задаётся скобками.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
(1 + 3) * 2; // = 8
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Есть три специальных значения, которые не являются реальными числами:
|
|
|
|
|
Infinity; // "бесконечность", например, результат деления на 0
|
|
|
|
|
-Infinity; // "минус бесконечность", результат деления отрицательного числа на 0
|
|
|
|
|
NaN; // "не число", например, результат деления 0/0
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Существует также логический тип.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
true;
|
|
|
|
|
false;
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Строки создаются при помощи двойных или одинарных кавычек.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
'abc';
|
|
|
|
|
"Hello, world";
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Для логического отрицания используется символ восклицательного знака.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
!true; // = false
|
|
|
|
|
!false; // = true
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Строгое равенство ===
|
2014-10-30 15:04:56 +00:00
|
|
|
|
1 === 1; // = true
|
|
|
|
|
2 === 1; // = false
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Строгое неравенство !==
|
2014-10-30 15:04:56 +00:00
|
|
|
|
1 !== 1; // = false
|
|
|
|
|
2 !== 1; // = true
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Другие операторы сравнения
|
2014-10-30 15:04:56 +00:00
|
|
|
|
1 < 10; // = true
|
|
|
|
|
1 > 10; // = false
|
|
|
|
|
2 <= 2; // = true
|
|
|
|
|
2 >= 2; // = true
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Строки конкатенируются при помощи оператора +
|
2014-10-30 15:04:56 +00:00
|
|
|
|
"Hello " + "world!"; // = "Hello world!"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// и сравниваются при помощи < и >
|
2014-10-30 15:04:56 +00:00
|
|
|
|
"a" < "b"; // = true
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Проверка равенства с приведением типов осуществляется двойным символом равно
|
2014-10-30 15:04:56 +00:00
|
|
|
|
"5" == 5; // = true
|
|
|
|
|
null == undefined; // = true
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// ...а если использовать ===
|
2014-10-30 15:04:56 +00:00
|
|
|
|
"5" === 5; // = false
|
|
|
|
|
null === undefined; // = false
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// ...приведение типов может привести к странному поведению...
|
|
|
|
|
13 + !0; // 14
|
|
|
|
|
"13" + !0; // '13true'
|
|
|
|
|
|
|
|
|
|
// Вы можете получить доступ к любому символу строки, используя метод charAt
|
2014-10-30 15:04:56 +00:00
|
|
|
|
"This is a string".charAt(0); // = 'T'
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// ...или используйте метод substring чтобы получить более крупные части
|
2014-10-30 15:04:56 +00:00
|
|
|
|
"Hello world".substring(0, 5); // = "Hello"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// length это свойство, для его получения не нужно использовать ()
|
2014-10-30 15:04:56 +00:00
|
|
|
|
"Hello".length; // = 5
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Так же есть null и undefined
|
|
|
|
|
null; // используется для обозначения намеренного значения "ничего"
|
|
|
|
|
undefined; // используется для обозначения переменных, не имеющих
|
|
|
|
|
// присвоенного значения (хотя переменная объявлена)
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// false, null, undefined, NaN, 0 и "" это ложь; все остальное - истина.
|
|
|
|
|
// Следует отметить, что 0 это ложь, а "0" - истина, несмотря на то, что 0 == "0".
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
|
|
|
|
///////////////////////////////////
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// 2. Переменные, Массивы и Объекты
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Переменные объявляются при помощи ключевого слова var. JavaScript - язык с
|
|
|
|
|
// динамической типизацией, поэтому не нужно явно указывать тип. Для присваивания
|
|
|
|
|
// значения переменной используется символ =
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var someVar = 5;
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// если вы пропустите слово var, вы не получите сообщение об ошибке...
|
2014-10-30 15:04:56 +00:00
|
|
|
|
someOtherVar = 10;
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// ...но ваша переменная будет создана в глобальном контексте, а не в текущем
|
|
|
|
|
// гед вы ее объявили.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Переменным объявленным без присвоения устанавливается значение undefined.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var someThirdVar; // = undefined
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// У математических операций есть сокращённые формы:
|
|
|
|
|
someVar += 5; // как someVar = someVar + 5; someVar теперь имеет значение 10
|
|
|
|
|
someVar *= 10; // теперь someVar имеет значение 100
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// а так же специальные операторы инкремент и декремент для увеличения и
|
|
|
|
|
// уменьшения переменной на единицу соответственно
|
|
|
|
|
someVar++; // теперь someVar имеет значение 101
|
|
|
|
|
someVar--; // обратно 100
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Массивы это нумерованные списки из значений любого типа.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var myArray = ["Hello", 45, true];
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Их элементы могут быть доступны при помощи синтаксиса с квадратными скобками.
|
|
|
|
|
// Индексы массивов начинаются с нуля.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myArray[1]; // = 45
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Массивы можно изменять, как и их длину.
|
|
|
|
|
myArray.push("World");
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myArray.length; // = 4
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Добавлять и редактировать определенный элемент
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myArray[3] = "Hello";
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Объекты в JavaScript похожи на "словари" или ассоциативные массиы в других
|
|
|
|
|
// языках: неупорядоченный набор пар ключ-значение.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var myObj = {key1: "Hello", key2: "World"};
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Ключи это строки, но кавычки необязательны, если строка удовлетворяет
|
|
|
|
|
// ограничениям для имён переменных. Значения могут быть любых типов.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var myObj = {myKey: "myValue", "my other key": 4};
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Атрибуты объектов можно также получить, используя квадратные скобки,
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myObj["my other key"]; // = 4
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// или через точку, при условии, что ключ является допустимым идентификатором.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myObj.myKey; // = "myValue"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Объекты изменяемы; можно изменять значения и добавлять новые ключи.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myObj.myThirdKey = true;
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Если вы попытаетесь получить доступ к несуществующему свойству,
|
|
|
|
|
// вы получите undefined.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myObj.myFourthKey; // = undefined
|
|
|
|
|
|
|
|
|
|
///////////////////////////////////
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// 3. Логика и управляющие конструкции.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Синтаксис для этого раздела почти такой же как в Java.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Эта конструкция работает, как и следовало ожидать.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var count = 1;
|
2014-12-24 13:15:34 +00:00
|
|
|
|
if (count == 3) {
|
|
|
|
|
// выполняется, если count равен 3
|
|
|
|
|
} else if (count == 4) {
|
|
|
|
|
// выполняется, если count равен 4
|
2014-10-30 15:04:56 +00:00
|
|
|
|
} else {
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// выполняется, если не 3 и не 4
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Как это делает while.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
while (true){
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Бесконечный цикл!
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Циклы do-while такие же как while, но они всегда выполняются хотя бы раз.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var input
|
|
|
|
|
do {
|
|
|
|
|
input = getInput();
|
|
|
|
|
} while (!isValid(input))
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// цикл for является таким же, как C и Java:
|
|
|
|
|
// инициализация; условие; шаг.
|
|
|
|
|
for (var i = 0; i < 5; i++) {
|
|
|
|
|
// будет запущен 5 раз
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// && это логическое И, || это логическое ИЛИ
|
|
|
|
|
if (house.size == "big" && house.colour == "blue") {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
house.contains = "bear";
|
|
|
|
|
}
|
2014-12-24 13:15:34 +00:00
|
|
|
|
if (colour == "red" || colour == "blue") {
|
|
|
|
|
// цвет красный или синий
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// || используется как "короткий цикл вычисления" для присваивания переменных.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var name = otherName || "default";
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Оператор switch выполняет проверку на равенство пр помощи ===
|
|
|
|
|
// используйте break чтобы прервать выполнение после каждого case
|
|
|
|
|
// или выполнение пойдёт далее, игнорируя при этом остальные проверки.
|
|
|
|
|
grade = 'B';
|
2014-10-30 15:04:56 +00:00
|
|
|
|
switch (grade) {
|
2014-12-24 13:15:34 +00:00
|
|
|
|
case 'A':
|
|
|
|
|
console.log("Great job");
|
2014-10-30 15:04:56 +00:00
|
|
|
|
break;
|
2014-12-24 13:15:34 +00:00
|
|
|
|
case 'B':
|
|
|
|
|
console.log("OK job");
|
2014-10-30 15:04:56 +00:00
|
|
|
|
break;
|
2014-12-24 13:15:34 +00:00
|
|
|
|
case 'C':
|
|
|
|
|
console.log("You can do better");
|
2014-10-30 15:04:56 +00:00
|
|
|
|
break;
|
|
|
|
|
default:
|
2014-12-24 13:15:34 +00:00
|
|
|
|
console.log("Oy vey");
|
2014-10-30 15:04:56 +00:00
|
|
|
|
break;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
///////////////////////////////////
|
2014-11-01 20:21:54 +00:00
|
|
|
|
// 4. Функции, Область видимости и Замыкания
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Функции в JavaScript объявляются при помощи ключевого слова function.
|
|
|
|
|
function myFunction(thing) {
|
|
|
|
|
return thing.toUpperCase();
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}
|
|
|
|
|
myFunction("foo"); // = "FOO"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Обратите внимание, что значение, которое будет возвращено, должно начинаться
|
|
|
|
|
// на той же строке, что и ключевое слово return, в противном случае вы будете
|
|
|
|
|
// всегда возвращать undefined по причине автоматической вставки точки с запятой.
|
|
|
|
|
// Следите за этим при использовании стиля форматирования Allman.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
function myFunction()
|
|
|
|
|
{
|
2014-12-24 13:15:34 +00:00
|
|
|
|
return // <- здесь точка с запятой вставится автоматически
|
2014-10-30 15:04:56 +00:00
|
|
|
|
{
|
|
|
|
|
thisIsAn: 'object literal'
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
myFunction(); // = undefined
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// JavaScript функции - это объекты, поэтому они могут быть переприсвоены на
|
|
|
|
|
// различные имена переменных и передаваться другим функциям в качестве аргументов,
|
|
|
|
|
// например, когда назначается обработчик события:
|
|
|
|
|
function myFunction() {
|
|
|
|
|
// этот код будет вызван через 5 секунд
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}
|
|
|
|
|
setTimeout(myFunction, 5000);
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Примечание: setTimeout не является частью языка, но реализован в браузерах и Node.js
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Функции не обязательно должны иметь имя при объявлении - вы можете написать
|
|
|
|
|
// анонимное определение функции непосредственно в агрументе другой функции.
|
|
|
|
|
setTimeout(function() {
|
|
|
|
|
// этот код будет вызван через 5 секунд
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}, 5000);
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// В JavaScript есть область видимости функции; функции имеют свою область
|
|
|
|
|
// видимости, а другие блоки - нет.
|
|
|
|
|
if (true) {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var i = 5;
|
|
|
|
|
}
|
2014-12-24 13:15:34 +00:00
|
|
|
|
i; // = 5 - не undefined как ожидалось бы в языках с блочной областью видимости
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Это привело к общепринятому шаблону "самозапускающихся анонимных функций",
|
|
|
|
|
// которые препятствуют проникновению переменных в глобальную область видимости
|
|
|
|
|
(function() {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var temporary = 5;
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Мы можем получить доступ к глобальной области для записи в "глобальный объект",
|
|
|
|
|
// который в веб-браузере всегда window. Глобальный объект может иметь другое
|
|
|
|
|
// имя в таких платформах, как Node.js
|
2014-10-30 15:04:56 +00:00
|
|
|
|
window.permanent = 10;
|
|
|
|
|
})();
|
2014-12-24 13:15:34 +00:00
|
|
|
|
temporary; // вызовет сообщение об ошибке с типом ReferenceError
|
2014-10-30 15:04:56 +00:00
|
|
|
|
permanent; // = 10
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Одной из самых мощных возможностей JavaScript являются замыкания. Если функция
|
|
|
|
|
// определена внутри другой функции, то внутренняя функция имеет доступ к
|
|
|
|
|
// переменным внешней функции, даже после того, как контекст выполнения выйдет из
|
|
|
|
|
// внешней функции.
|
|
|
|
|
function sayHelloInFiveSeconds(name) {
|
|
|
|
|
var prompt = "Hello, " + name + "!";
|
|
|
|
|
// Внутренние функции по умолчанию помещаются в локальную область видимости,
|
|
|
|
|
// как если бы они были объявлены с var.
|
|
|
|
|
function inner() {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
alert(prompt);
|
|
|
|
|
}
|
|
|
|
|
setTimeout(inner, 5000);
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// setTimeout асинхронна, поэтому функция sayHelloInFiveSeconds сразу выйдет
|
|
|
|
|
// и тело setTimeout будет вызвано позже. Однако, поскольку внутренняя
|
|
|
|
|
// функция "замкнута", она по-прежнему имеет доступ к переменной prompt,
|
|
|
|
|
// когда sayHelloInFiveSeconds вызывется.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}
|
2014-12-24 13:15:34 +00:00
|
|
|
|
sayHelloInFiveSeconds("Adam"); // откроется окно с "Hello, Adam!" через 5 секунд
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
|
|
|
|
///////////////////////////////////
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// 5. Подробнее про Объекты, Конструкторы и Прототипы
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Объекты могут содержать в себе функции.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var myObj = {
|
2014-12-24 13:15:34 +00:00
|
|
|
|
myFunc: function() {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
return "Hello world!";
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
myObj.myFunc(); // = "Hello world!"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Когда функции, прикрепленные к объекту, вызываются, они могут получить доступ
|
|
|
|
|
// к этому объекту с помощью ключевого слова this.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myObj = {
|
|
|
|
|
myString: "Hello world!",
|
2014-12-24 13:15:34 +00:00
|
|
|
|
myFunc: function() {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
return this.myString;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
myObj.myFunc(); // = "Hello world!"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Какое это значение имеет к тому, как вызвана функция и где она определена.
|
|
|
|
|
// Итак, наша функция не работает, если она вызывается не в контексте объекта.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var myFunc = myObj.myFunc;
|
|
|
|
|
myFunc(); // = undefined
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// И наоборот, функция может быть присвоена объекту и получать доступ к нему
|
|
|
|
|
// через this, даже если она не была присвоена при объявлении.
|
|
|
|
|
var myOtherFunc = function() {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}
|
|
|
|
|
myObj.myOtherFunc = myOtherFunc;
|
|
|
|
|
myObj.myOtherFunc(); // = "HELLO WORLD!"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Мы можем также указать контекст для выполнения функции, когда мы вызываем ее
|
|
|
|
|
// с помощью call или apply.
|
|
|
|
|
var anotherFunc = function(s) {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
return this.myString + s;
|
|
|
|
|
}
|
|
|
|
|
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Функция apply аналогична, но принимает массив аргументов.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Это полезно при работе с функцией, которая принимает последовательность
|
|
|
|
|
// аргументов, и вы хотите передать массив.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
Math.min(42, 6, 27); // = 6
|
2014-12-24 13:15:34 +00:00
|
|
|
|
Math.min([42, 6, 27]); // = NaN (не сработает!)
|
2014-10-30 15:04:56 +00:00
|
|
|
|
Math.min.apply(Math, [42, 6, 27]); // = 6
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Но, call и apply - временные. Когда мы хотим связать функцию, мы можем
|
|
|
|
|
// использовать bind.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var boundFunc = anotherFunc.bind(myObj);
|
|
|
|
|
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Bind также может использоваться, для частичного применения (каррирование) функции
|
|
|
|
|
var product = function(a, b) { return a * b; }
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var doubler = product.bind(this, 2);
|
|
|
|
|
doubler(8); // = 16
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Когда вы вызываете функцию с помощью ключевого слова new создается новый объект,
|
|
|
|
|
// и создает доступ к функции при помощи this. Такие функции называют конструкторами.
|
|
|
|
|
var MyConstructor = function() {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
this.myNumber = 5;
|
|
|
|
|
}
|
|
|
|
|
myNewObj = new MyConstructor(); // = {myNumber: 5}
|
|
|
|
|
myNewObj.myNumber; // = 5
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Каждый объект в JavaScript имеет свойтво prototype. Когда вы хотите получить
|
2014-12-24 13:40:47 +00:00
|
|
|
|
// доступ к свойтву объекта, которое не существует в этом объекте, интерпретатор
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// будет искать это свойство в прототипе.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Некоторые реализации языка позволяют получить доступ к объекту прототипа
|
|
|
|
|
// через свойство __proto__. Несмотря на то, что это может быть полезно для
|
|
|
|
|
// понимания прототипов, это не часть стандарта; мы увидим стандартные способы
|
|
|
|
|
// использования прототипов позже.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var myObj = {
|
|
|
|
|
myString: "Hello world!"
|
|
|
|
|
};
|
|
|
|
|
var myPrototype = {
|
|
|
|
|
meaningOfLife: 42,
|
2014-12-24 13:15:34 +00:00
|
|
|
|
myFunc: function() {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
return this.myString.toLowerCase()
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
myObj.__proto__ = myPrototype;
|
|
|
|
|
myObj.meaningOfLife; // = 42
|
2014-12-24 13:15:34 +00:00
|
|
|
|
|
|
|
|
|
// Для функций это так же работает.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myObj.myFunc(); // = "hello world!"
|
|
|
|
|
|
2014-12-24 13:40:47 +00:00
|
|
|
|
// Если интерпретатор не найдет свойство в прототипе, то продожит поиск в
|
2014-11-13 09:28:49 +00:00
|
|
|
|
// прототипе прототипа и так далее.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myPrototype.__proto__ = {
|
|
|
|
|
myBoolean: true
|
|
|
|
|
};
|
|
|
|
|
myObj.myBoolean; // = true
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Здесь не участвует копирование; каждый объект хранит ссылку на свой прототип.
|
|
|
|
|
// Это означает, что мы можем изменить прототип и наши изменения будут отражены везде
|
2014-10-30 15:04:56 +00:00
|
|
|
|
myPrototype.meaningOfLife = 43;
|
|
|
|
|
myObj.meaningOfLife; // = 43
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Мы упомянули, что свойтсво __proto__ нестандартно, и нет никакого стандартного
|
|
|
|
|
// способа, чтобы изменить прототип существующего объекта. Однако, есть два
|
|
|
|
|
// способа создать новый объект с заданным прототипом.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Первый способ это Object.create, который появился в ECMAScript 5 и есть еще
|
|
|
|
|
// не во всех реализациях языка.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var myObj = Object.create(myPrototype);
|
|
|
|
|
myObj.meaningOfLife; // = 43
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Второй способ, который работает везде, имеет дело с конструкторами.
|
|
|
|
|
// У конструкторов есть свойство с именем prototype. Это не прототип
|
|
|
|
|
// функции-конструктора; напротив, это прототип для новых объектов, которые
|
|
|
|
|
// будут созданы с помощью этого конструктора и ключевого слова new
|
2014-10-30 15:04:56 +00:00
|
|
|
|
MyConstructor.prototype = {
|
|
|
|
|
myNumber: 5,
|
2014-12-24 13:15:34 +00:00
|
|
|
|
getMyNumber: function() {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
return this.myNumber;
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
var myNewObj2 = new MyConstructor();
|
|
|
|
|
myNewObj2.getMyNumber(); // = 5
|
|
|
|
|
myNewObj2.myNumber = 6
|
|
|
|
|
myNewObj2.getMyNumber(); // = 6
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// У встроенных типов, таких как строки и числа также есть конструкторы, которые
|
|
|
|
|
// создают эквивалентые объекты-обертки.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var myNumber = 12;
|
|
|
|
|
var myNumberObj = new Number(12);
|
|
|
|
|
myNumber == myNumberObj; // = true
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// За исключением того, что они не в точности равны.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
typeof myNumber; // = 'number'
|
|
|
|
|
typeof myNumberObj; // = 'object'
|
|
|
|
|
myNumber === myNumberObj; // = false
|
2014-12-24 13:15:34 +00:00
|
|
|
|
if (0) {
|
|
|
|
|
// Этот код не выполнятся, потому что 0 - это ложь.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}
|
2014-12-24 13:15:34 +00:00
|
|
|
|
if (Number(0)) {
|
|
|
|
|
// Этот код выполнится, потому что Number(0) это истина.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
}
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Впрочем, обертки это объекты и их можно расширять, например:
|
|
|
|
|
String.prototype.firstCharacter = function() {
|
2014-10-30 15:04:56 +00:00
|
|
|
|
return this.charAt(0);
|
|
|
|
|
}
|
|
|
|
|
"abc".firstCharacter(); // = "a"
|
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Это часто используется в полифиллах, которые реализуют новые возможности
|
|
|
|
|
// JavaScript в старой реализации языка, так что они могут быть использованы в
|
|
|
|
|
// старых средах, таких как устаревшие браузеры.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// Например, мы упомянули, что Object.create доступен не во всех реализациях, но
|
|
|
|
|
// мы сможем использовать его с этим полифиллом:
|
|
|
|
|
if (Object.create === undefined) { // не перезаписывать метод, если он существует
|
|
|
|
|
Object.create = function(proto) {
|
|
|
|
|
// создать временный конструктор с правильным прототипом
|
2014-10-30 15:04:56 +00:00
|
|
|
|
var Constructor = function(){};
|
|
|
|
|
Constructor.prototype = proto;
|
2014-12-24 13:15:34 +00:00
|
|
|
|
// затем использовать его для создания нового объекта, на основе прототипа
|
2014-10-30 15:04:56 +00:00
|
|
|
|
return new Constructor();
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
```
|
|
|
|
|
|
2014-11-13 08:32:51 +00:00
|
|
|
|
## Что еще почитать
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
[Современный учебник JavaScript (Илья Кантор)](http://learn.javascript.ru) -
|
|
|
|
|
качественный учебник по JavaScript на русском языке.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
[Mozilla Developer Network](https://developer.mozilla.org/ru/docs/Web/JavaScript) -
|
|
|
|
|
предоставляет отличную документацию для JavaScript, как он используется в браузерах.
|
|
|
|
|
Кроме того, это вики, поэтому, если вы знаете больше, вы можете помочь другим,
|
|
|
|
|
делясь своими знаниями.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/ru/) - это
|
|
|
|
|
подробное руководство всех неинтуитивных особенностей языка.
|
2014-10-30 15:04:56 +00:00
|
|
|
|
|
2014-12-24 13:15:34 +00:00
|
|
|
|
[Stack Overflow](http://stackoverflow.com/questions/tagged/javascript) - можно
|
|
|
|
|
найти ответ почти на любой ваш вопрос, а если его нет, то задать вопрос самому.
|