JavaScript Создать объект – как определить объекты в JS

Автор оригинала: Cristian Salcescu.

Объекты являются основной единицей инкапсуляции в объектно-ориентированном программировании. В этой статье я опишу несколько способов строить объекты в JavaScript. Они есть:

• Объектный литерал
• Object.Create. ()
• Классы
• Заводские функции

Объектный литерал

Во-первых, нам нужно сделать различие между структурами данных и объектно-ориентированными объектами объектами. Структуры данных имеют публичные данные и без поведения. Это означает, что у них нет методов.

Мы можем легко создавать такие объекты, используя объектный буквальный синтаксис. Похоже, это выглядит:

const product = {
  name: 'apple',
  category: 'fruits',
  price: 1.99
}
  
console.log(product);

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

Мы можем получить доступ к собственности, используя точку или квадратную запись.

console.log(product.name);
//"apple"

console.log(product["name"]);
//"apple"

Вот пример, где значение является другим объектом.

const product = {
  name: 'apple',
  category: 'fruits',
  price: 1.99,
  nutrients : {
   carbs: 0.95,
   fats: 0.3,
   protein: 0.2
 }
}

Значение углеводы Собственность – это новый объект. Вот как мы можем получить доступ к углеводы имущество.

console.log(product.nutrients.carbs);
//0.95

Сорренда имен свойств

Рассмотрим случай, когда у нас есть значения наших свойств, хранящихся в переменных.

const name = 'apple';
const category = 'fruits';
const price = 1.99;
const product = {
  name: name,
  category: category,
  price: price
}

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

const name = 'apple';
const category = 'fruits';
const price = 1.99;
const product = {
  name,
  category,
  price
}

Object.Create.

Далее давайте посмотрим, как реализовать объекты с поведением, объектно-ориентированными объектами.

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

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

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

const cartPrototype = {
  addProduct: function(product){
    if(!this.products){
     this.products = [product]
    } else {
     this.products.push(product);
    }
  },
  getTotalPrice: function(){
    return this.products.reduce((total, p) => total + p.price, 0);
  }
}

Обратите внимание, что на этот раз ценность недвижимости AddProduct это функция. Мы также можем написать предыдущий объект, используя более короткую форму, называемую синтаксисом метода сокращения.

const cartPrototype = {
  addProduct(product){/*code*/},
  getTotalPrice(){/*code*/}
}

CartPrototype это объект прототипа, который сохраняет общее поведение, представленное двумя методами, AddProduct и gettotalprice. . Его можно использовать для создания других объектов, наследующих это поведение.

const cart = Object.create(cartPrototype);
cart.addProduct({name: 'orange', price: 1.25});
cart.addProduct({name: 'lemon', price: 1.75});

console.log(cart.getTotalPrice());
//3

Корзина Объект имеет CartPrototype как его прототип. Он наследует поведение от него. Корзина Имеет скрытое свойство, которое указывает на объект прототипа.

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

это

Обратите внимание, что мы используем специальное ключевое слово под названием это Для доступа и изменение данных на объекте.

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

Данные

Вы можете удивиться, почему мы не определены и инициализировали Продукты Собственность на самом прототипе объект сама.

Мы не должны этого делать. Прототипы должны использоваться для совместного использования поведения, а не данных. Совместные данные приведут к тому же продукты на нескольких объектах корзины. Рассмотрим код ниже:

const cartPrototype = {
  products:[],
  addProduct: function(product){
      this.products.push(product);
  },
  getTotalPrice: function(){}
}

const cart1 = Object.create(cartPrototype);
cart1.addProduct({name: 'orange', price: 1.25});
cart1.addProduct({name: 'lemon', price: 1.75});
console.log(cart1.getTotalPrice());
//3

const cart2 = Object.create(cartPrototype);
console.log(cart2.getTotalPrice());
//3

Оба Cart1 и Cart2 Объекты, наследующие общее поведение от CartPrototype Также поделитесь теми же данными. Мы не хотим этого. Прототипы должны использоваться для совместного использования поведения, а не данных.

