Робота з обєктами в Javascript

Javascript по своїй старій суті зводиться до написання коду у двох стилях: обєктному і процедурному.

Обєктний стиль більш зрозумілий і гнучкий для програмування. Процедурний - швидший і продуктивніший.

Спробуємо розібрати на пальцях як працювати з обєктами в Javascript, як їх практично використати і т.п.

Отже, створимо простий обєкт - квадрат. І зробимо декілька його копій на екрані, щоб вони були незалежними один від одного.

Властивостями кожного такого обєкта будуть розмір і колір. Загальноприйнято обєкти-функції починати назви з великої літери.

Також добавимо дві допоміжні глобальні функції getRandomArbitrary та objectToStyle.

function getRandomArbitrary(min, max) {
  return Math.random() * (max - min) + min;
}

function objectToStyle(obj) {
  var style = '';
  for(var key in obj) {
    style += key + ':' + obj[key] + ';'
  }
  return style;
}

function Kub(size, color) {
  var item = document.createElement('span');
  var style = {
    width: size + 'px',
    height: size + 'px',
    background: color,
    position: 'absolute',
    top: getRandomArbitrary(0, screen.height - size) + 'px',
    left: getRandomArbitrary(0, screen.width - size) + 'px'
  };
  item.setAttribute('style', objectToStyle(style));

  return item;
}

Ми добавили функцію-обєкт (функцію-конструктор) Kub. Щоб зробити з неї незалежний обєкт, достатньо використати оператор new.

var a = new Kub(100, '#555555');
var b = new Kub(200, '#777777');

Щоб добавити ці обєкти в документ, скористаємось таким кодом:

document.body.append(a);
document.body.append(b);

Це є базовий принцип побудови обєктів у Javascript.

Далі, розвиваючи цю тему, можна добавити таймер, по якому відбуватимуться якісь дії з обєктами, фунції-обробники подій (handlers, eventListeners), тощо.

Основне, на що слід звертати увагу - не робити глобальні змінні і функції.

У нашому випадку маємо дві глобальні функції. Пропоную самостійно загорнути їх в обгортку - замикання, щоб їх не було видно назовні.

Тема замикання функції є базовим і основним для розуміння ООП в Javascript.

Але писати сухої теорії можна довго. Починайте писати щось самі. Це найкращий спосіб щось вивчити.

Успіхів!

vote data