ООП 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