ООП в JavaScript
Мы рассмотрим два ключевых принципа ООП: наследование и полиморфизм на базовом уровне в том смысле, как они на самом деле относятся к коду 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 | 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 |
Вывод
Большинство объектов используют конструкторы. При работе с объектными литералами прототип получаем с помощью object.prototype, но при работе с конструктором, мы получаем объект используя (the constructor name).prototype
К прототипам нельзя получить доступ через цикл for-in.
Искусство добавления/назначения функций в прототип конструктора считается эффективным и рекомендуется. Метод сall() — это функция, используемая для вызова другой функции из другого блока кода в том же контексте.
Вы можете найти синтаксис Es6+ всего кода этой статьи здесь.
Автор: Yasir Gaji
Источник: webformyself.com