Класс

Прототип-система не является распространенным способом строительных объектов. Разработчики более знакомы с строительными объектами из классов.

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

Вот тот же объект, созданный с использованием синтаксиса классов сахара:

class Cart{
  constructor(){
    this.products = [];
  }
  
  addProduct(product){
      this.products.push(product);
  }
  
  getTotalPrice(){
    return this.products.reduce((total, p) => total + p.price, 0);
  }
}

const cart = new Cart();
cart.addProduct({name: 'orange', price: 1.25});
cart.addProduct({name: 'lemon', price: 1.75});
console.log(cart.getTotalPrice());
//3

const cart2 = new Cart();
console.log(cart2.getTotalPrice());
//0

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

Я думаю, что синтаксис класса более четким и знакомым для большинства разработчиков. Тем не менее, это делает подобное, оно создает прототип со всеми методами и использует его для определения новых объектов. Прототип может быть доступен с Корзина. Прототип Отказ

Оказывается, что система прототипа достаточно гибкой, чтобы позволить синтаксис классов. Таким образом, система класса может быть смоделирована с использованием системы прототипа.

Частные свойства

Единственное, что Продукты Собственность на новом объекте публично по умолчанию.

console.log(cart.products);
//[{name: "orange", price: 1.25}
// {name: "lemon", price: 1.75}]

Мы можем сделать его частным, используя хеш # приставка.

Частные свойства объявлены #name синтаксис. # является частью самого имена свойства и должна использоваться для объявления и доступа к собственности. Вот пример объявления Продукты Как частная собственность:

class Cart{
  #products
  constructor(){
    this.#products = [];
  }
  
  addProduct(product){
    this.#products.push(product);
  }
  
  getTotalPrice(){
    return this.#products.reduce((total, p) => total + p.price, 0);
  }
}

console.log(cart.#products);
//Uncaught SyntaxError: Private field '#products' must be declared in an enclosing class

Заводские функции

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

Закрытие – это способность функции для доступа к переменным и параметрам от другой функции даже после выполнения внешней функции. Посмотрите на Корзина Объект, построенный с тем, что называется фабричной функцией.

function Cart() {
  const products = [];
  
  function addProduct(product){
    products.push(product);
  }
  
  function getTotalPrice(){
    return products.reduce((total, p) => total + p.price, 0);
  }
  
  return {
   addProduct,
   getTotalPrice
  }
}

const cart = Cart();
cart.addProduct({name: 'orange', price: 1.25});
cart.addProduct({name: 'lemon', price: 1.75});
console.log(cart.getTotalPrice());
//3

AddProduct и gettotalprice два внутренних функция, доступа к переменной Продукты от их родителя. У них есть доступ к Продукты Переменное событие после родительского Корзина выполнил. AddProduct и gettotalprice два замыкания, которые разделяют ту же частную переменную.

Корзина это заводская функция.

Новый объект Корзина Создано с фабричной функцией имеет Продукты Переменная частная. Это не может быть доступна снаружи.

console.log(cart.products);
//undefined

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

Реконструировать

Обычно мы работаем с двумя типами объектов, структурах данных, которые имеют общедоступные данные, а не поведение и объектно-ориентированные объекты, которые имеют частные данные и общественное поведение.

Структуры данных могут быть легко созданы с использованием объекта буквального синтаксиса.

JavaScript предлагает два инновационных способа создания объектных объектов. Первый использует объект прототипа для общего поведения. Объекты наследуют от других объектов. Классы предлагают хороший сахарный синтаксис для создания таких объектов.

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

Для получения дополнительной информации о закрытиях и функциональных методах программирования по проверке моей книги Функциональное программирование с JavaScript и React .

Функциональное программирование в JavaScript Книга выходит.

Оригинал: “https://www.freecodecamp.org/news/javascript-create-object-how-to-define-objects-in-js/”