mirror of
https://github.com/adambard/learnxinyminutes-docs.git
synced 2024-12-23 09:41:36 +00:00
translation javascript into Russian
This commit is contained in:
a.gonchar
Adam
parent
d2336d0ce4
commit
7b9eb42fb5
@ -3,261 +3,250 @@ language: javascript
|
||||
contributors:
|
||||
- ["Adam Brenecki", "http://adam.brenecki.id.au"]
|
||||
- ["Ariel Krakowski", "http://www.learneroo.com"]
|
||||
translators:
|
||||
- ["Maxim Koretskiy", "http://github.com/maximkoretskiy"]
|
||||
filename: javascript-ru.js
|
||||
translators:
|
||||
- ["Alexey Gonchar", "http://github.com/finico"]
|
||||
lang: ru-ru
|
||||
---
|
||||
|
||||
Javascript был разработан Бренданом Айком из Netcape в 1995. Изначально
|
||||
предполагалось, что он станет простым вариантом скриптового языка для сайтов,
|
||||
дополняющий к Java, который бы в свою очередь использовался для более сложных
|
||||
web-приложений. Но тонкая интегрированность javascript с web-страницей и
|
||||
встроенная поддержка в браузерах привели к тому, чтобы он стал более
|
||||
распространен в frontend-разработке, чем Java.
|
||||
JavaScript был создан в 1995 году Бренданом Айком, работающим в компании Netscape.
|
||||
Изначально он был задуман как простой язык сценариев для веб-сайтов, дополняющий
|
||||
Java для более сложных веб-приложений, но его тесная интеграция с веб-страницами
|
||||
и втроенная поддержка браузерами привели к тому, что он стал более распространынным,
|
||||
чем Java в веб-интерфейсах.
|
||||
|
||||
Использование JavaScript не ограничивается браузерами. Проект Node.js,
|
||||
предоставляющий независимую среду выполнения на движке Google Chrome V8
|
||||
JavaScript, становится все более популярным.
|
||||
|
||||
Обратная связь важна и нужна! Вы можете написаться мне
|
||||
на [@adambrenecki](https://twitter.com/adambrenecki) или
|
||||
[adam@brenecki.id.au](mailto:adam@brenecki.id.au).
|
||||
JavaScript не ограничивается только веб-браузером, например, Node.js, программная
|
||||
платформа, позволяющая выполнять JavaScript, основанная на движке V8 от браузера
|
||||
Google Chrome, становится все более популярной.
|
||||
|
||||
```js
|
||||
// Комментарии оформляются как в C.
|
||||
// Однострочнные коментарии начинаются с двух слешей,
|
||||
/* а многострочные с слеша и звездочки
|
||||
и заканчиваются звездочеий и слешом */
|
||||
// Си-подобные комментарии. Однострочные комментарии начинаются с двух символов слэш,
|
||||
/* а многострочные комментарии начинаются с звёздочка-слэш
|
||||
и заканчиваются символами слэш-звёздочка */
|
||||
|
||||
// Выражения разделяются с помощью ;
|
||||
// Выражения заканчиваються точкой с запятой ;
|
||||
doStuff();
|
||||
|
||||
// ... но этого можно и не делать, разделители подставляются автоматически
|
||||
// после перехода на новую строку за исключением особых случаев
|
||||
// ... но они необязательны, так как точки с запятой автоматически вставляются
|
||||
// везде, где есть символ новой строки, за некоторыми исключениями.
|
||||
doStuff()
|
||||
|
||||
// Это может приводить к непредсказуемому результату и поэтому мы будем
|
||||
// использовать разделители в этом туре.
|
||||
// Because those cases can cause unexpected results, we'll keep on using
|
||||
// semicolons in this guide.
|
||||
// Так как эти исключения могут привести к неожиданным результатам, мы будем всегда
|
||||
// использовать точку с запятой в этом руководстве.
|
||||
|
||||
///////////////////////////////////
|
||||
// 1. Числа, Строки и Операторы
|
||||
// 1. Numbers, Strings and Operators
|
||||
|
||||
// В Javasript всего 1 числовой тип - 64-битное число с плавающей точкой
|
||||
// стандарта IEEE 754)
|
||||
// Числа имеют 52-битную мантиссу, чего достаточно для хранения хранения целых
|
||||
// чисел до 9✕10¹⁵ приблизительно.
|
||||
// В JavaScript только один тип числа (64-bit IEEE 754 double).
|
||||
// Он имеет 52-битную мантиссу, которой достаточно для хранения целых чисел
|
||||
// с точностью вплоть до 9✕10¹⁵.
|
||||
3; // = 3
|
||||
1.5; // = 1.5
|
||||
|
||||
// В основном базовая арифметика работает предсказуемо
|
||||
// Некоторые простые арифметические операции работают так, как вы ожидаете.
|
||||
1 + 1; // = 2
|
||||
.1 + .2; // = 0.30000000000000004
|
||||
0.1 + 0.2; // = 0.30000000000000004 (а некоторые - нет)
|
||||
8 - 1; // = 7
|
||||
10 * 2; // = 20
|
||||
35 / 5; // = 7
|
||||
|
||||
// Включая нецелочисленное деление
|
||||
// Включая деление с остатком.
|
||||
5 / 2; // = 2.5
|
||||
|
||||
// Двоичные операции тоже есть. Если применить двоичную операцию к float-числу,
|
||||
// оно будет приведено к 32-битному целому со знаком.
|
||||
// Побитовые операции так же имеются; Они производят операции, используя
|
||||
// двоичное представление числа, и возвращают новую последовательность из
|
||||
// 32 бит (число) в качестве результата.
|
||||
1 << 2; // = 4
|
||||
|
||||
// (todo:перевести)
|
||||
// Приоритет выполнения операций можно менять с помощью скобок.
|
||||
// Приоритет в выражениях явно задаётся скобками.
|
||||
(1 + 3) * 2; // = 8
|
||||
|
||||
// Есть три особых не реальных числовых значения:
|
||||
Infinity; // допустим, результат операции 1/0
|
||||
-Infinity; // допустим, результат операции -1/0
|
||||
NaN; // допустим, результат операции 0/0
|
||||
// Есть три специальных значения, которые не являются реальными числами:
|
||||
Infinity; // "бесконечность", например, результат деления на 0
|
||||
-Infinity; // "минус бесконечность", результат деления отрицательного числа на 0
|
||||
NaN; // "не число", например, результат деления 0/0
|
||||
|
||||
// Так же есть тип булевых данных.
|
||||
// Существует также логический тип.
|
||||
true;
|
||||
false;
|
||||
|
||||
// Строки создаются с помощью ' или ".
|
||||
// Строки создаются при помощи двойных или одинарных кавычек.
|
||||
'abc';
|
||||
"Hello, world";
|
||||
|
||||
// Оператор ! означает отрицание
|
||||
// Для логического отрицания используется символ восклицательного знака.
|
||||
!true; // = false
|
||||
!false; // = true
|
||||
|
||||
// Равество это ===
|
||||
// Строгое равенство ===
|
||||
1 === 1; // = true
|
||||
2 === 1; // = false
|
||||
|
||||
// Неравенство это !==
|
||||
// Строгое неравенство !==
|
||||
1 !== 1; // = false
|
||||
2 !== 1; // = true
|
||||
|
||||
// Еще сравнения
|
||||
// Другие операторы сравнения
|
||||
1 < 10; // = true
|
||||
1 > 10; // = false
|
||||
2 <= 2; // = true
|
||||
2 >= 2; // = true
|
||||
|
||||
// Строки складываются с помощью +
|
||||
// Строки конкатенируются при помощи оператора +
|
||||
"Hello " + "world!"; // = "Hello world!"
|
||||
|
||||
// и сравниваются с помощью < и >
|
||||
// и сравниваются при помощи < и >
|
||||
"a" < "b"; // = true
|
||||
|
||||
// Приведение типов выполняется при сравнении с ==...
|
||||
// Проверка равенства с приведением типов осуществляется двойным символом равно
|
||||
"5" == 5; // = true
|
||||
null == undefined; // = true
|
||||
|
||||
// ...в отличие от ===
|
||||
// ...а если использовать ===
|
||||
"5" === 5; // = false
|
||||
null === undefined; // = false
|
||||
|
||||
// Для доступа к конкретному символу строки используйте charAt
|
||||
// ...приведение типов может привести к странному поведению...
|
||||
13 + !0; // 14
|
||||
"13" + !0; // '13true'
|
||||
|
||||
// Вы можете получить доступ к любому символу строки, используя метод charAt
|
||||
"This is a string".charAt(0); // = 'T'
|
||||
|
||||
// ... или используйте substring для получения подстроки
|
||||
// ...или используйте метод substring чтобы получить более крупные части
|
||||
"Hello world".substring(0, 5); // = "Hello"
|
||||
|
||||
// length(длина) - свойство, не используйте ()
|
||||
// length это свойство, для его получения не нужно использовать ()
|
||||
"Hello".length; // = 5
|
||||
|
||||
// Есть null и undefined
|
||||
null; // используется что бы указать явно, что значения нет
|
||||
undefined; // испрользуется чтобы показать, что значения не было установлено
|
||||
// собственно, undefined так и переводится
|
||||
// Так же есть null и undefined
|
||||
null; // используется для обозначения намеренного значения "ничего"
|
||||
undefined; // используется для обозначения переменных, не имеющих
|
||||
// присвоенного значения (хотя переменная объявлена)
|
||||
|
||||
// false, null, undefined, NaN, 0 и "" являются falsy-значениями(при приведении
|
||||
// в булеву типу становятся false)
|
||||
// Обратите внимание что 0 приводится к false, а "0" к true,
|
||||
// не смотря на то, что "0"==0
|
||||
// false, null, undefined, NaN, 0 и "" это ложь; все остальное - истина.
|
||||
// Следует отметить, что 0 это ложь, а "0" - истина, несмотря на то, что 0 == "0".
|
||||
|
||||
///////////////////////////////////
|
||||
// 2. Переменные, массивы и объекты
|
||||
// 2. Переменные, Массивы и Объекты
|
||||
|
||||
// Переменные объявляются ключевым словом var. Javascript динамически
|
||||
// типизируемый, так что указывать тип не нужно.
|
||||
// Присвоение значения описывается с помощью оператора =
|
||||
// Переменные объявляются при помощи ключевого слова var. JavaScript - язык с
|
||||
// динамической типизацией, поэтому не нужно явно указывать тип. Для присваивания
|
||||
// значения переменной используется символ =
|
||||
var someVar = 5;
|
||||
|
||||
// если не указать ключевого слова var, ошибки не будет...
|
||||
// если вы пропустите слово var, вы не получите сообщение об ошибке...
|
||||
someOtherVar = 10;
|
||||
|
||||
// ...но переменная будет создана в глобальном контексте, в не области
|
||||
// видимости, в которой она была объявлена.
|
||||
// ...но ваша переменная будет создана в глобальном контексте, а не в текущем
|
||||
// гед вы ее объявили.
|
||||
|
||||
// Переменные объявленные без присвоения значения, содержать undefined
|
||||
// Переменным объявленным без присвоения устанавливается значение undefined.
|
||||
var someThirdVar; // = undefined
|
||||
|
||||
// Для математических операций над переменными есть короткая запись:
|
||||
someVar += 5; // тоже что someVar = someVar + 5; someVar равно 10 теперь
|
||||
someVar *= 10; // а теперь -- 100
|
||||
// У математических операций есть сокращённые формы:
|
||||
someVar += 5; // как someVar = someVar + 5; someVar теперь имеет значение 10
|
||||
someVar *= 10; // теперь someVar имеет значение 100
|
||||
|
||||
// еще более короткая запись для добавления и вычитания 1
|
||||
someVar++; // теперь someVar равно 101
|
||||
someVar--; // обратно к 100
|
||||
// а так же специальные операторы инкремент и декремент для увеличения и
|
||||
// уменьшения переменной на единицу соответственно
|
||||
someVar++; // теперь someVar имеет значение 101
|
||||
someVar--; // обратно 100
|
||||
|
||||
// Массивы -- упорядоченные списки значений любых типов.
|
||||
// Массивы это нумерованные списки из значений любого типа.
|
||||
var myArray = ["Hello", 45, true];
|
||||
|
||||
// Для доступу к элементам массивов используйте квадратные скобки.
|
||||
// Индексы массивов начинаются с 0
|
||||
// Их элементы могут быть доступны при помощи синтаксиса с квадратными скобками.
|
||||
// Индексы массивов начинаются с нуля.
|
||||
myArray[1]; // = 45
|
||||
|
||||
// Массивы мутабельны(изменяемы) и имеют переменную длину.
|
||||
myArray.push("World"); // добавить элемент
|
||||
// Массивы можно изменять, как и их длину.
|
||||
myArray.push("World");
|
||||
myArray.length; // = 4
|
||||
|
||||
// Добавить или изменить значение по конкретному индексу
|
||||
// Добавлять и редактировать определенный элемент
|
||||
myArray[3] = "Hello";
|
||||
|
||||
// Объекты javascript похожи на dictionary или map из других языков
|
||||
// программирования. Это неупорядочнные коллекции пар ключ-значение.
|
||||
// Объекты в JavaScript похожи на "словари" или ассоциативные массиы в других
|
||||
// языках: неупорядоченный набор пар ключ-значение.
|
||||
var myObj = {key1: "Hello", key2: "World"};
|
||||
|
||||
// Ключи -- это строки, но кавычки не требуются если названия явлюятся
|
||||
// корректными javascript идентификаторами. Значения могут быть любого типа.
|
||||
// Ключи это строки, но кавычки необязательны, если строка удовлетворяет
|
||||
// ограничениям для имён переменных. Значения могут быть любых типов.
|
||||
var myObj = {myKey: "myValue", "my other key": 4};
|
||||
|
||||
// Доступ к атрибту объекта можно получить с помощью квадратных скобок
|
||||
// Атрибуты объектов можно также получить, используя квадратные скобки,
|
||||
myObj["my other key"]; // = 4
|
||||
|
||||
// ... или используя точечную нотацию, при условии что ключ является
|
||||
// корректным идентификатором.
|
||||
// или через точку, при условии, что ключ является допустимым идентификатором.
|
||||
myObj.myKey; // = "myValue"
|
||||
|
||||
// Объекты мутабельны. В существуюещем объекте можно изменить значние
|
||||
// или добавить новый атрибут.
|
||||
// Объекты изменяемы; можно изменять значения и добавлять новые ключи.
|
||||
myObj.myThirdKey = true;
|
||||
|
||||
// При попытке доступа к атрибуту, который до этого не был создан, будет
|
||||
// возвращен undefined
|
||||
// Если вы попытаетесь получить доступ к несуществующему свойству,
|
||||
// вы получите undefined.
|
||||
myObj.myFourthKey; // = undefined
|
||||
|
||||
///////////////////////////////////
|
||||
// 3. Логика и Управляющие структуры
|
||||
// 3. Логика и управляющие конструкции.
|
||||
|
||||
// Синтаксис управляющих структур очень похож на его реализацию в Java.
|
||||
// Синтаксис для этого раздела почти такой же как в Java.
|
||||
|
||||
// if работает так как вы ожидаете.
|
||||
// Эта конструкция работает, как и следовало ожидать.
|
||||
var count = 1;
|
||||
if (count == 3){
|
||||
// выполнится, если значение count равно 3
|
||||
} else if (count == 4){
|
||||
// выполнится, если значение count равно 4
|
||||
if (count == 3) {
|
||||
// выполняется, если count равен 3
|
||||
} else if (count == 4) {
|
||||
// выполняется, если count равен 4
|
||||
} else {
|
||||
// выполнится, если значение count не будет равно ни 3 ни 4
|
||||
// выполняется, если не 3 и не 4
|
||||
}
|
||||
|
||||
// Поведение while тоже вполне предсказуемо
|
||||
// Как это делает while.
|
||||
while (true){
|
||||
// Бесконечный цикл
|
||||
// Бесконечный цикл!
|
||||
}
|
||||
|
||||
// Циклы do-while похожи на while, но они всегда выполняются хотябы 1 раз.
|
||||
// Do-while loops are like while loops, except they always run at least once.
|
||||
// Циклы do-while такие же как while, но они всегда выполняются хотя бы раз.
|
||||
var input
|
||||
do {
|
||||
input = getInput();
|
||||
} while (!isValid(input))
|
||||
|
||||
// Цикл for такой же как в C и Java:
|
||||
// инициализация; условие продолжения; итерация
|
||||
for (var i = 0; i < 5; i++){
|
||||
// выполнится 5 раз
|
||||
// цикл for является таким же, как C и Java:
|
||||
// инициализация; условие; шаг.
|
||||
for (var i = 0; i < 5; i++) {
|
||||
// будет запущен 5 раз
|
||||
}
|
||||
|
||||
// && - логическое и, || - логическое или
|
||||
if (house.size == "big" && house.color == "blue"){
|
||||
// && это логическое И, || это логическое ИЛИ
|
||||
if (house.size == "big" && house.colour == "blue") {
|
||||
house.contains = "bear";
|
||||
}
|
||||
if (color == "red" || color == "blue"){
|
||||
// если цвет или красный или синий
|
||||
if (colour == "red" || colour == "blue") {
|
||||
// цвет красный или синий
|
||||
}
|
||||
|
||||
// && и || удобны для установки значений по умолчанию.
|
||||
// && and || "short circuit", which is useful for setting default values.
|
||||
// || используется как "короткий цикл вычисления" для присваивания переменных.
|
||||
var name = otherName || "default";
|
||||
|
||||
// выражение switch проверяет равество с помощью ===
|
||||
// используйте 'break' после каждого case,
|
||||
// иначе помимо правильного case выполнятся и все последующие.
|
||||
grade = '4'; // оценка
|
||||
// Оператор switch выполняет проверку на равенство пр помощи ===
|
||||
// используйте break чтобы прервать выполнение после каждого case
|
||||
// или выполнение пойдёт далее, игнорируя при этом остальные проверки.
|
||||
grade = 'B';
|
||||
switch (grade) {
|
||||
case '5':
|
||||
console.log("Великолепно");
|
||||
case 'A':
|
||||
console.log("Great job");
|
||||
break;
|
||||
case '4':
|
||||
console.log("Неплохо");
|
||||
case 'B':
|
||||
console.log("OK job");
|
||||
break;
|
||||
case '3':
|
||||
console.log("Можно и лучше");
|
||||
case 'C':
|
||||
console.log("You can do better");
|
||||
break;
|
||||
default:
|
||||
console.log("Да уж.");
|
||||
console.log("Oy vey");
|
||||
break;
|
||||
}
|
||||
|
||||
@ -265,213 +254,197 @@ switch (grade) {
|
||||
///////////////////////////////////
|
||||
// 4. Функции, Область видимости и Замыкания
|
||||
|
||||
// Функции в JavaScript объявляются с помощью ключевого слова function.
|
||||
function myFunction(thing){
|
||||
return thing.toUpperCase(); // приведение к верхнему регистру
|
||||
// Функции в JavaScript объявляются при помощи ключевого слова function.
|
||||
function myFunction(thing) {
|
||||
return thing.toUpperCase();
|
||||
}
|
||||
myFunction("foo"); // = "FOO"
|
||||
|
||||
// Помните, что значение, которое должно быть возкращено должно начинаться
|
||||
// на той же строке, где расположено ключевое слово 'return'. В противном случае
|
||||
// будет возвращено undefined. Такое поведения объясняется автоматической
|
||||
// вставкой разделителей ';'. Помните этот факт, если используете
|
||||
// BSD стиль оформления кода.
|
||||
// Note that the value to be returned must start on the same line as the
|
||||
// 'return' keyword, otherwise you'll always return 'undefined' due to
|
||||
// automatic semicolon insertion. Watch out for this when using Allman style.
|
||||
// Обратите внимание, что значение, которое будет возвращено, должно начинаться
|
||||
// на той же строке, что и ключевое слово return, в противном случае вы будете
|
||||
// всегда возвращать undefined по причине автоматической вставки точки с запятой.
|
||||
// Следите за этим при использовании стиля форматирования Allman.
|
||||
function myFunction()
|
||||
{
|
||||
return // <- разделитель автоматически будет вставлен здесь
|
||||
return // <- здесь точка с запятой вставится автоматически
|
||||
{
|
||||
thisIsAn: 'object literal'
|
||||
}
|
||||
}
|
||||
myFunction(); // = undefined
|
||||
|
||||
// Функции в JavaScript являются объектами, поэтому их можно назначить в
|
||||
// переменные с разными названиями и передавать в другие функции, как аргументы,
|
||||
// на пример, при указании обработчика события.
|
||||
function myFunction(){
|
||||
// этот фрагмент кода будет вызван через 5 секунд
|
||||
// JavaScript функции - это объекты, поэтому они могут быть переприсвоены на
|
||||
// различные имена переменных и передаваться другим функциям в качестве аргументов,
|
||||
// например, когда назначается обработчик события:
|
||||
function myFunction() {
|
||||
// этот код будет вызван через 5 секунд
|
||||
}
|
||||
setTimeout(myFunction, 5000);
|
||||
// Обратите внимание, что setTimeout не является частью языка, однако он
|
||||
// доступен в API браузеров и Node.js.
|
||||
// Примечание: setTimeout не является частью языка, но реализован в браузерах и Node.js
|
||||
|
||||
// Объект функции на самом деле не обязательно объявлять с именем - можно
|
||||
// создать анонимную функцию прямо в аргументах другой функции.
|
||||
setTimeout(function(){
|
||||
// этот фрагмент кода будет вызван через 5 секунд
|
||||
// Функции не обязательно должны иметь имя при объявлении - вы можете написать
|
||||
// анонимное определение функции непосредственно в агрументе другой функции.
|
||||
setTimeout(function() {
|
||||
// этот код будет вызван через 5 секунд
|
||||
}, 5000);
|
||||
|
||||
// В JavaScript есть области видимости. У функций есть собственные области
|
||||
// видимости, у других блоков их нет.
|
||||
if (true){
|
||||
// В JavaScript есть область видимости функции; функции имеют свою область
|
||||
// видимости, а другие блоки - нет.
|
||||
if (true) {
|
||||
var i = 5;
|
||||
}
|
||||
i; // = 5, а не undefined, как это было бы в языке, создающем
|
||||
// области видисти для блоков кода
|
||||
i; // = 5 - не undefined как ожидалось бы в языках с блочной областью видимости
|
||||
|
||||
// Это привело к появлению паттерна общего назначения "immediately-executing
|
||||
// anonymous functions" (сразу выполняющиеся анонимные функции), который
|
||||
// позволяет предотвратить запись временных переменных в общую облать видимости.
|
||||
(function(){
|
||||
// Это привело к общепринятому шаблону "самозапускающихся анонимных функций",
|
||||
// которые препятствуют проникновению переменных в глобальную область видимости
|
||||
(function() {
|
||||
var temporary = 5;
|
||||
// Для доступа к глобальной области видимости можно использовать запись в
|
||||
// некоторый 'глобальный объект', для браузеров это 'window'. Глобальный
|
||||
// объект может называться по-разному в небраузерных средах, таких Node.js.
|
||||
// Мы можем получить доступ к глобальной области для записи в "глобальный объект",
|
||||
// который в веб-браузере всегда window. Глобальный объект может иметь другое
|
||||
// имя в таких платформах, как Node.js
|
||||
window.permanent = 10;
|
||||
})();
|
||||
temporary; // вызывает исключение ReferenceError
|
||||
temporary; // вызовет сообщение об ошибке с типом ReferenceError
|
||||
permanent; // = 10
|
||||
|
||||
// Одной из сильных сторон JavaScript являются замыкания. Если функция
|
||||
// объявлена в внутри другой функции, внутренняя функция имеет доступ ко всем
|
||||
// переменным внешней функции, даже после того, как внешняя функции завершила
|
||||
// свое выполнение.
|
||||
function sayHelloInFiveSeconds(name){
|
||||
var prompt = "Привет, " + name + "!";
|
||||
// Внутренние функции помещаются в локальную область видимости, как-будто
|
||||
// они объявлены с ключевым словом 'var'.
|
||||
function inner(){
|
||||
// Одной из самых мощных возможностей JavaScript являются замыкания. Если функция
|
||||
// определена внутри другой функции, то внутренняя функция имеет доступ к
|
||||
// переменным внешней функции, даже после того, как контекст выполнения выйдет из
|
||||
// внешней функции.
|
||||
function sayHelloInFiveSeconds(name) {
|
||||
var prompt = "Hello, " + name + "!";
|
||||
// Внутренние функции по умолчанию помещаются в локальную область видимости,
|
||||
// как если бы они были объявлены с var.
|
||||
function inner() {
|
||||
alert(prompt);
|
||||
}
|
||||
setTimeout(inner, 5000);
|
||||
// setTimeout является асинхроннной, и поэтому функция sayHelloInFiveSeconds
|
||||
// завершит свое выполнение сразу и setTimeout вызовет inner позже.
|
||||
// Однако, так как inner "закрыта внутри" или "замкнута в"
|
||||
// sayHelloInFiveSeconds, inner все еще будет иметь доступ к переменной
|
||||
// prompt, когда будет вызвана.
|
||||
// setTimeout асинхронна, поэтому функция sayHelloInFiveSeconds сразу выйдет
|
||||
// и тело setTimeout будет вызвано позже. Однако, поскольку внутренняя
|
||||
// функция "замкнута", она по-прежнему имеет доступ к переменной prompt,
|
||||
// когда sayHelloInFiveSeconds вызывется.
|
||||
}
|
||||
sayHelloInFiveSeconds("Вася"); // откроет модальное окно с сообщением
|
||||
// "Привет, Вася" по истечении 5 секунд.
|
||||
|
||||
sayHelloInFiveSeconds("Adam"); // откроется окно с "Hello, Adam!" через 5 секунд
|
||||
|
||||
///////////////////////////////////
|
||||
// 5. Немного еще об Объектах. Конструкторы и Прототипы
|
||||
// 5. Подробнее про Объекты, Конструкторы и Прототипы
|
||||
|
||||
// Объекты могут содержать функции
|
||||
// Объекты могут содержать в себе функции.
|
||||
var myObj = {
|
||||
myFunc: function(){
|
||||
myFunc: function() {
|
||||
return "Hello world!";
|
||||
}
|
||||
};
|
||||
myObj.myFunc(); // = "Hello world!"
|
||||
|
||||
// Когда функции прикрепленные к объекту вызываются, они могут получить доступ
|
||||
// к данным объекта, ипользуя ключевое слово this.
|
||||
// Когда функции, прикрепленные к объекту, вызываются, они могут получить доступ
|
||||
// к этому объекту с помощью ключевого слова this.
|
||||
myObj = {
|
||||
myString: "Hello world!",
|
||||
myFunc: function(){
|
||||
myFunc: function() {
|
||||
return this.myString;
|
||||
}
|
||||
};
|
||||
myObj.myFunc(); // = "Hello world!"
|
||||
|
||||
// Содержание this определяется исходя из того, как была вызвана функция, а
|
||||
// не места её определения. По этой причине наша функция не будет работать вне
|
||||
// контекста объекта.
|
||||
// Какое это значение имеет к тому, как вызвана функция и где она определена.
|
||||
// Итак, наша функция не работает, если она вызывается не в контексте объекта.
|
||||
var myFunc = myObj.myFunc;
|
||||
myFunc(); // = undefined
|
||||
|
||||
// И напротив, функция может быть присвоена объекту и получить доступ к нему
|
||||
// через this, даже если она не была прикреплена к объекту в момент её создания.
|
||||
var myOtherFunc = function(){
|
||||
return this.myString.toUpperCase();
|
||||
// И наоборот, функция может быть присвоена объекту и получать доступ к нему
|
||||
// через this, даже если она не была присвоена при объявлении.
|
||||
var myOtherFunc = function() {
|
||||
}
|
||||
myObj.myOtherFunc = myOtherFunc;
|
||||
myObj.myOtherFunc(); // = "HELLO WORLD!"
|
||||
|
||||
// Также можно указать контекс выполнения фунции с помощью 'call' или 'apply'.
|
||||
var anotherFunc = function(s){
|
||||
// Мы можем также указать контекст для выполнения функции, когда мы вызываем ее
|
||||
// с помощью call или apply.
|
||||
var anotherFunc = function(s) {
|
||||
return this.myString + s;
|
||||
}
|
||||
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"
|
||||
|
||||
// Функция 'apply' очень похожа, но принимает массив со списком аргументов.
|
||||
|
||||
// Функция apply аналогична, но принимает массив аргументов.
|
||||
anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"
|
||||
|
||||
// Это может быть удобно, когда работаешь с фунцией принимающей на вход
|
||||
// последовательность аргументов и нужно передать их в виде массива.
|
||||
|
||||
// Это полезно при работе с функцией, которая принимает последовательность
|
||||
// аргументов, и вы хотите передать массив.
|
||||
Math.min(42, 6, 27); // = 6
|
||||
Math.min([42, 6, 27]); // = NaN (uh-oh!)
|
||||
Math.min([42, 6, 27]); // = NaN (не сработает!)
|
||||
Math.min.apply(Math, [42, 6, 27]); // = 6
|
||||
|
||||
// Однако, 'call' и 'apply' не имеют постоянного эффекта. Если вы хотите
|
||||
// зафиксировать контекст для функции, используйте bind.
|
||||
|
||||
// Но, call и apply - временные. Когда мы хотим связать функцию, мы можем
|
||||
// использовать bind.
|
||||
var boundFunc = anotherFunc.bind(myObj);
|
||||
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"
|
||||
|
||||
// bind также можно использовать чтобы частично передать аргументы в
|
||||
// функцию (каррировать).
|
||||
|
||||
var product = function(a, b){ return a * b; }
|
||||
// Bind также может использоваться, для частичного применения (каррирование) функции
|
||||
var product = function(a, b) { return a * b; }
|
||||
var doubler = product.bind(this, 2);
|
||||
doubler(8); // = 16
|
||||
|
||||
// Когда функция вызывается с ключевым словом new, создается новый объект.
|
||||
// Данный объект становится доступным функции через ключевое слово this.
|
||||
// Функции спроектированные вызываться таким способом называются конструкторами.
|
||||
|
||||
var MyConstructor = function(){
|
||||
// Когда вы вызываете функцию с помощью ключевого слова new создается новый объект,
|
||||
// и создает доступ к функции при помощи this. Такие функции называют конструкторами.
|
||||
var MyConstructor = function() {
|
||||
this.myNumber = 5;
|
||||
}
|
||||
myNewObj = new MyConstructor(); // = {myNumber: 5}
|
||||
myNewObj.myNumber; // = 5
|
||||
|
||||
// Любой объект в JavaScript имеет 'прототип'. Когда вы пытаетесь получить
|
||||
// доступ к свойству не объявленному в данном объекте, интерпретатор будет
|
||||
// искать его в прототипе.
|
||||
// Каждый объект в JavaScript имеет свойтво prototype. Когда вы хотите получить
|
||||
// доступ к свойтву объекта, которое не существует в этом объекте, интерпритатор
|
||||
// будет искать это свойство в прототипе.
|
||||
|
||||
// Некоторые реализации JS позволяют получить доступ к прототипу с помощью
|
||||
// "волшебного" свойства __proto__. До момента пока оно не являются стандартным,
|
||||
// __proto__ полезно лишь для изучения прототипов в JavaScript. Мы разберемся
|
||||
// со стандартными способами работы с прототипом несколько позже.
|
||||
// Некоторые реализации языка позволяют получить доступ к объекту прототипа
|
||||
// через свойство __proto__. Несмотря на то, что это может быть полезно для
|
||||
// понимания прототипов, это не часть стандарта; мы увидим стандартные способы
|
||||
// использования прототипов позже.
|
||||
var myObj = {
|
||||
myString: "Hello world!"
|
||||
};
|
||||
var myPrototype = {
|
||||
meaningOfLife: 42,
|
||||
myFunc: function(){
|
||||
myFunc: function() {
|
||||
return this.myString.toLowerCase()
|
||||
}
|
||||
};
|
||||
|
||||
myObj.__proto__ = myPrototype;
|
||||
myObj.meaningOfLife; // = 42
|
||||
|
||||
// Для функций это так же работает.
|
||||
myObj.myFunc(); // = "hello world!"
|
||||
|
||||
// Естественно, если в свойства нет в прототипе, поиск будет продолжен в
|
||||
// Если интерпритатор не найдет свойство в прототипе, то продожит поиск в
|
||||
// прототипе прототипа и так далее.
|
||||
myPrototype.__proto__ = {
|
||||
myBoolean: true
|
||||
};
|
||||
myObj.myBoolean; // = true
|
||||
|
||||
// Ничего не копируется, каждый объект хранит ссылку на свой прототип. Если
|
||||
// изменить прототип, все изменения отразятся во всех его потомках.
|
||||
// Здесь не участвует копирование; каждый объект хранит ссылку на свой прототип.
|
||||
// Это означает, что мы можем изменить прототип и наши изменения будут отражены везде
|
||||
myPrototype.meaningOfLife = 43;
|
||||
myObj.meaningOfLife; // = 43
|
||||
|
||||
// Как было сказано выше, __proto__ не является стандартом, и нет стандартного
|
||||
// способа изменить прототип у созданного объекта. Однако, есть два способа
|
||||
// создать объект с заданным прототипом.
|
||||
// Мы упомянули, что свойтсво __proto__ нестандартно, и нет никакого стандартного
|
||||
// способа, чтобы изменить прототип существующего объекта. Однако, есть два
|
||||
// способа создать новый объект с заданным прототипом.
|
||||
|
||||
// Первый способ - Object.create, был добавлен в JS относительно недавно, и
|
||||
// потому не доступен в более ранних реализациях языка.
|
||||
// Первый способ это Object.create, который появился в ECMAScript 5 и есть еще
|
||||
// не во всех реализациях языка.
|
||||
var myObj = Object.create(myPrototype);
|
||||
myObj.meaningOfLife; // = 43
|
||||
|
||||
// Второй вариан доступен везде и связан с конструкторами. Конструкторы имеют
|
||||
// свойство prototype. Это вовсе не прототип функции конструктора, напротив,
|
||||
// это прототип, который присваевается новым объектам, созданным с этим
|
||||
// конструктором с помощью ключевого слова new.
|
||||
// Второй способ, который работает везде, имеет дело с конструкторами.
|
||||
// У конструкторов есть свойство с именем prototype. Это не прототип
|
||||
// функции-конструктора; напротив, это прототип для новых объектов, которые
|
||||
// будут созданы с помощью этого конструктора и ключевого слова new
|
||||
MyConstructor.prototype = {
|
||||
myNumber: 5,
|
||||
getMyNumber: function(){
|
||||
getMyNumber: function() {
|
||||
return this.myNumber;
|
||||
}
|
||||
};
|
||||
@ -480,42 +453,41 @@ myNewObj2.getMyNumber(); // = 5
|
||||
myNewObj2.myNumber = 6
|
||||
myNewObj2.getMyNumber(); // = 6
|
||||
|
||||
// У встроенных типов таких, как строки и числа, тоже есть конструкторы,
|
||||
// создающие эквивалентные объекты-обертки.
|
||||
// У встроенных типов, таких как строки и числа также есть конструкторы, которые
|
||||
// создают эквивалентые объекты-обертки.
|
||||
var myNumber = 12;
|
||||
var myNumberObj = new Number(12);
|
||||
myNumber == myNumberObj; // = true
|
||||
|
||||
// Правда, они не совсем эквивалентны.
|
||||
// За исключением того, что они не в точности равны.
|
||||
typeof myNumber; // = 'number'
|
||||
typeof myNumberObj; // = 'object'
|
||||
myNumber === myNumberObj; // = false
|
||||
if (0){
|
||||
// Этот фрагмент кода не будет выпонен, так как 0 приводится к false
|
||||
if (0) {
|
||||
// Этот код не выполнятся, потому что 0 - это ложь.
|
||||
}
|
||||
if (Number(0)){
|
||||
// Этот фрагмент кода *будет* выпонен, так как Number(0) приводится к true.
|
||||
if (Number(0)) {
|
||||
// Этот код выполнится, потому что Number(0) это истина.
|
||||
}
|
||||
|
||||
// Однако, оберточные объекты и обычные встроенные типы имеют общие прототипы,
|
||||
// следовательно вы можете расширить функциональность строки, например.
|
||||
String.prototype.firstCharacter = function(){
|
||||
// Впрочем, обертки это объекты и их можно расширять, например:
|
||||
String.prototype.firstCharacter = function() {
|
||||
return this.charAt(0);
|
||||
}
|
||||
"abc".firstCharacter(); // = "a"
|
||||
|
||||
// Этот факт часто используется для создания полифилов(polyfill) - реализации
|
||||
// новых возможностей JS в его более старых версиях для того чтобы их можно было
|
||||
// использовать в устаревших браузерах.
|
||||
// Это часто используется в полифиллах, которые реализуют новые возможности
|
||||
// JavaScript в старой реализации языка, так что они могут быть использованы в
|
||||
// старых средах, таких как устаревшие браузеры.
|
||||
|
||||
// Например, мы упомянули, что Object.create не доступен во всех версиях
|
||||
// JavaScript, но мы можем создать полифилл.
|
||||
if (Object.create === undefined){ // не переопределяем, если есть
|
||||
Object.create = function(proto){
|
||||
// создаем временный конструктор с заданным прототипом
|
||||
// Например, мы упомянули, что Object.create доступен не во всех реализациях, но
|
||||
// мы сможем использовать его с этим полифиллом:
|
||||
if (Object.create === undefined) { // не перезаписывать метод, если он существует
|
||||
Object.create = function(proto) {
|
||||
// создать временный конструктор с правильным прототипом
|
||||
var Constructor = function(){};
|
||||
Constructor.prototype = proto;
|
||||
// создаём новый объект с правильным прототипом
|
||||
// затем использовать его для создания нового объекта, на основе прототипа
|
||||
return new Constructor();
|
||||
}
|
||||
}
|
||||
@ -523,21 +495,16 @@ if (Object.create === undefined){ // не переопределяем, если
|
||||
|
||||
## Что еще почитать
|
||||
|
||||
[Современный учебник JavaScript](http://learn.javascript.ru/) от Ильи Кантора
|
||||
является довольно качественным и глубоким учебным материалом, освещающим все
|
||||
особенности современного языка. Помимо учебника на том же домене можно найти
|
||||
[перевод спецификации ECMAScript 5.1](http://es5.javascript.ru/) и справочник по
|
||||
возможностям языка.
|
||||
[Современный учебник JavaScript (Илья Кантор)](http://learn.javascript.ru) -
|
||||
качественный учебник по JavaScript на русском языке.
|
||||
|
||||
[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/ru/) позволяет
|
||||
довольно быстро изучить основные тонкие места в работе с JS, но фокусируется
|
||||
только на таких моментах
|
||||
[Mozilla Developer Network](https://developer.mozilla.org/ru/docs/Web/JavaScript) -
|
||||
предоставляет отличную документацию для JavaScript, как он используется в браузерах.
|
||||
Кроме того, это вики, поэтому, если вы знаете больше, вы можете помочь другим,
|
||||
делясь своими знаниями.
|
||||
|
||||
[Справочник](https://developer.mozilla.org/ru/docs/JavaScript) от MDN
|
||||
(Mozilla Development Network) содержит информацию о возможностях языка на
|
||||
английском.
|
||||
|
||||
Название проекта ["Принципы написания консистентного, идиоматического кода на
|
||||
JavaScript"](https://github.com/rwaldron/idiomatic.js/tree/master/translations/ru_RU)
|
||||
говорит само за себя.
|
||||
[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/ru/) - это
|
||||
подробное руководство всех неинтуитивных особенностей языка.
|
||||
|
||||
[Stack Overflow](http://stackoverflow.com/questions/tagged/javascript) - можно
|
||||
найти ответ почти на любой ваш вопрос, а если его нет, то задать вопрос самому.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user