ООП в Javascript

Существуют определенные особенности или механизмы, которые делают язык объектно-ориентированным, например:

1.Объект
2.Классы
3.инкапсуляция
4.наследование

  1. Объект — Объект — это уникальная сущность, которая содержит свойства и методы. Например, «автомобиль» — это реальный объект, который имеет некоторые характеристики, такие как цвет, тип, модель, мощность и выполняет определенные действия, например, ездит. Характеристики объекта называются свойствами в объектно-ориентированном программировании, а действия — методами. Объект — это экземпляр класса. Объекты встречаются в JavaScript повсюду, почти каждый элемент является объектом, будь то функция, массив или строка.

Примечание: Метод в javascript — это свойство объекта, значением которого является функция.

1. Использование литерала объекта

//Defining object
let person = {
    first_name:'Ram',
    last_name: 'Prasad',

    //method
    getFunction : function(){
        return (`The name of the person is
        ${person.first_name} ${person.last_name}`)
    },
    //object within object
    phone_number : {
        mobile:'7399',
        landline:'6743'
    }
}
console.log(person.getFunction());
console.log(person.phone_number.landline);

Вход в полноэкранный режим Выйти из полноэкранного режима

2. Использование конструктора объектов:

//using a constructor
function person(first_name,last_name){
this.first_name = first_name;
this.last_name = last_name;
}
//creating new instances of person object
let person1 = new person('Ram','Prasad');
let person2 = new person('Vishnu','Avasthi');

console.log(person1.first_name);
console.log(`${person2.first_name} ${person2.last_name}`);
Ввести полноэкранный режим Выход из полноэкранного режима

3. Использование метода Object.create():

Метод Object.create() создает новый объект, используя существующий объект в качестве прототипа вновь создаваемого объекта.

// Object.create() example a
// simple object with some properties
const student = {
    isWorking : false,
    printIntroduction : function(){
        console.log(`My name is ${this.name}. Am I
        Working?: ${this.isWorking}.`)
    }
}
// Object.create() method
const me = Object.create(coder);

// "name" is a property set on "me", but not on "student"
me.name = 'Ram';

// Inherited properties can be overwritten
me.isStudying = true;

me.printIntroduction();

Вход в полноэкранный режим Выход из полноэкранного режима

2. Классы —
Классы — это прототип объекта. Класс может иметь много объектов, потому что класс — это шаблон, а объект — это экземпляр класса или конкретная реализация.
Прежде чем мы перейдем к реализации, мы должны знать, что в отличие от других объектно-ориентированных языков в JavaScript нет классов, есть только объекты. Точнее говоря, JavaScript — это объектно-ориентированный язык, основанный на прототипах, что означает, что у него нет классов, скорее он определяет поведение с помощью функции-конструктора, а затем повторно использует его с помощью прототипа.

Классы JavaScript, введенные в ECMAScript 2015, в первую очередь являются синтаксическим сахаром над существующим в JavaScript наследованием на основе прототипов. Синтаксис классов не привносит в JavaScript новую объектно-ориентированную модель наследования. Классы JavaScript предоставляют гораздо более простой и понятный синтаксис для создания объектов и работы с наследованием.

// Defining class using es6
class Vehicle {
constructor(name, maker, engine) {
    this.name = name;
    this.maker = maker;
    this.engine = engine;
}
getDetails(){
    return (`The name of the bike is ${this.name}.`)
}
}
// Making object with the help of the constructor
let bike1 = new Vehicle('Hayabusa', 'Suzuki', '1340cc');
let bike2 = new Vehicle('Ninja', 'Kawasaki', '998cc');

console.log(bike1.name); // Hayabusa
console.log(bike2.maker); // Kawasaki
console.log(bike1.getDetails());

Вход в полноэкранный режим Выход из полноэкранного режима
// Defining class in a Traditional Way.
function Vehicle(name,maker,engine){
    this.name = name,
    this.maker = maker,
    this.engine = engine
};

Vehicle.prototype.getDetails = function(){
    console.log('The name of the bike is '+ this.name);
}

let bike1 = new Vehicle('Hayabusa','Suzuki','1340cc');
let bike2 = new Vehicle('Ninja','Kawasaki','998cc');

console.log(bike1.name);
console.log(bike2.maker);
console.log(bike1.getDetails());

Войти в полноэкранный режим Выход из полноэкранного режима

3. Инкапсуляция — Процесс обертывания свойств и функций в единый блок называется инкапсуляцией.
Давайте разберемся с инкапсуляцией на примере.

//encapsulation example
class person{
    constructor(name,id){
        this.name = name;
        this.id = id;
    }
    add_Address(add){
        this.add = add;
    }
    getDetails(){
        console.log(`Name is ${this.name},Address is: ${this.add}`);
    }
}

let person1 = new person('Ram',26);
person1.add_Address('Mathura');
person1.getDetails();

Вход в полноэкранный режим Выход из полноэкранного режима

В приведенном выше примере мы просто создаем объект person с помощью конструктора, инициализируем его свойства и используем его функции. Нас не беспокоят детали реализации. Мы работаем с интерфейсом объекта, не обращая внимания на детали реализации.
Иногда под инкапсуляцией понимается сокрытие данных или абстракция данных, что означает представление основных характеристик, скрывая детали фона. Большинство языков ООП предоставляют модификаторы доступа для ограничения области действия переменной, но в JavaScript таких модификаторов доступа нет, но есть определенные способы, с помощью которых мы можем ограничить область действия переменных внутри класса/объекта.

// Abstraction example
function person(fname,lname){
    let firstname = fname;
    let lastname = lname;

    let getDetails_noaccess = function(){
        return (`First name is: ${firstname} Last
            name is: ${lastname}`);
    }

    this.getDetails_access = function(){
        return (`First name is: ${firstname}, Last
            name is: ${lastname}`);
    }
}
let person1 = new person('Ram','Prasad');
console.log(person1.firstname);
console.log(person1.getDetails_noaccess);
console.log(person1.getDetails_access());

Войти в полноэкранный режим Выйти из полноэкранного режима

В приведенном выше примере мы пытаемся получить доступ к некоторому свойству(person1.firstname) и функции(person1.getDetails_noaccess), но она возвращает неопределенное значение, в то время как существует метод, к которому мы можем получить доступ из объекта person(person1.getDetails_access()). Изменив способ определения функции, мы можем ограничить область ее применения.

4. Наследование — это концепция, в которой некоторые свойства и методы объекта используются другим объектом. В отличие от большинства языков ООП, где классы наследуют классы, в JavaScript объекты наследуют объекты, т.е. определенные свойства (свойства и методы) одного объекта могут быть повторно использованы другими объектами.

Давайте разберемся с наследованием на примере:

//Inheritance example
class person{
    constructor(name){
        this.name = name;
    }
    //method to return the string
    toString(){
        return (`Name of person: ${this.name}`);
    }
}
class student extends person{
    constructor(name,id){
        //super keyword for calling the above class constructor
        super(name);
        this.id = id;
    }
    toString(){
        return (`${super.toString()},Student ID: ${this.id}`);
    }
}
let student1 = new student('Ram',25);
console.log(student1.toString());

Вход в полноэкранный режим Выход из полноэкранного режима

В приведенном выше примере мы определяем объект Person с определенными свойствами и методами, а затем наследуем объект Person в объекте Student и используем все свойства и методы объекта Person, а также определяем определенные свойства и методы для объекта Student.

Оцените статью
devanswers.ru
Добавить комментарий