Класс в JavaScript это обычная функция-конструктор. Такая функция-конструктор содержит простые данные, объекты, внутренние функции В JavaScript. Для создания объекта класса используется new Пример: function Book() { ... } ... var obj1 = new Book();

Программирование, разработка, тестирование

→

JavaScript - язык программирования для HTML

→

Класс в JavaScript это обычная функция-конструктор. Такая функция-конструктор содержит простые данные, объекты, внутренние функции В JavaScript. Для создания объекта класса используется new Пример: function Book() { ... } ... var obj1 = new Book(); | стандарт ES5

Посмотрели 7275 раз(а)

Класс в JavaScript это функция-конструктор | стандарт ES5

последнее обновление: 31 июля 2020

Класс это функция-конструктор, то есть это обычная функция в JavaScript...

// определяем класс (функция-коснструктор)
function MyBook(name)
{
     ...
     // BookName это внутренняя переменная
     var BookName = ;

     // Price это внешняя переменная
     this.Price = 0;
     ...
}

Класс (функция-конструктор) может содержать:
• внутренние переменные: текст, числа, флаги, дата, массив, набор свойств
• внешние переменные: текст, числа, флаги, дата, массив, набор свойств
• внутренние функции
• внешние функции
• статические функции

Пример

Html

<html>
<body>


<h1>Hello!</h1>

<script language='JavaScript'>

     // определяем класс MyBook
     function MyBook(name)
     {
          // BookName это внутренняя переменная
          // BookName НЕ видна снаружи потому что, объявлена как var
          var BookName = name;

          // Author, Price, Valuta это внешние переменные функции MyBook
          // эти переменные видны снаружи потому что, объявлены как this.
          this.Author = "";
          this.Price = 0;
          this.Valuta = '';

          // MyInfo это внешняя переменная функции MyBook с набором свойств
          // MyInfo видна снаружи потому что, объявлен как this.
          this.MyInfo =
          {
               PagesCount: 90,
               HasPictures: true
          };

          // Shops это внешняя переменная функции MyBook содержит пустой массив
          // Shops виден снаружи потому что, объявлен как this.
          this.Shops = []; // магазины где можно купить книги

          // ShowBookName это внешняя функция-переменная без параметров
          // ShowBookName видна снаружи потому что, объявлена как this.
          this.ShowBookName = function ()
          {
               alert(BookName);
          }

          // ShowBookShops это внешняя функция-переменная с параметром title
          // ShowBookShops видна снаружи потому что, объявлена как this.
          this.ShowBookShops = function (title)
          {
               alert(title + ": " + this.Shops);
               this.MyFuncHello();
          }

          // MyInnerFunc1 это внутренняя функция-переменная
          // MyInnerFunc1 НЕ видна снаружи потому что, объявлена как var
          var MyInnerFunc1 = function ()
          {
               alert("Hello inner function 1");
          }

          // MyInnerFunc1 это внутренняя функция
          // MyInnerFunc1 НЕ видна снаружи потому что, объявлена внутри функции MyBook
          function MyInnerFunc2()
          {
               alert("Hello inner function 2");
          }
     }

     // MyStaticFunc это статическая функция
     // MyStaticFunc видна снаружи и используется только с названием MyBook
     MyBook.MyStaticFunc = function ()
     {
          alert("Hello static function");
     }

     // MyFuncHello это внутренняя функция
     // MyFuncHello НЕ видна снаружи потому что, объявлена внутри функции MyBook
     MyBook.prototype.MyFuncHello = function ()
     {
          alert("Hello function");
     }

     // Создание класса
     var book = new MyBook("Vlastelin kolec");

     // установка значений внешним переменным
     book.Author = "Nik Perumov";
     book.Price = 60;
     book.Valuta = "рублей";
     book.Shops = ["Minsk", "Moscow", "London"];

     // вызов внешней функции-переменной
     book.ShowBookName();
     // на экране увидим "Vlastelin kolec"

     // вызов внешней функции-переменной
     book.ShowBookShops("Магазины");
     // на экране увидим "Магазины: Minsk, Moscow, London"

     // вызов статической функции
     MyBook.MyStaticFunc();
     // на экране увидим "Hello static function"

     // вызов внутренней функции
     book.MyInnerFunc1(); error: 'book.MyInnerFunc1 is not a function'

</script>

</body>
</html>

Создание объекта

Объект создается через new и имя функции.

JavaScript Пример

var book = new MyBook();

Внутренние и внешние переменные

MyBook содержит внутреннюю переменную BookName потому что, объявлена как var

MyBook содержит внешние переменные Author, Price, Valuta, MyInfo, Shops потому что, объявлены как this.

JavaScript

// класс MyBook
function MyBook(name)
{
...
     // внутренняя переменная
     var BookName = name;

     // внешние переменные
     this.Author = "";
     this.Price = 0;
     this.Valuta = '';

     this.MyInfo =
     {
          PagesCount: 90,
          HasPictures: true
     };

     this.Shops = [];
...
}

this. означает, что объявили внешнюю переменную для класса MyBook.
Эта переменная будет жить столько сколько объект MyBook.

Внутреняя переменная объявлена как var BookName
разрушится сразу после выхода из функции MyBook
На заметку! Переменная BookName используется внутрии функции ShowBookName.
Поэтому переменная BookName будет жить столько же сколько функция ShowBookName.
А функция ShowBookName живет столько же сколько и функция MyBook.
То есть переменная BookName будет жить столько же сколько функция MyBook

Внутренние и внешние функции

Внутри MyBook мы объявили функцию с названием ShowMyMessage с параметром title

JavaScript

// класс MyBook
function MyBook(name)
{
     ...
     // функция
     this.ShowMyMessage = function (title)
     {
          alert(title + " " + this.Name + " " + this.MyInfo.PagesCount);
     }
     ...
}

Статические функции

← Предыдущая тема
{...} = объект в JavaScript заполняем из переменных класса или другим объектом. Пример: const {name, total, price} = b.myProps; | стандарт ES5

Следующая тема →
Инкапсуляция переменных (скрытие переменных для доступа) в функции (в виде класса) В JavaScript | стандарт ES5