Поскольку JavaScript широко используется в веб-разработке, в этой статье мы рассмотрим некоторые объектно-ориентированные механизмы, поддерживаемые JavaScript, чтобы извлечь из этого максимальную пользу. Некоторые из распространенных вопросов для интервью в JavaScript на OOPS включают: “Как объектно — ориентированное программирование реализовано в JavaScript? Чем они отличаются от других языков? Можете ли вы реализовать наследование в JavaScript и так далее…”
Существуют определенные функции или механизмы, которые делают язык объектно-ориентированным, например:
- Объект
- Классы
- Инкапсуляция
- Наследование
Давайте углубимся в детали каждого из них и посмотрим, как они реализованы в JavaScript.
Объект – это уникальная сущность, содержащая свойства и методы. Например, “автомобиль” — это реальный объект, который имеет некоторые характеристики, такие как цвет, тип, модель, мощность и выполняет определенные действия, такие как привод. Характеристики объекта называются Свойством в объектно-ориентированном программировании, а действия называются методами. Объект-это экземпляр класса. Объекты есть везде в JavaScript почти каждый элемент является объектом,будь то функция, массивы или строка.
Примечание: Метод в javascript-это свойство объекта, значением которого является функция.
Объект может быть создан двумя способами в JavaScript:
- Использование объектного литерала
//Defining object
let person = {
first_name:'Mukul',
last_name: 'Latiyan',
//method
getFunction : function(){
return (`The name of the person is
${person.first_name} ${person.last_name}`)
},
//object within object
phone_number : {
mobile:'12345',
landline:'6789'
}
}
console.log(person.getFunction());
console.log(person.phone_number.landline);
Выход:
- Использование конструктора объектов:
//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('Mukul','Latiyan');
let person2 = new person('Rahul','Avasthi');
console.log(person1.first_name);
console.log(`${person2.first_name} ${person2.last_name}`);
Выход:
- Используя метод Object.create (): Метод Object.create() создает новый объект, используя существующий объект в качестве прототипа вновь созданного объекта.
// Object.create() example a
// simple object with some properties
const coder = {
isStudying : false,
printIntroduction : function(){
console.log(`My name is ${this.name}. Am I
studying?: ${this.isStudying}.`)
}
}
// Object.create() method
const me = Object.create(coder);
// "name" is a property set on "me", but not on "coder"
me.name = 'Mukul';
// Inherited properties can be overwritten
me.isStudying = true;
me.printIntroduction();
Выход:
Классы– Классы-это чертеж объекта. Класс может иметь много объектов, потому что класс-это шаблон, в то время как объект — это экземпляры класса или конкретной реализации.
Прежде чем мы перейдем к дальнейшей реализации, мы должны знать, что в отличие от других объектно-ориентированных языков в JavaScript нет классов, у нас есть только объект. Если быть более точным, JavaScript-это объектно-ориентированный язык на основе прототипа, что означает, что у него нет классов, а он определяет поведение с помощью функции конструктора, а затем повторно использует его с помощью прототипа.
Примечание: Даже классы, предоставляемые ECMA2015, являются объектами.
Пример:
Давайте использовать классы ES6, затем мы рассмотрим традиционный способ определения объектов и смоделируем их как классы.
// 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());
Вывод:
- Как видно из приведенного выше примера, гораздо проще определить и повторно использовать объект в ES6. Следовательно, мы будем использовать ES6 во всех наших примерах.
- Инкапсуляция – Процесс упаковки свойств и функций в единое целое известен как инкапсуляция.
Давайте разберемся в инкапсуляции на примере.
//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('Mukul',21);
person1.add_Address('Delhi');
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('Mukul','Latiyan');
console.log(person1.firstname);
console.log(person1.getDetails_noaccess);
console.log(person1.getDetails_access());
Вывод:
В приведенном выше примере мы попробуем открыть некоторые свойства(человека 1.»имя») и функции(1, которое.getDetails_noaccess), но он возвращает сбросить , пока их это способ, которым мы можем получить от человека объекта(человека 1.getDetails_access()), изменяя способ, чтобы определить функцию, мы можем ограничить сферу его применения.
Наследование– Это концепция, в которой некоторые свойства и методы Объекта используются другим Объектом. В отличие от большинства языков ООП, где классы наследуют классы, объект JavaScript наследует объект, т. е. определенные функции (свойства и методы)одного объекта могут быть повторно использованы другими объектами.
Давайте разберемся в наследовании на примере:
//Inhertiance 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 to for calling above class constructor
super(name);
this.id = id;
}
toString(){
return (`${super.toString()},Student ID: ${this.id}`);
}
}
let student1 = new student('Mukul',22);
console.log(student1.toString());
Вывод:
В приведенном выше примере мы определяем объект Person с определенным свойством и методом, а затем наследуем объект Person в объекте Student и используем все свойства и методы объекта person, а также определяем определенные свойства и методы для Студента.
Примечание: Объект Person и объект Student имеют один и тот же метод, т. е. toString (), это называется переопределением метода. Переопределение метода позволяет методу в дочернем классе иметь то же имя и подпись метода, что и у родительского класса.
В приведенном выше коде ключевое слово super используется для ссылки на переменную экземпляра непосредственного родительского класса.
