Структура и синтаксис JavaScript (выжимка)

 

В этом посте я собрал основную выжимку по структуре и синтаксису языка JavaScript. Зачем, если есть нормальные книги посвещенные JavaScript? Этот пост может пригодиться, в качестве некого справочного материала или шпаргалки для тех кто уже пользовался JavaScript.

 

js

Я по своему опыту знаю, что не важно сколько ты работал на том или ином языке или технологии, достаточно прекратить его использовать и через некоторое время обязательно запамятаешь элементарно как функцию или класс объявить. Чтобы минимизировать время «восстановления», я решил создать данную выжимку по структуре и синтаксисе  JavaScript

 

1. Коментарии

 

Бывают двух типов

 

2. Вставка скрипта main.js в  HTML

 

В заголовке сайта (между <head> </head>)

 

3. Переменные

 

JavaScript не жестко типизированный язык, это означает что переменным не надо указывать тип, интерпретатор сам разберется. Для объявление переменной достаточно написать

Причем типов в Js всего 4-е:

Все переменные глобальные, если мы объявим переменную x=1 в теле функции, она будет видна везде, по умолчанию она глобальная (не локальная!), этим JavaScript отличается от того же С/С++. Если мы хотим насильно создать локальную переменную в теле функции, то необходимо перед переменной указать слово var

 

4. Функции

 

В JavaScript можно создать два вида функций именованные и анонимные.

Именованная функция (стандартная, часто применяемая)

Видна везде (даже до объявления функции) и вызывается так

Функцию можно присвоить переменной

Анонимная функция

Анонимная функция вызывается также как и именованная (т.е. x=sum(2,3)), ее так-же можно присваивать другой переменной (s=sum). Отличие заключается в следующем:

  1. анонимная функция работает только после объявления
  2. вытекает из первого, анонимную функцию можно определять в условных операторах (например,  в зависимости от условия, функцию sum мы можем объявить с разными количеством аргументов)

    С именованной так не выйдет, интерпретатор JavaScript сначала ищет именованные функции, далее заносит их в память, а потом только выполняет скрипт, т.е. именованный функции объявляются сразу, не важно где они находяться

Передача параметров функции по ссылке и по значению 

В JavaScript в отличие от С/C++ нельзя явно указать функции как в нее передавать параметры, по ссылки или по значению. Но важно помнить, что если в качестве параметров в функцию (именованная или анонимная не важно) мы передаем простые типы вроде: целых чисел, вещественных, логических, строк, то они всегда передаются по значению (входящий параметры не изменяются, функция работает с их копиями). В случаем если в функцию передаем массивы или объекты, они передаются по ссылке (входящие параметры изменяются, функция работает с ними напрямую).

Передача функции в качестве аргумента другой функции

Функцию (именованную и анонимную, не важно) можно передавать по ссылке в качестве аргумента другой функции, например

Результат функции factor будет равен 9, т.к. если умножить значение переменной i=3 на результат работы функция sum с аргументами 2,1 будет 9.

 

5. Условные операторы

 

Основной синтаксис if, switch

Оператор if…else

 Оператор switch

Тут, думаю особо комментировать нечего.

 

 6. Операторы цикла

 

Основной синтаксис for, while

Оператор for

Оператор while

Цикл while работает пока условие истинно. Ключевые слова, которые иногда используют в циклах break, continue; 

  • break — завершает текущий цикл и передает управление на следующий вызов
  • continue — прекращает текущую итерацию цикла и продолжает выполнение со следующей итерации

 

 7.  Массивы

 

Есть два способа как задать массив, пустой массив или со значениями

Пустой

 Со значениями

Чтобы добавить новый элемент (цифру 7)  в массив

Новый элемент добавляется в конец массива Чтобы удалить последний элемент массива

Для обращения к элементу массива, необходимо указать его индекс в квадратных скобках, например выведем на экран 0-ой элемент массива.

 

8. Объекты

 

