Писать о технологиях - не моя сильная сторона, то есть я предпочитаю быть по колено в учебнике, без ставок, не боясь учиться у кого-то другого. Однако хороший друг, человек, которого я считаю наставником, сам хороший учитель (хотя он никогда бы не стал так себя называть), побудил меня написать о концепциях, которые я изучаю. Идея заключается в том, что если я могу объяснить концепции, которые я изучаю, другим, простым и ясным способом, тогда я могу сказать, что действительно понял это.

Итак, вот краткое изложение объектов JavaScript, над которыми я когда-то работал.

  1. Что такое объект?
    Объекты - это контейнеры, которые инкапсулируют данные.
    Объект - это объект, к которому привязаны методы и свойства.

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

3. Как создать объект?
Буквенное обозначение

 var nameOfObject = {
    property:value
 }
 
 var userOne = {
     email: ‘[email protected]’,
     name: ‘adler’,
 login(){
     console.log(this.email, ‘has logged in’)
 },
 logout(){
     console.log(this.email, ‘has logged out’)
   }
 };
 
 console.log(userOne.name)

4. Доступ к методам и свойствам
i) Точечная запись.

userOne.email
userOne.login()
ii). Bracket Notation 
 
userOne[‘name’]
userOne[‘speak’]()

5. В чем преимущество использования скобок по сравнению с точечной?
Использование скобок позволяет получить доступ к динамическим переменным.

userOne = {
   name = 'irene',
   age = '35'
 }
 var prop = 'name'
 userOne [prop]
 irene
 prop = 'age'
 userOne[prop]
 25
 userOne.prop
 undefined

Обозначение скобок также позволяет вам обращаться к свойствам с помощью специальных символов, в то время как точка требует, чтобы свойства были буквенно-цифровыми и либо _, либо $. Вы можете прочитать больше [здесь] (https://codeburst.io/javascript-quickie-dot-notation-vs-bracket-notation-333641c0f781).

6. Добавление / обновление свойств и методов к объектам

userOne.name = 'adler'
userOne.logIn = function login(){}

КОНСТРУКТОРЫ

7. Что такое конструктор?
Конструктор - это план, который определяет объект во время его создания.

8. Как использовать конструктор для создания объекта?

function User(email, name){
   this.email = email;
   this.name = name;
   this. online = false;
   this.login = function(){
      console.log(this.email, ‘has logged in’)
    }
 }

9. Как создать экземпляр объекта?
Использование ключевого слова new
Ключевое слово new:
a) создает новый объект.
b) устанавливает значение this как новый пустой объект
c) вызывает метод конструктора

Пример:

 var userOne = new User(‘[email protected]’, ‘Adler’)
 var userTwo = new User(‘[email protected]’, ‘yoshi’)

Доступ к объектам

userOne.name
userOne.email

ПРОТОТИПЫ
10. Что такое прототип?
Объект, от которого другие объекты наследуют методы. Прототипы полезны, потому что нам не нужно создавать новые функции для каждого объекта, и нам не нужно создавать новые экземпляры с помощью этих методов.

 function User(email, name){
    this.email = email;
    this.name = name;
    this. online = false;
    this.login = function(){
         console.log(this.email, ‘has logged in’)
    }
 }

Добавление методов в прототипы

 User.prototype.login = function(){
    this.online = true; 
    console.log (this.email, ‘has logged in’);
 }
User.prototype.logout = function(){
    this.online = false;
    console.log(this.email, ‘has logged out’);
 }

Наследование прототипа

function Admin(…args){ }

КЛАССЫ
11. Зачем нам нужны классы?
Классы позволяют автоматизировать создание экземпляров и повторное использование (это слово?) вашего кода.

class User{
    constructor(email,name){
    this.email = email;
    this.name = name;
    this.score = 0;
  }
 login(){
    console.log(this.email, ‘just logged in’); 
    return this
 }
 logout(){
     console.log(this.email, ‘just logged out’);
     return this
 }
 updateScore(){
    this.score++;
    console.log(this.email, ‘score is now ‘, this.score)
    return this
    }
 }

Расширение классов
Позволяет создавать классы разных типов с похожими характеристиками.

class Admin extends User{
    deleteUser(user){
    users = users.filter(u => {
    return u.email != user.email;
    });
   }
 }

Создайте новый объект расширенного класса

var admin = new Admin(‘[email protected]’, ‘Ashley’)

Расширенные классы, вызывающие объекты

admin.deleteUser(userTwo);
var admin = new Admin(‘[email protected]’, ‘ashley’)

Я надеюсь, что это помогло вам получить базовое представление об объектах в JavaScript. Я сделаю обновление статьи, чтобы включить элементы ES6, такие как функции жирных стрелок и способ рендеринга объектов.