Объекты в JavaScript и как их создать

6

Object literal

Объектные литералы хорошо, если нам не надо создавать много объектов. Или для передачи параметров в функции.
Если у объекта есть один или несколько методов, то можно сказать что у объекта есть поведение.

const circle = {
  radius: 1,
  location: {
    x: 1,
    y: 1
  },
  draw: function() {
    console.log('draw');
  }
};

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

//Factory function
function createCircle(radius) {
  return {
    radius,
    draw () {
      console.log("Draw");
    }
  };
}

const circle = createCircle(1);
circle.draw();

Обратите внимание что свойство radius указывается без явного присвоения, т.к. в es6 если key равно value, то указывать value не обязательно.

Constructors

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

По соглашению по именованию, название конструктора должно быть с большой буквы.

//Constructor function
function Circle(radius) {
  this.radius = radius;
  this.draw = function() {
    console.log('draw');
  }
}

const another = new Circle(2);
another.draw();

Внутри конструктора, вместо возврата объекта, мы будем использовать ключевое слово this, чтобы установить параметры этого объекта.

В двух словах — this — это ссылка на объект, который выполняет этот кусок кода.
Представим что у нас есть новый пустой объект в памяти. Теперь мы собираемся использовать this для ссылки на этот объект и затем .notation чтобы установить различные параметры этому объекту. Итак мы можем указать радиус. Также мы можем указать сюда и метод, например draw(), как выше.

Теперь чтобы воспользовать функцией конструктором, вызовем её с помощью оператора new.

Когда мы используем оператор new. Несколько вещей происходит по катом. Во первых этот оператор создает новый пустой объект, типа этого {}. Затем он установит this, чтобы он указывал на этот объект. Потому что по умолчанию, this указывает на глобальный объект.

Итак, когда мы создаем оператор new, чтобы вызвать функцию, происходит 3 вещи:

  1. Оператор new создает пустой объект
  2. Затем он устанавливает this на этот созданный объект
  3. И наконец, возвращает этот объект из функции

Как вы заметили, у нас в функции конструкторе нету явно указанного оператора return. Это происходит автоматически.

Constructor property

У каждого объекта в js есть свойство под названием constructor. И оно ссылается на функцию, которая была использована, чтобы сконструировать или создать объект.

Например если мы посмотрим свойтво конструктор у вышеописанного объекта another, то он выведет нам функцию Circle, которая использовалась для создания объекта another.

another.constructor;

В тоже время, если мы посмотрим на конструктор объекта circle который был создан с помощью Factory function, то мы увидим что это функция, так как указана буква f.

constructor

И как видите первая буква этой функции заглавная. Это встроенная фукнция-конструктор в JS. Когда мы создаем объект используя синтакс объекта-литерала, движок js использует эту функцию-конструктор.

Например, когда мы создаем объект таким образом:

let x = {};

то, вот что делает JS:

let x = new Object();

Итак, мы создали и вернули объект circle с помощью factory function и потому что мы использовали синтакс объекта-литерала, под катом она была создана используя вышеуказанную функцию конструктор объектов.

В java script есть еще несколько встроенных конструкторов, например, у нас есть String для создания строк, но чаще мы используем string literal. Так же есть конструктор Boolean, Number.

Итого: у каждого объекта есть свойство constructor, и оно указывает на функцию, которая была использована для создания этого объекта

You might also like More from author

Leave A Reply

Your email address will not be published.