Писать о технологиях - не моя сильная сторона, то есть я предпочитаю быть по колено в учебнике, без ставок, не боясь учиться у кого-то другого. Однако хороший друг, человек, которого я считаю наставником, сам хороший учитель (хотя он никогда бы не стал так себя называть), побудил меня написать о концепциях, которые я изучаю. Идея заключается в том, что если я могу объяснить концепции, которые я изучаю, другим, простым и ясным способом, тогда я могу сказать, что действительно понял это.
Итак, вот краткое изложение объектов JavaScript, над которыми я когда-то работал.
- Что такое объект?
Объекты - это контейнеры, которые инкапсулируют данные.
Объект - это объект, к которому привязаны методы и свойства.
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, такие как функции жирных стрелок и способ рендеринга объектов.