В JavaScript в отличие от С++ нет понятие классов, объекты тут создаются не как экземпляры некого класса, а с нуля, с последующим указанием свойств и методов или с помощью функции-конструктора. Почему такие различия? А все дело в том, что JavaScript язык не чисто объектно-ориентированного программирования, он принадлежит к некому диалекту ООП, одним из его способов, который называется прототипно-ориентированное программирование. Хватит теории, рассмотрим как создавать объекты

Есть второй вариант как создать объект, но в этом случае свойства и методы добавляются отдельно

(P.S. Все свойства объектов — public, в JavaScript при определении свойства в отличие от С++ никак нельзя ограничить к нему доступ. )

Обращаться к свойствам и методам следует так

А что если нам надо создать множество объектов похожих на myOb с различными name и family? Тут возникает необходимость использовать конструктор

Функция — конструктор

Конструктор это некое подобие класса, он задает по каким правилам должен строиться объект (конструктор в JavaScript это не часть класса как в С++, тут вообще нет классов, это обычная функция). Пример

Создаем объекты с помощью конструктора person

Вызываем методы данных объектов

Мы умеем создавать объекты по некоторому подобию, используя функцию-конструктор,

Теперь разберемся с наследованием

Наследование

В JavaScript наследование происходит от объекта к объекту, а не от класса к классу как в С++. Мы научились создавать объекты с нуля и с помощью функции  конструктора, теперь нам надо создать объект, который будет потомком данного объекта. Например создадим объект p_debt который будет потомком объекта p1. В p_debt мы укажем какие долги за персоной p1.

Сначала создадим функцию-конструктор объекта p_debt, назовем ее person_debt

Теперь укажем конструктору от какого объекта будут наследовать его объекты  (заметьте не от какой функции-конструктора, а от какого объекта, в JavaScript наследование происходит от объекта к объекту). Указывать мы будем через специальное свойство prototype.

Создадим объект p_debt,  наследника p1

Объект p_debt имеет все свойства унаследованные от p1, пример

То, что мы сделали можно изобразить таким образом

 

10

 

В результате этих действий мы получаем, что p_debt, является наследником p1 (или по другому сказать p1 прототип для p_debt)

 

11

 

Дочерних объектов от объекта p1 от может быть множество, создадим их

( У персоны p1, может быть много долгов)

Т.к. мы создаем объекты с помощью конструктора person_debt, то все созданное будут наследниками объекта p1, изобразим визуально что получилось

 

12

 

P.S.  в версии JavaScript «ECMA Script 5» появился способ создать объект сразу с указанием прототипа для него, без всяких функций-конструкторов

 

Перекрытие свойств и методов при наследование

Если мы в объекте-потомке укажем такое же свойство что и в его прототипе, оно перекроется (замениться), например добавим объекту p_debt свойство name

Выведем свойство name объекта p_debt

 

Методы в прототипах

Методы можно объявлять не только через функцию-конструктор, как например print в Person, но и через прототип данной функции. Дело в том, что если функции не указать прототип явно, то он будет создан автоматически — пустой Object, как например для функции Person. Присвоив метод данному прототипу, мы заставим его унаследовать всем дочерним объектам от объекта созданного с помощью Person.

Например создадим метод print_person через прототип

Преимущество в следующем, этот метод будет виден объектам которые уже инициализированы. Как пример, метод print_person можно использовать в уже созданных объектах p1,p2 и p_debt,p_debt2,p_debt3,p_debt4.

P.S. Стоит отметить, как говорят некоторые статьи на хабре, что создаются методы через прототип в разы быстрее чем методы созданные через конструктор.

 

В посте я рассмотрел основной синтаксис и структуру кода на языке  JavaScript, надеюсь это кому-то было полезно.




Буду признателен если вы поделитесь данным постом

Источник: СтройДом

Ваш комментарий


Ответ в цифрах

 
© s-engineer.ru, 2012-2017 | Все права защищены