ООП JavaScript

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

План

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

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

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

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

Объекты

var car1 = {
   mark: "bmw",
   drive: function(){
   ...
   }
};

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 необходимо копировать предыдущий код, а в случае добавления новых методов и свойств требуется внести их во все объекты. В этом заключается минус такого подхода.

Классы

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){
 
}

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

'use strict';
class MyClass{
	constructor(){
 
 
	}
 
}
let a = new MyClass();
 
// или
 
let Car = class{
	method(){
		console.log("metho1");
	}
}
 
let c = new Car();
c.method();

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

'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);