ООП в JavaScript

0 10

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

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

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

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

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

ООП в JavaScript

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

ООП в JavaScript

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

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

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

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

ООП в 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

ООП в JavaScript

Прототипное наследование — это когда объект наследует свои свойства от другого объекта в том же контексте, это может быть достигнуто с помощью метода 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 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

ООП в JavaScript

Вывод

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

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

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

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

Автор: Yasir Gaji

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

Оставьте ответ

Ваш электронный адрес не будет опубликован.