learnxinyminutes-docs/ru-ru/javascript-ru.html.markdown

700 lines
35 KiB
Markdown
Raw Normal View History

2014-10-30 15:04:56 +00:00
---
language: javascript
contributors:
- ["Adam Brenecki", "http://adam.brenecki.id.au"]
- ["Ariel Krakowski", "http://www.learneroo.com"]
translators:
- ["--mynamehere--", "http://github.com/--mynamehere--"]
filename: javascript-ru.js
lang: ru-ru
---
2014-10-30 18:58:59 +00:00
todo: привести все названия языка к коректному написанию
2014-10-30 18:41:16 +00:00
Javascript был разработан Бренданом Айком из Netcape в 1995. Изначально
предполагалось, что он станет простым вариантом скриптового языка для сайтов,
дополняющий к Java, который в свою очередь использовался бы для более сложных
web-приложений. Но тонкая интегрированность javascript с web-страницей и
встроенная поддержка в браузерах привели к тому, чтобы он стал более
распространен в web-разработке, чем Java.
2014-10-30 15:04:56 +00:00
JavaScript was created by Netscape's Brendan Eich in 1995. It was originally
intended as a simpler scripting language for websites, complementing the use of
Java for more complex web applications, but its tight integration with Web pages
and built-in support in browsers has caused it to become far more common than
Java in web frontends.
2014-10-30 18:41:16 +00:00
Использование Javascript не ограничивается браузерами. Проект Node.js,
предоставляющий независимую среду выполнения на движке Google Chrome V8
JavaScript, становится все более популярным.
2014-10-30 15:04:56 +00:00
JavaScript isn't just limited to web browsers, though: Node.js, a project that
provides a standalone runtime for Google Chrome's V8 JavaScript engine, is
becoming more and more popular.
2014-10-30 18:41:16 +00:00
Обратная связь важна и нужна! Вы можете написаться мне
на [@_remedy]() или
[mymail]().
2014-10-30 15:04:56 +00:00
Feedback would be highly appreciated! You can reach me at
[@adambrenecki](https://twitter.com/adambrenecki), or
[adam@brenecki.id.au](mailto:adam@brenecki.id.au).
```js
2014-10-30 18:44:21 +00:00
// Комментарии оформляются как в C.
// Обнострочнные комментарии начинаются с двух слешей,
2014-10-30 15:04:56 +00:00
// Comments are like C. Single-line comments start with two slashes,
2014-10-30 18:44:21 +00:00
/* а многострочные с слеша и звездочки
и заканчиваются звездочеий и слешом */
2014-10-30 15:04:56 +00:00
/* and multiline comments start with slash-star
and end with star-slash */
2014-10-30 18:44:21 +00:00
// Выражения разделяются с помощью ;
2014-10-30 15:04:56 +00:00
// Statements can be terminated by ;
doStuff();
2014-10-30 18:44:21 +00:00
// ... но этого можно и делать, разделители подставляются автоматически
// после перехода на новую строку за исключением особых случаев
2014-10-30 15:04:56 +00:00
// ... but they don't have to be, as semicolons are automatically inserted
// wherever there's a newline, except in certain cases.
doStuff()
2014-10-30 18:44:21 +00:00
// Это может приводить к непредсказуемому результату и поэтому мы будем
// использовать разделители в этом туре.
2014-10-30 15:04:56 +00:00
// Because those cases can cause unexpected results, we'll keep on using
// semicolons in this guide.
///////////////////////////////////
2014-10-30 18:44:21 +00:00
// 1. Числа, Строки и Операторы
2014-10-30 15:04:56 +00:00
// 1. Numbers, Strings and Operators
2014-10-30 18:44:21 +00:00
// В Javasript всего 1 числовой тип - 64-битное число с плавающей точкой стандарта
// IEEE 754)
// todo: сформулировать
2014-10-30 15:04:56 +00:00
// JavaScript has one number type (which is a 64-bit IEEE 754 double).
// Doubles have a 52-bit mantissa, which is enough to store integers
// up to about 9✕10¹⁵ precisely.
3; // = 3
1.5; // = 1.5
2014-10-30 18:44:21 +00:00
// В основном базовая арифметика работает предсказуемо
2014-10-30 15:04:56 +00:00
// Some basic arithmetic works as you'd expect.
1 + 1; // = 2
.1 + .2; // = 0.30000000000000004
8 - 1; // = 7
10 * 2; // = 20
35 / 5; // = 7
2014-10-30 18:44:21 +00:00
// Включая нецелочисленное деление (todo:уточнить!)
2014-10-30 15:04:56 +00:00
// Including uneven division.
5 / 2; // = 2.5
2014-10-30 18:44:21 +00:00
// Двоичные операции тоже есть. Если применить двоичную операцию к float-числу,
// оно будет приведено к 32-битному целому со знаком.
2014-10-30 15:04:56 +00:00
// Bitwise operations also work; when you perform a bitwise operation your float
// is converted to a signed int *up to* 32 bits.
1 << 2; // = 4
2014-10-30 18:44:21 +00:00
// (todo:перевести)
2014-10-30 15:04:56 +00:00
// Precedence is enforced with parentheses.
(1 + 3) * 2; // = 8
2014-10-30 18:44:21 +00:00
// Есть три особых не реальных числовых значения:
2014-10-30 15:04:56 +00:00
// There are three special not-a-real-number values:
2014-10-30 18:44:21 +00:00
Infinity; // допустим, результат операции 1/0
-Infinity; // допустим, результат операции -1/0
NaN; // допустим, результат операции 0/0
2014-10-30 15:04:56 +00:00
2014-10-30 18:44:21 +00:00
// Так же есть тип булевых данных.
2014-10-30 15:04:56 +00:00
// There's also a boolean type.
true;
false;
2014-10-30 18:44:21 +00:00
// Строки создаются с помощью ' или ".
2014-10-30 15:04:56 +00:00
// Strings are created with ' or ".
'abc';
"Hello, world";
2014-10-30 18:44:21 +00:00
// Оператор ! означает отрицание
2014-10-30 15:04:56 +00:00
!true; // = false
!false; // = true
2014-10-30 18:44:21 +00:00
// Равество это ===
2014-10-30 15:04:56 +00:00
1 === 1; // = true
2 === 1; // = false
2014-10-30 18:44:21 +00:00
// Неравенство это !==
2014-10-30 15:04:56 +00:00
1 !== 1; // = false
2 !== 1; // = true
2014-10-30 18:44:21 +00:00
// Еще сравнения
2014-10-30 15:04:56 +00:00
1 < 10; // = true
1 > 10; // = false
2 <= 2; // = true
2 >= 2; // = true
2014-10-30 18:44:21 +00:00
// Строки складываются с помощью +
2014-10-30 15:04:56 +00:00
"Hello " + "world!"; // = "Hello world!"
2014-10-30 18:44:21 +00:00
// и сравниваются с помощью < и >
2014-10-30 15:04:56 +00:00
"a" < "b"; // = true
2014-10-30 18:44:21 +00:00
// Приведение типов выполняется при сравнении с ==...
2014-10-30 15:04:56 +00:00
// Type coercion is performed for comparisons with double equals...
"5" == 5; // = true
null == undefined; // = true
2014-10-30 18:44:21 +00:00
// ...в отличие от ===
2014-10-30 15:04:56 +00:00
"5" === 5; // = false
null === undefined; // = false
2014-10-30 18:44:21 +00:00
// Для доступа к конкретному символу строки используйте charAt
2014-10-30 15:04:56 +00:00
// You can access characters in a string with charAt
"This is a string".charAt(0); // = 'T'
2014-10-30 18:44:21 +00:00
// ... или используйте substring для получения подстроки
2014-10-30 15:04:56 +00:00
// ...or use substring to get larger pieces
"Hello world".substring(0, 5); // = "Hello"
2014-10-30 18:44:21 +00:00
// length(длина) - свойство, не используйте ()
2014-10-30 15:04:56 +00:00
// length is a property, so don't use ()
"Hello".length; // = 5
2014-10-30 18:44:21 +00:00
// Есть null и undefined
2014-10-30 15:04:56 +00:00
// There's also null and undefined
2014-10-30 18:44:21 +00:00
null; // используется что бы указать явно, что значения нет
undefined; // испрользуется чтобы показать, что значения не было установлено
// собственно, undefined так и переводится
2014-10-30 15:04:56 +00:00
2014-10-30 18:44:21 +00:00
// false, null, undefined, NaN, 0 и "" являются falsy-значениями(при приведении
// в булеву типу становятся false)
2014-10-30 15:04:56 +00:00
// false, null, undefined, NaN, 0 and "" are falsy; everything else is truthy.
2014-10-30 18:44:21 +00:00
// Обратите внимание что 0 приводится к false, а "0" к true, не смотря на то,
// что "0"==0
2014-10-30 15:04:56 +00:00
// Note that 0 is falsy and "0" is truthy, even though 0 == "0".
///////////////////////////////////
2014-10-30 18:58:59 +00:00
// 2. Переменные, массивы и объекты
2014-10-30 15:04:56 +00:00
2014-10-30 18:58:59 +00:00
// Переменные объявляются ключевым словом var. Javascript динамически
// типизируемый, так что указывать тип не нужно.
// Присвоение значения описывается с помощью оператора =
2014-10-30 15:04:56 +00:00
// Variables are declared with the var keyword. JavaScript is dynamically typed,
// so you don't need to specify type. Assignment uses a single = character.
var someVar = 5;
2014-10-30 18:58:59 +00:00
// если не указать ключевого слова var, ошибки не будет...
2014-10-30 15:04:56 +00:00
// if you leave the var keyword off, you won't get an error...
someOtherVar = 10;
2014-10-30 18:58:59 +00:00
// ...но переменная будет создана в глобальном контексте, в не области
// видимости, в которой она была объявлена.
2014-10-30 15:04:56 +00:00
// ...but your variable will be created in the global scope, not in the scope
// you defined it in.
2014-10-30 18:58:59 +00:00
// Переменные объявленные без присвоения значения, содержать undefined
2014-10-30 15:04:56 +00:00
// Variables declared without being assigned to are set to undefined.
var someThirdVar; // = undefined
2014-10-30 18:58:59 +00:00
// Для математических операций над числами есть короткая запись:
2014-10-30 15:04:56 +00:00
// There's shorthand for performing math operations on variables:
2014-10-30 18:58:59 +00:00
someVar += 5; // тоже что someVar = someVar + 5; someVar равно 10 теперь
someVar *= 10; // а теперь -- 100
2014-10-30 15:04:56 +00:00
2014-10-30 18:58:59 +00:00
// еще более короткая запись для добавления и вычитания 1
someVar++; // теперь someVar равно 101
someVar--; // обратно к 100
2014-10-30 15:04:56 +00:00
2014-10-30 18:58:59 +00:00
// Массивы -- упорядоченные списки значений любых типов.
2014-10-30 15:04:56 +00:00
// Arrays are ordered lists of values, of any type.
var myArray = ["Hello", 45, true];
2014-10-30 18:58:59 +00:00
// Для доступу к элементам массивов используйте квадратные скобки.
// Индексы массивов начинаются с 0
2014-10-30 15:04:56 +00:00
// Their members can be accessed using the square-brackets subscript syntax.
// Array indices start at zero.
myArray[1]; // = 45
2014-10-30 18:58:59 +00:00
// Массивы мутабельны(изменяемы) и имеют переменную длину.
2014-10-30 15:04:56 +00:00
// Arrays are mutable and of variable length.
2014-10-30 18:58:59 +00:00
myArray.push("World"); // добавить элемент
2014-10-30 15:04:56 +00:00
myArray.length; // = 4
2014-10-30 18:58:59 +00:00
// Добавить или изменить значение по конкретному индексу
2014-10-30 15:04:56 +00:00
myArray[3] = "Hello";
2014-10-30 18:58:59 +00:00
// Объёкты javascript похожи на dictionary или map из других языков
// программирования. Это неупорядочнные коллекции пар ключ-значение.
2014-10-30 15:04:56 +00:00
// JavaScript's objects are equivalent to 'dictionaries' or 'maps' in other
// languages: an unordered collection of key-value pairs.
var myObj = {key1: "Hello", key2: "World"};
2014-10-30 18:58:59 +00:00
// Ключи -- это строки, но кавычки не требуются если названия явлюятся
// корректными javascript идентификаторами. Значения могут быть любого типа.
2014-10-30 15:04:56 +00:00
// Keys are strings, but quotes aren't required if they're a valid
// JavaScript identifier. Values can be any type.
var myObj = {myKey: "myValue", "my other key": 4};
2014-10-30 18:58:59 +00:00
// Доступ к атрибту объекта можно получить с помощью квадратных скобок
2014-10-30 15:04:56 +00:00
// Object attributes can also be accessed using the subscript syntax,
myObj["my other key"]; // = 4
2014-10-30 18:58:59 +00:00
// ... или используя точечную нотацию, при условии что ключ является
2014-11-01 19:55:18 +00:00
// корректным идентификатором.
2014-10-30 15:04:56 +00:00
// ... or using the dot syntax, provided the key is a valid identifier.
myObj.myKey; // = "myValue"
2014-10-30 18:58:59 +00:00
// Объекты мутабельны. В существуюещем объекте можно изменить значние
2014-11-01 19:55:18 +00:00
// или добавить новый атрибут.
2014-10-30 15:04:56 +00:00
// Objects are mutable; values can be changed and new keys added.
myObj.myThirdKey = true;
2014-10-30 18:58:59 +00:00
// При попытке доступа к атрибуту, который до этого не был создан, будет
// возвращен undefined
2014-10-30 15:04:56 +00:00
// If you try to access a value that's not yet set, you'll get undefined.
myObj.myFourthKey; // = undefined
///////////////////////////////////
2014-11-01 19:54:49 +00:00
// 3. Логика и управляющие структуры
2014-10-30 15:04:56 +00:00
// 3. Logic and Control Structures
2014-11-01 19:54:49 +00:00
//
// Синтаксис управляющих структур очень похож на его реализацию в Java.
2014-10-30 15:04:56 +00:00
// The syntax for this section is almost identical to Java's.
2014-11-01 19:54:49 +00:00
// if работает так как вы ожидаете.
2014-10-30 15:04:56 +00:00
// The if structure works as you'd expect.
var count = 1;
if (count == 3){
2014-11-01 19:54:49 +00:00
// выполнится, если значение count равно 3
2014-10-30 15:04:56 +00:00
} else if (count == 4){
2014-11-01 19:54:49 +00:00
// выполнится, если значение count равно 4
2014-10-30 15:04:56 +00:00
} else {
2014-11-01 19:54:49 +00:00
// выполнится, если значение countне будет равно ни 3 ни 4
2014-10-30 15:04:56 +00:00
}
2014-11-01 19:54:49 +00:00
// Поведение while тоже вполне предсказуемо
2014-10-30 15:04:56 +00:00
while (true){
2014-11-01 19:54:49 +00:00
// Бесконечный цикл
2014-10-30 15:04:56 +00:00
}
2014-11-01 19:54:49 +00:00
// Циклы do-while похожи на while, но они всегда выполняются хотябы 1 раз.
2014-10-30 15:04:56 +00:00
// Do-while loops are like while loops, except they always run at least once.
var input
do {
input = getInput();
} while (!isValid(input))
2014-11-01 19:54:49 +00:00
// Цикл for такой же как в C b Java:
// инициализация; условие продолжения; итерация
2014-10-30 15:04:56 +00:00
// the for loop is the same as C and Java:
// initialisation; continue condition; iteration.
for (var i = 0; i < 5; i++){
2014-11-01 19:54:49 +00:00
// выполнится 5 раз
2014-10-30 15:04:56 +00:00
// will run 5 times
}
2014-11-01 19:54:49 +00:00
// && - логическое и, || - логическое или
2014-10-30 15:04:56 +00:00
// && is logical and, || is logical or
2014-11-01 19:54:49 +00:00
if (house.size == "big" && house.color == "blue"){
2014-10-30 15:04:56 +00:00
house.contains = "bear";
}
2014-11-01 19:54:49 +00:00
if (color == "red" || color == "blue"){
// если цвет или красный или синий
2014-10-30 15:04:56 +00:00
// colour is either red or blue
}
2014-11-01 19:54:49 +00:00
// && и || удобны для установки значений по умолчанию.
2014-10-30 15:04:56 +00:00
// && and || "short circuit", which is useful for setting default values.
var name = otherName || "default";
2014-11-01 19:54:49 +00:00
// выражение switch проверяет равество с помощью ===
// используйте 'break' после каждого case
// иначе помимо правильного case выполнятся и все последующие.
2014-10-30 15:04:56 +00:00
// switch statement checks for equality with ===
// use 'break' after each case
// or the cases after the correct one will be executed too.
2014-11-01 19:54:49 +00:00
grade = '4'; // оценка
2014-10-30 15:04:56 +00:00
switch (grade) {
2014-11-01 19:54:49 +00:00
case '5':
console.log("Великолепно");
2014-10-30 15:04:56 +00:00
break;
2014-11-01 19:54:49 +00:00
case '4':
console.log("Неплохо");
2014-10-30 15:04:56 +00:00
break;
2014-11-01 19:54:49 +00:00
case '3':
console.log("Можно и лучше");
2014-10-30 15:04:56 +00:00
break;
default:
2014-11-01 19:54:49 +00:00
console.log("Да уж.");
2014-10-30 15:04:56 +00:00
break;
}
///////////////////////////////////
// 4. Функции, Область видимости и Замыкания
2014-10-30 15:04:56 +00:00
// 4. Functions, Scope and Closures
// Функции в JavaScript объявляются с помощью ключевого слова function.
2014-10-30 15:04:56 +00:00
// JavaScript functions are declared with the function keyword.
function myFunction(thing){
return thing.toUpperCase(); // приведение к верхнему регистру
2014-10-30 15:04:56 +00:00
}
myFunction("foo"); // = "FOO"
// Помните, что значение, которое должно быть возкращено должно начинаться
// на той же строке, где расположено ключевое слово 'return'. В противном случае
// будет возвращено undefined. Такое поведения объясняется автоматической
// вставкой разделителей ';'. Оглядывйтесь на этот факт, если используете
// BSD стиль оформления кода.
2014-10-30 15:04:56 +00:00
// 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.
function myFunction()
{
return // <- разделитель автоматически будет вставлен здесь
2014-10-30 15:04:56 +00:00
{
thisIsAn: 'object literal'
}
}
myFunction(); // = undefined
// Функции в JavaScript являются объектами, поэтому их можно назначить в
// переменные с разными названиями и передавать в другие функции, как аргументы,
// на пример, при указании обработчика события.
2014-10-30 15:04:56 +00:00
// JavaScript functions are first class objects, so they can be reassigned to
// different variable names and passed to other functions as arguments - for
// example, when supplying an event handler:
function myFunction(){
// этот фрагмент кода будет вызван через 5 секунд
2014-10-30 15:04:56 +00:00
// this code will be called in 5 seconds' time
}
setTimeout(myFunction, 5000);
// Обратите внимание, что setTimeout не является частью языка, однако он
// доступен в API браузеров и Node.js.
2014-10-30 15:04:56 +00:00
// Note: setTimeout isn't part of the JS language, but is provided by browsers
// and Node.js.
// Объект функции на самом деле не обязательно объявлять с именем - можно
// создать анонимную функцию прямо в аргументах другой функции.
2014-10-30 15:04:56 +00:00
// Function objects don't even have to be declared with a name - you can write
// an anonymous function definition directly into the arguments of another.
setTimeout(function(){
// этот фрагмент кода будет вызван через 5 секунд
2014-10-30 15:04:56 +00:00
// this code will be called in 5 seconds' time
}, 5000);
// В JavaScript есть области видимости. У функций есть собственные области
// видимости, у других блоков их нет.
2014-10-30 15:04:56 +00:00
// JavaScript has function scope; functions get their own scope but other blocks
// do not.
if (true){
var i = 5;
}
i; // = 5, а не undefined, как это было бы ожидаемо(todo: поправить)
// в языке, создающем области видисти для блоков "
2014-10-30 15:04:56 +00:00
// Это привело к появлению паттерна общего назначения "immediately-executing
// anonymous functions" (сразу выполняющиеся анонимные функции), который
// позволяет предотвратить запись временных переменных в общую облать видимости.
2014-10-30 15:04:56 +00:00
// This has led to a common pattern of "immediately-executing anonymous
// functions", which prevent temporary variables from leaking into the global
// scope.
(function(){
var temporary = 5;
// Для доступа к глобальной области видимости можно использовать запись в
// некоторый 'глобальный объект', для браузеров это 'window'. Глобальный
// объект может называться по-разному в небраузерных средах, таких Node.js.
2014-10-30 15:04:56 +00:00
// We can access the global scope by assiging to the 'global object', which
// in a web browser is always 'window'. The global object may have a
// different name in non-browser environments such as Node.js.
window.permanent = 10;
})();
temporary; // вызывает исключение ReferenceError
2014-10-30 15:04:56 +00:00
permanent; // = 10
// Одной из сильных сторон JavaScript являются замыкания. Если функция
// объявлена в вниутри другой функции, внутренняя функция имеет доступ ко всем
// переменным внешней функции, даже после того, как внешняя функции завершила
// свое выполнение
2014-10-30 15:04:56 +00:00
// One of JavaScript's most powerful features is closures. If a function is
// defined inside another function, the inner function has access to all the
// outer function's variables, even after the outer function exits.
function sayHelloInFiveSeconds(name){
var prompt = "Привет, " + name + "!";
// Внутренние фунции помещаются в локальную область видимости, как-будто они
// объявлены с ключевым словом 'var'.
2014-10-30 15:04:56 +00:00
// Inner functions are put in the local scope by default, as if they were
// declared with 'var'.
function inner(){
alert(prompt);
}
setTimeout(inner, 5000);
// setTimeout является асинхроннной, и поэтому функция sayHelloInFiveSeconds
// завершит свое выполнение сразу и setTimeout вызовет inner позже.
// Однако, так как inner "замкнута"(todo: уточнить "закрыта внутри")
// sayHelloInFiveSeconds, inner все еще будет иметь доступ к переменной
// prompt, когда будет вызвана.
2014-10-30 15:04:56 +00:00
// setTimeout is asynchronous, so the sayHelloInFiveSeconds function will
// exit immediately, and setTimeout will call inner afterwards. However,
// because inner is "closed over" sayHelloInFiveSeconds, inner still has
// access to the 'prompt' variable when it is finally called.
}
sayHelloInFiveSeconds("Вася"); // откроет модальное окно с сообщением
// "Привет, Вася" по истечении 5 секунд.
2014-10-30 15:04:56 +00:00
///////////////////////////////////
2014-11-01 22:12:22 +00:00
// 5. Немного об Объектах. Конструкторы и Прототипы
2014-10-30 15:04:56 +00:00
// 5. More about Objects; Constructors and Prototypes
2014-11-01 22:12:22 +00:00
// Объекты погут содержать функции
2014-10-30 15:04:56 +00:00
// Objects can contain functions.
var myObj = {
myFunc: function(){
return "Hello world!";
}
};
myObj.myFunc(); // = "Hello world!"
2014-11-01 22:12:22 +00:00
// Когда функции прикрепленные к объекту вызываются, они могут получить доступ
// к данным объекта, ипользую ключевое слово this.
2014-10-30 15:04:56 +00:00
// When functions attached to an object are called, they can access the object
// they're attached to using the this keyword.
myObj = {
myString: "Hello world!",
myFunc: function(){
return this.myString;
}
};
myObj.myFunc(); // = "Hello world!"
2014-11-01 22:12:22 +00:00
// Содержание this определяется исходя из того, как была вызвана функция, а
// не места её определения. По этой причине наша функция не будет работать вне
// контекста объекта.
2014-10-30 15:04:56 +00:00
// What this is set to has to do with how the function is called, not where
// it's defined. So, our function doesn't work if it isn't called in the
// context of the object.
var myFunc = myObj.myFunc;
myFunc(); // = undefined
2014-11-01 22:12:22 +00:00
// И напротив, функция может быть присвоена объекту и получить доступ к нему
// через this, даже если она не была прикреплена к объекту в момент её создания.
2014-10-30 15:04:56 +00:00
// Inversely, a function can be assigned to the object and gain access to it
// through this, even if it wasn't attached when it was defined.
var myOtherFunc = function(){
return this.myString.toUpperCase();
}
myObj.myOtherFunc = myOtherFunc;
myObj.myOtherFunc(); // = "HELLO WORLD!"
2014-11-01 22:12:22 +00:00
// Также можно указать контекс выполнения фунции с помощью 'call' или 'apply'.
2014-10-30 15:04:56 +00:00
// We can also specify a context for a function to execute in when we invoke it
// using 'call' or 'apply'.
var anotherFunc = function(s){
return this.myString + s;
}
anotherFunc.call(myObj, " And Hello Moon!"); // = "Hello World! And Hello Moon!"
2014-11-01 22:12:22 +00:00
// Функция 'apply' очень похожа, но принимает массив со списком аргументов.
2014-10-30 15:04:56 +00:00
// The 'apply' function is nearly identical, but takes an array for an argument list.
anotherFunc.apply(myObj, [" And Hello Sun!"]); // = "Hello World! And Hello Sun!"
2014-11-01 22:12:22 +00:00
// Это может быть удобно, когда работаешь с фунцией принимающей на вход
// последовательность аргументов и нужно передать их в виде массива.
2014-10-30 15:04:56 +00:00
// This is useful when working with a function that accepts a sequence of arguments
// and you want to pass an array.
Math.min(42, 6, 27); // = 6
Math.min([42, 6, 27]); // = NaN (uh-oh!)
Math.min.apply(Math, [42, 6, 27]); // = 6
2014-11-01 22:12:22 +00:00
// Однако, 'call' и 'apply' не имеют постоянного эффекта. Если вы хотите
// зафиксировать контекст для функции, используйте bind.
2014-10-30 15:04:56 +00:00
// But, 'call' and 'apply' are only temporary. When we want it to stick, we can use
// bind.
var boundFunc = anotherFunc.bind(myObj);
boundFunc(" And Hello Saturn!"); // = "Hello World! And Hello Saturn!"
2014-11-01 22:12:22 +00:00
// bind можно использовать чтобы частично передать аргументы в
// функцию (каррировать).
2014-10-30 15:04:56 +00:00
// Bind can also be used to partially apply (curry) a function.
var product = function(a, b){ return a * b; }
var doubler = product.bind(this, 2);
doubler(8); // = 16
2014-11-01 22:12:22 +00:00
// Когда функция вызывается с ключевым словом new, создается новый объект.
// Данный объект становится доступным функции через ключевое слово this.
// Функции спроектированные вызываться таким способом называются конструкторами.
2014-10-30 15:04:56 +00:00
// When you call a function with the new keyword, a new object is created, and
// made available to the function via the this keyword. Functions designed to be
// called like that are called constructors.
var MyConstructor = function(){
this.myNumber = 5;
}
myNewObj = new MyConstructor(); // = {myNumber: 5}
myNewObj.myNumber; // = 5
2014-11-01 22:12:22 +00:00
// Любой объект в JavaScript имеет 'прототип'. Когда выпытаетесь получить доступ
// к свойству не объявленному в данном объекте, интерпретатор будет искать его
// в прототипе.
2014-10-30 15:04:56 +00:00
// Every JavaScript object has a 'prototype'. When you go to access a property
// on an object that doesn't exist on the actual object, the interpreter will
// look at its prototype.
2014-11-01 22:12:22 +00:00
// Некоторые реализации JS позволяют получить доступ к прототипу с помощью
// волшебного свойства __proto__. До момента пока оно не являются стандартным,
// __proto__ полезно лишь для изучения прототипов в JavaScript. Мы разберемся
// со стандартными способами работы с прототипом несколько позже.
2014-10-30 15:04:56 +00:00
// Some JS implementations let you access an object's prototype on the magic
// property __proto__. While this is useful for explaining prototypes it's not
// part of the standard; we'll get to standard ways of using prototypes later.
var myObj = {
myString: "Hello world!"
};
var myPrototype = {
meaningOfLife: 42,
myFunc: function(){
return this.myString.toLowerCase()
}
};
myObj.__proto__ = myPrototype;
myObj.meaningOfLife; // = 42
myObj.myFunc(); // = "hello world!"
2014-11-01 22:12:22 +00:00
// Естествно, если в свойства нет в прототипе, поиск будет продолжен в прототипе
// прототипа и так далее.
2014-10-30 15:04:56 +00:00
// Of course, if your property isn't on your prototype, the prototype's
// prototype is searched, and so on.
myPrototype.__proto__ = {
myBoolean: true
};
myObj.myBoolean; // = true
2014-11-01 22:12:22 +00:00
// Ничего не копируется, каждый объект хранит ссылку на свой прототип. Если
// изменить прототип, все изменения отразятся во всех его потомках.
2014-10-30 15:04:56 +00:00
// There's no copying involved here; each object stores a reference to its
// prototype. This means we can alter the prototype and our changes will be
// reflected everywhere.
myPrototype.meaningOfLife = 43;
myObj.meaningOfLife; // = 43
2014-11-01 22:12:22 +00:00
// Как было сказано выше, __proto__ не является стандартом, и нет стандартного
// способа изменить прототип у созданного объекта. Однако, есть два способа
// создать объект с заданным прототипом.
2014-10-30 15:04:56 +00:00
// We mentioned that __proto__ was non-standard, and there's no standard way to
// change the prototype of an existing object. However, there are two ways to
// create a new object with a given prototype.
2014-11-01 22:12:22 +00:00
// Первый способ - Object.create, был добавлен в JS относительно недавно, и
// потому не доступен в более ранних реализациях языка.
2014-10-30 15:04:56 +00:00
// The first is Object.create, which is a recent addition to JS, and therefore
// not available in all implementations yet.
var myObj = Object.create(myPrototype);
myObj.meaningOfLife; // = 43
2014-11-01 22:12:22 +00:00
// Второй вариан доступен везде и связан с конструкторами. Конструкторы имеют
// свойство prototype. Это воовсе не прототип функции конструктора, напротив,
// это прототип, который присваевается новым объектам, созданным с этим
// конструктором с помощью ключевого слова new.
2014-10-30 15:04:56 +00:00
// The second way, which works anywhere, has to do with constructors.
// Constructors have a property called prototype. This is *not* the prototype of
// the constructor function itself; instead, it's the prototype that new objects
// are given when they're created with that constructor and the new keyword.
MyConstructor.prototype = {
myNumber: 5,
getMyNumber: function(){
return this.myNumber;
}
};
var myNewObj2 = new MyConstructor();
myNewObj2.getMyNumber(); // = 5
myNewObj2.myNumber = 6
myNewObj2.getMyNumber(); // = 6
2014-11-01 22:12:22 +00:00
// У встроенных типов таких, как строки и числа, тоже есть конструкторы,
// создающие эквивалентные объекты-обертки.
2014-10-30 15:04:56 +00:00
// Built-in types like strings and numbers also have constructors that create
// equivalent wrapper objects.
var myNumber = 12;
var myNumberObj = new Number(12);
myNumber == myNumberObj; // = true
2014-11-01 22:12:22 +00:00
// Правда, они не совсем эквивалентны.
2014-10-30 15:04:56 +00:00
// Except, they aren't exactly equivalent.
typeof myNumber; // = 'number'
typeof myNumberObj; // = 'object'
myNumber === myNumberObj; // = false
if (0){
2014-11-01 22:12:22 +00:00
// Этот фрагмент кода не будет выпонен, так как 0 приводится к false
2014-10-30 15:04:56 +00:00
// This code won't execute, because 0 is falsy.
}
if (Number(0)){
2014-11-01 22:12:22 +00:00
// Этот фрагмент кода *будет* выпонен, так как Number(0) приводится к true.
2014-10-30 15:04:56 +00:00
// This code *will* execute, because Number(0) is truthy.
}
2014-11-01 22:12:22 +00:00
// Однако, оберточные объекты и обычные встроенные типы имеют общие прототипы,
// следовательно вы можете расширить функциональность строки, например.
2014-10-30 15:04:56 +00:00
// However, the wrapper objects and the regular builtins share a prototype, so
// you can actually add functionality to a string, for instance.
String.prototype.firstCharacter = function(){
return this.charAt(0);
}
"abc".firstCharacter(); // = "a"
2014-11-01 22:12:22 +00:00
// Этот факт часто используется для создания полифилов(polyfill) - реализации
// новых возможностей JS в его болле старых версиях для того чтобы их можно было
// использовать в устаревших браузерах.
2014-10-30 15:04:56 +00:00
// This fact is often used in "polyfilling", which is implementing newer
// features of JavaScript in an older subset of JavaScript, so that they can be
// used in older environments such as outdated browsers.
2014-11-01 22:12:22 +00:00
// Например, мы упомянули, что Object.create не доступен во всех версиях
// JavaScript, но мы може создать полифилл.
2014-10-30 15:04:56 +00:00
// For instance, we mentioned that Object.create isn't yet available in all
// implementations, but we can still use it with this polyfill:
2014-11-01 22:12:22 +00:00
if (Object.create === undefined){ // не переопределяем если есть
2014-10-30 15:04:56 +00:00
Object.create = function(proto){
2014-11-01 22:12:22 +00:00
// создаем временный конструктор с заданным прототипом
2014-10-30 15:04:56 +00:00
var Constructor = function(){};
Constructor.prototype = proto;
2014-11-01 22:12:22 +00:00
// создаём новый объект с правильным прототипом
2014-10-30 15:04:56 +00:00
// then use it to create a new, appropriately-prototyped object
return new Constructor();
}
}
```
## Further Reading
The [Mozilla Developer
Network](https://developer.mozilla.org/en-US/docs/Web/JavaScript) provides
excellent documentation for JavaScript as it's used in browsers. Plus, it's a
wiki, so as you learn more you can help others out by sharing your own
knowledge.
MDN's [A re-introduction to
JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
covers much of the concepts covered here in more detail. This guide has quite
deliberately only covered the JavaScript language itself; if you want to learn
more about how to use JavaScript in web pages, start by learning about the
[Document Object
Model](https://developer.mozilla.org/en-US/docs/Using_the_W3C_DOM_Level_1_Core)
[Learn Javascript by Example and with Challenges](http://www.learneroo.com/modules/64/nodes/350) is a variant of this reference with built-in challenges.
[JavaScript Garden](http://bonsaiden.github.io/JavaScript-Garden/) is an in-depth
guide of all the counter-intuitive parts of the language.
[JavaScript: The Definitive Guide](http://www.amazon.com/gp/product/0596805527/) is a classic guide / reference book.
In addition to direct contributors to this article, some content is adapted
from Louie Dinh's Python tutorial on this site, and the [JS
Tutorial](https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript)
on the Mozilla Developer Network.