В данном уроке Мы поговорим уже непосредственно про Объектно Ориентированное Программирование в JS. А именно разберём что такое классы в JavaScript.
В стандартном JS который сейчас поддерживается в любых браузерах нет такого понятия как: классы. Однако есть такое понятие как: функций.
В данном языке функций играют очень большую роль, потому что с помощью них можно делать всё что угодно.
Первые классы в JavaScript-е
Обычно называния функций пишутся большой буквой в начале слова.
1 2 3 4 5 6 7 |
var User = function (name) { this.name = name; // определили поля name this.getName = function() { console.log("Имя: ", this.name); } // и определили функцию getName() котороя просто выводит в консоль текущее имя }; |
Ещё давайте будем определять имя по умолчанию:
1 2 3 4 5 6 |
var User = function (name) { this.name = name || 'Ivan'; // это конструкция означает что если name не будет передан, то данное значение будет == Ivan this.getName = function() { console.log("Имя: ", this.name); } }; |
Если создадим объект и вызовем функцию getName():
1 2 |
var user = new User('Valeriu'); // использовали ключевое слово new для создания объекта user.getName(); |
То результат будет следующим:
И это правильный результат. То есть функцию сработала нормально.
Если посмотрим на объект класса User
1 |
console.log(user); |
То увидим это:
Расширяемость класса в JavaScript
На самом деле такие конструкций не очень верны (как выше написали). Потому что Мы в конструкторе начинаем перечислять какие-то функций и.т.д. что опять-же не очень корректно.
Ещё особенность данного языка в том что при создание объекта класса, для каждого объекта будет создаватся функций. Это снизит работоспособность и быстро-действие приложения.
Для того чтоб расширять классы в JavaScript или расширять какие-то поля, существует другая конструкция, более правильная:
1 2 3 4 5 6 7 8 9 10 11 12 |
var User = function (name) { this.name = name || 'Ivan'; }; User.prototype = { getName: function() { console.log("Имя: ", this.name); } }; // формат JSON var user = new User(); user.getName(); |
Результат, как и ожидали, не меняется:
Желаю Вам успехов!