Прототип JavaScript
JavaScript не является объектно-ориентированным языком на основе классов, но имеет способы использования ООП
Итак, JavaScript — это язык, основанный на прототипах.
let names = { Fname : ‘Islam’ , Lname : ‘Ahmed’ } console.log(‘names’ , names) ;
Почему ООП?
ООП решил проблему, так что же это?
Пусть программа включает несколько функций с одинаковым поведением, вы обнаружите, что повторяете каждую переменную и функцию внутри нее, поэтому в ООП мы объединяем группу связанных функций и переменных в единицу { объект } .
Функция = › Метод
Переменная =› Свойство
Концепция ООП
- Инкапсуляция
- Абстракция
- Наследование
- Полиморфизм
Инкапсуляция
Когда группируются связанные переменные и функции, которые с ними работают, мы называем это инкапсуляцией, поэтому в этом примере мы заключаем переменные и функции в объект employee .
Полиморфизм
Поли: много
Трансформация: Форма
- Полезно, чтобы избавиться от использования if/else и переключения регистра
- Если у вас есть список элементов { введите текст , выберите , установите флажок }
- Каждый элемент имеет функцию рендеринга
- Ваша реализация будет иметь две версии до использования этой концепции и после ее использования.
До
switch(Element.type) { case 'text' : render_TexBox() ; case 'select' : renderSelect() ; case 'checkBox' : render_CheckBox(); case '.....' : render_AnyThing(); }
После
If you have function wrapped all elements called [ function element {} ] So all you need is trigger that function and access render function inside it . element.render() ;
Фабрика
Если у вас есть объект круга, который содержит его свойства и метод, то вы хотите создать еще один объект круга, вы будете дублировать существующий со всеми свойствами и методом, поэтому ваш код будет сложным и совсем не чистым.
Тогда решение состоит в том, чтобы обернуть его внутри фабричной функции, чтобы его можно было повторно использовать, как вы хотите.
Так вот вопрос как быть!?
Реализация заводских функций
function createCircle(radius) { return { radius : radius , // it can be radius only as ES6 draw : function () { console.log('draw') } } } const circle = createCircle (10) ; circle.draw()
Конструкторы
- То же использование, что и у заводской функции
- Должен начинаться с заглавной буквы
function Circle(radius) { this.radius = radius ; this.draw = function() { console.log('draw'); } } const circle = new Circle(10) circle.draw()
Веселье конструктора и веселье фабрики
- Заводская функция: использование возврата и дополнительного кода
- Функция конструктора: используя это ключевое слово и просто
Примечание:
пусть х = {} ;
//в фоновом режиме js будет создано let x = new Object() ;
Итак, поведение Js по умолчанию имеет объект-конструктор
Абстракция
Скрыть какое-то свойство и методы нам даст,
- Упрощенный интерфейс
- Уменьшить влияние изменений
Основная идея - сделать свойства и методы приватными как!?
Ex :
function Circle(radius) { this.radius = radius ; let default_Location = { x:0 , y:0} ; // will be private access let computeLocation = function (factor) { // any implementation here will be private of access } this.draw = function() { console.log(‘draw’); } }
So ,
const circle = new Circle(10) circle.draw() circle.radius = 20 ;
Остальные свойства и методы скрыты от доступа извне.
Это называется { Абстракция}
Сеттер и геттер
Если вы хотите иметь дело с объектом абстракции извне, используйте Get() и Set().
function Circle(radius) { this.radius = radius ; let default_Location = {x:0 , y:0}; Object.defineProperty(this , ‘default_Location’ , { get : function() { return default_Location ; }, set : function(value) { default_Location = value } }) this.draw = function() { console.log(‘draw’); } }
Получить()
постоянный круг = новый круг(10)
console.log(circle.default_Location) ;
Установить()
circle.default_Location = { x:2 , y:5}
console.log(circle.default_Location) ;
Наследование
- Позволяют исключить избыточный код.
- Если вы хотите сделать функциональный шар из круглого объекта
function Circle(radius) { this.radius = radius ; this.draw = function() { console.log(‘draw’); } }
TO
function Ball(radius , name) { this.name = name ; Circle.call(this , radius) ; }
// Наследовать прототип
Ball.prototype = Object.create(Circle.prototype) const shape = new Ball(10 , ‘ball’) ; console.log(shape)
Итак, найдет фигуру, имеющую те же свойства и методы родительского объекта, а также его собственные свойства и методы
Вывод
Это просто введение в него, и ни в коем случае не исчерпывающее. Но мы рассмотрели ту часть, которая чаще всего является самым большим препятствием для внедрения: понимание концепции и процесс создания каркаса.