Вход

ООП JavaScript

ООП JavaScript

В данной статье мы рассмотрим как использовать ООП JavaScript.

План

На всякий случай напомню как выполнить скрипт после загрузки DOM:

1
2
3
4
// срабатывает, когда загружается вся страница 
window.onload = function(e){
 
}

И как чаще всего обращаются к элементам:

1
2
3
4
5
6
document.getElementById('')
document.getElementsByTagName() // может искать внутри другого элемента, если не document
document.getElementByTagName() // если элемент один
document.getElementsByClassName() // не поддерживается ie8
document.querySelector() элемент
document.querySelectorAll() массив элементов

Объекты

1
2
3
4
5
6
var car1 = {
   mark: "bmw",
   drive: function(){
   ...
   }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var a = 10;
var my_obj = {
    свойство1 : 'значение1',
    'свойство 2' : "значение2",
    num : a,
    obj2 : {
        s1 : 1,
    },
    method1 : function(){
        // метод
    },
    method2 : myMethod,
    get summ(){ // свойство my_obj.summ
        return this.num + 5;
    },
    set summ(value){ // свойство my_obj.summ = 7;
        this.num = this.num + value;
    }
};
 
function myMethod(){
 
}

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

Классы

1
2
3
4
5
6
7
8
9
10
11
12
function Car(name, mark){
   this.name = name;
   this.mark = mark;
   wheels = 4 // данное свойство доступно лишь внутри класса (замыкание)
   this.drive = function(){
 
   }
}
 
// использование конструктора
var car1 = new Car('BMW', 'M3');
var car2 = new Car('BMW', 'M4');

Ещё один вариант создания объекта

1
2
var my_obj1 = new Object({s1 : 1});
console.log(my_obj1.s1);

Создание объекта прототипа

1
2
var my_obj2 = Object.create(my_obj1);
console.log(my_obj2.s1);

Проверка существования свойства

1
2
3
if('s1' in my_obj){
 
}

Новый синтаксис стандарта для создания классов:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
'use strict';
class MyClass{
	constructor(){
 
 
	}
 
}
let a = new MyClass();
 
// или
 
let Car = class{
	method(){
		console.log("metho1");
	}
}
 
let c = new Car();
c.method();

Геттеры и сеттеры

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
'use strict';
class MyClass{
 
	constructor(fio){
 
		this.fio = fio; // вызов сеттера
		console.log(this.fio); // вызов геттера
	}
 
	get fio() {
	    return this._fio;
	}
 
	set fio(fio) {
		if (fio < 4)
				this._fio = fio;
			else
				alert("no");
	}
}
let a = new MyClass(2);

Наследование

29 ноября 2018 /

2772 Views /

0 Comment
Ilya Web developer
Author

«Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете.»Martin Golding