ООП в JavaScript

Опубликовано Фев 24, 2022

Мы рассмотрим два ключевых принципа ООП: наследование и полиморфизм на базовом уровне в том смысле, как они на самом деле относятся к коду javascript, используя основные характеристики ООП для иллюстрации принципов объектно ориентированного подхода.

Конструкторы и ключевое слово this

Содержание статьи:

Две самые важные вещи в объектно-ориентированном программировании в javascript, как и практически в любом другом языке программирования — это ключевое слово this и constructors.

Сейчас читают

Как узнать на каком движке сделан сайт?

Как сделать одностраничный сайт самому

Хотя Es6+ считается синтаксическим сахаром и обеспечивает более удобный способ написания конструкторов или объявления классов, в этой статье я буду использовать Es5, чтобы мы могли глубже понять, как конструкторы работают под капотом.

Точно так же, как объектные литералы, где объекты пар ключ-значение присваиваются переменной, работают и конструкторы, но для нескольких экземпляров, в отличие от обьектных литералов, конструкторы включают прототипы и наследование.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Во-первых, имея конструктор одного или нескольких свойств, мы можем создать экземпляр объекта с помощью ключевого слова new. См. демонстрацию кода и результаты ниже:

JavaScript function Entity(name) { this.name = name; } // declaration of a single property “Entity” constructor taking in a “name” argument const human = new Entity(‘Creature’); // instantiating using the “new” keyword and assigning “Creature” as a name console.log(human); // calling instantiated variable

1234567

function Entity(name) { this.name = name;} // declaration of a single property “Entity” constructor taking in a “name” argument const human = new Entity(‘Creature’); // instantiating using the “new” keyword and assigning “Creature” as a name console.log(human); // calling instantiated variable

Ключевое слово this — очень важное ключевое слово, его значение определяется текущим контекстом, в котором выполняется ваш код. В нашем примере его значение привязано к контексту функции Entity. Вы можете узнать больше о ключевом слове this здесь.

Вы также можете добавить несколько свойств в конструктор и создавать их экземпляры по-разному.

Прототипы и наследование прототипов

У каждого объекта в javascript есть прототип. Прототип сам по себе является объектом, а другие объекты могут наследовать свойства и методы от своих прототипов. Это означает, что мы также можем назначать или добавлять выбранные нами функции в цепочку прототипов конструктора. См. представление кода ниже:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

JavaScript function Entity(name, dod) { this.name = name; this.creationDate = new Date(dod); } // declaration of a multiple property “Entity” constructor Entity.prototype.getTotalYears = function() { return new Date().getFullYear() – this.creationDate.getFullYear(); } // inputing the “getTotalYears” function into the “Entity” constructor’s prototype const human = new Entity(‘Creature’, ‘january 09 2000’); // instantiating using the “new” keyword and assigning a name and date console.log(human.getTotalYears()); // logging the total years of the instantiated variable using the “getTotalYears” function in the prototype console.log(human); // logging the instantiated variable

1234567891011121314

function Entity(name, dod) { this.name = name; this.creationDate = new Date(dod);} // declaration of a multiple property “Entity” constructor Entity.prototype.getTotalYears = function() { return new Date().getFullYear() – this.creationDate.getFullYear();} // inputing the “getTotalYears” function into the “Entity” constructor’s prototype const human = new Entity(‘Creature’, ‘january 09 2000’); // instantiating using the “new” keyword and assigning a name and date console.log(human.getTotalYears()); // logging the total years of the instantiated variable using the “getTotalYears” function in the prototypeconsole.log(human); // logging the instantiated variable

Прототипное наследование — это когда объект наследует свои свойства от другого объекта в том же контексте, это может быть достигнуто с помощью метода object.create(). См. представление кода ниже:

JavaScript function person(name) { this.name = name; } // initializing “person” constructor person.prototype.greets = function() { return `${this.name} says hi`; } // creating a “greets” function for the person constructor and assigning to it’s prototype const Yasir = new person(‘Yasir’); // instantiating a new student object function Entity(name, regards) { person.call(this, name); // calling the “person” constructor and assigning it to the “Entity” constructor this.regards = regards; } // initializing “Entity” constructor Entity.prototype = Object.create(person.prototype); // INHEERITING THE “PERSON” CONSTRUCTOR PROTOTYPE TO THE “ENTITY” CONSTRUCTOR PROTOTYPE const MrSmith = new Entity(‘Mr.Smith’, ‘how are you?’); // instantiating a new “Entity” object console.log(Yasir); // logging the student object console.log(MrSmith); // logging the teacher object console.log(MrSmith.greets()); // calling the “greets()” function from “person” constructor on the “Entity” constructor and printing the result to the console

12345678910111213141516171819202122232425

Вывод

Большинство объектов используют конструкторы. При работе с объектными литералами прототип получаем с помощью object.prototype, но при работе с конструктором, мы получаем объект используя (the constructor name).prototype

К прототипам нельзя получить доступ через цикл for-in.

Искусство добавления/назначения функций в прототип конструктора считается эффективным и рекомендуется. Метод сall() — это функция, используемая для вызова другой функции из другого блока кода в том же контексте.

Вы можете найти синтаксис Es6+ всего кода этой статьи здесь.

Автор: Yasir Gaji

Источник: webformyself.com