|
|
@@ -0,0 +1,107 @@
|
|
|
+# Начала Объектно-Ориентированного Программирования.
|
|
|
+
|
|
|
+## Ассоциативный массив как объект
|
|
|
+
|
|
|
+Объекты в **JS** совпадают с ассоциативными массивами. Наряду со строками, числами и прочими типами данных, вы можете занести в ассоциативный
|
|
|
+массив функцию:
|
|
|
+
|
|
|
+```javascript
|
|
|
+var person = {
|
|
|
+ name: "Ivan",
|
|
|
+ surname: "Ivanov",
|
|
|
+ alert: function(text){
|
|
|
+ alert(text);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+var person2 = {};
|
|
|
+person2.name = "Donald";
|
|
|
+person2.surname = "Trump";
|
|
|
+person2.alert = function(text){
|
|
|
+ alert(text);
|
|
|
+}
|
|
|
+
|
|
|
+person.alert(person.name);
|
|
|
+person2.alert(person2.name);
|
|
|
+```
|
|
|
+
|
|
|
+Таким образом вы можете объединять код и данные в одной структуре. Возможность объединения данных и кода, который с ними работает, в одном *объекте*
|
|
|
+является одной из основополагающих свойств ООП и называется **инкапсуляцией**. Функция, которая относится к объекту, называется **методом**.
|
|
|
+
|
|
|
+## `this`
|
|
|
+
|
|
|
+Для обращения к полям *этого* объекта применяется ключевое слово `this`, которая ссылается на объект, к которому относится этот метод:
|
|
|
+
|
|
|
+```javascript
|
|
|
+var person = {
|
|
|
+ name: "Ivan",
|
|
|
+ surname: "Ivanov",
|
|
|
+ sayHi: function(text){
|
|
|
+ alert("Hi, this.getFullName());
|
|
|
+ }
|
|
|
+
|
|
|
+ getFullName: function(){
|
|
|
+ return this.surname + " " + this.name
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+person.sayHi()
|
|
|
+```
|
|
|
+
|
|
|
+`this` обычно равен тому, что написано перед точкой при вызове (`person.sayHi()` - `this` будет равен `person`)
|
|
|
+
|
|
|
+## Функция - Конструктор
|
|
|
+
|
|
|
+Для создания объектов определенного типа применяется **функция-конструктор**, результатом работы которой становится новый объект. Вызов конструктора
|
|
|
+происходит не обычным способом, а с использованием оператора `new`
|
|
|
+
|
|
|
+```javascript
|
|
|
+function Person(){
|
|
|
+}
|
|
|
+
|
|
|
+var person = new Person()
|
|
|
+```
|
|
|
+
|
|
|
+Пример выше создает пустой объект с именем класса `Person`:
|
|
|
+
|
|
|
+```javascript
|
|
|
+person
|
|
|
+typeof person
|
|
|
+```
|
|
|
+
|
|
|
+По всеобщей договоренности, функции-конструкторы именуются с большой буквы (`Person`). Для создания нового объекта используется оператор `new`,
|
|
|
+который создает пустой объект, заносит в него определенное множество технической информации и передает его как `this` в конструктор:
|
|
|
+
|
|
|
+
|
|
|
+```javascript
|
|
|
+function Person(name, surname){
|
|
|
+ this.name = name
|
|
|
+ this.surname = surname
|
|
|
+}
|
|
|
+
|
|
|
+var person = new Person("Ivan", "Petroff")
|
|
|
+```
|
|
|
+
|
|
|
+Обратите внимание, что конструктор ничего не возращает, используя `return`. Считается что он возвращает новый объект, для этого достаточно просто
|
|
|
+заполнить нужные поля в `this`.
|
|
|
+
|
|
|
+## Методы
|
|
|
+
|
|
|
+Так же как данные, мы можем задать определенные методы объекту:
|
|
|
+
|
|
|
+```javascript
|
|
|
+function Person(name, surname){
|
|
|
+ this.name = name
|
|
|
+ this.surname = surname
|
|
|
+
|
|
|
+ this.getFullName = function(){
|
|
|
+ return this.name + (this.fatherName ? " " + this.fatherName + " " : " ") + this.surname
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+var person = new Person("Ivan", "Petroff")
|
|
|
+alert(person.getFullName())
|
|
|
+
|
|
|
+person.fatherName = "Sydorych"
|
|
|
+alert(person.getFullName())
|
|
|
+
|
me@helium