Прототип 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)

Итак, найдет фигуру, имеющую те же свойства и методы родительского объекта, а также его собственные свойства и методы

Вывод

Это просто введение в него, и ни в коем случае не исчерпывающее. Но мы рассмотрели ту часть, которая чаще всего является самым большим препятствием для внедрения: понимание концепции и процесс создания каркаса.