В этом руководстве вы узнаете о прототипах в JavaScript с помощью примеров.
Прежде чем изучать прототипы, обязательно ознакомьтесь с этими руководствами:
- Объекты JavaScript
- Функция конструктора JavaScript
Как вы знаете, вы можете создать объект в JavaScript, используя функцию конструктора объекта. Например,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person();
В приведенном выше примере function Person()это функция конструктора объекта. Мы создали два объекта person1и person2из него.
Прототип JavaScript
В JavaScript каждая функция и объект по умолчанию имеет свойство с именем prototype. Например,
function Person () ( this.name = 'John', this.age = 23 ) const person = new Person(); // checking the prototype value console.log(Person.prototype); // (… )
В приведенном выше примере мы пытаемся получить доступ к свойству прототипа Personфункции-конструктора.
Поскольку в данный момент свойство prototype не имеет значения, он показывает пустой объект (…).
Наследование прототипа
В JavaScript прототип можно использовать для добавления свойств и методов в функцию-конструктор. А объекты наследуют свойства и методы от прототипа. Например,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding property to constructor function Person.prototype.gender = 'male'; // prototype value of Person console.log(Person.prototype); // inheriting the property from prototype console.log(person1.gender); console.log(person2.gender);
Вывод
(пол: «мужской») мужской мужской
В приведенной выше программе мы добавили новое свойство genderк Personфункции конструктора, используя:
Person.prototype.gender = 'male';
Затем объект person1и person2наследует свойство genderот свойства прототипа Personфункции конструктора.
Следовательно, оба объекта person1и person2могут получить доступ к свойству гендера.
Примечание . Синтаксис для добавления свойства в функцию конструктора объекта:
objectConstructorName.prototype.key = 'value';
Прототип используется для предоставления дополнительных свойств всем объектам, созданным из функции-конструктора.
Добавление методов в функцию-конструктор с помощью прототипа
Вы также можете добавить новые методы в функцию-конструктор, используя прототип. Например,
// constructor function function Person () ( this.name = 'John', this.age = 23 ) // creating objects const person1 = new Person(); const person2 = new Person(); // adding a method to the constructor function Person.prototype.greet = function() ( console.log('hello' + ' ' + this.name); ) person1.greet(); // hello John person2.greet(); // hello John
В приведенной выше программе новый метод greetдобавляется к Personфункции-конструктору с использованием прототипа.
Изменение прототипа
Если значение прототипа изменено, то все новые объекты будут иметь измененное значение свойства. Все ранее созданные объекты будут иметь предыдущее значение. Например,
// constructor function function Person() ( this.name = 'John' ) // add a property Person.prototype.age = 20; // creating an object const person1 = new Person(); console.log(person1.age); // 20 // changing the property value of prototype Person.prototype = ( age: 50 ) // creating new object const person3 = new Person(); console.log(person3.age); // 50 console.log(person1.age); // 20
Примечание . Вы не должны изменять прототипы стандартных встроенных объектов JavaScript, таких как строки, массивы и т. Д. Это считается плохой практикой.
Связывание прототипов JavaScript
Если объект пытается получить доступ к тому же свойству, которое находится в функции конструктора и в объекте-прототипе, объект берет свойство из функции конструктора. Например,
function Person() ( this.name = 'John' ) // adding property Person.prototype.name = 'Peter'; Person.prototype.age = 23 const person1 = new Person(); console.log(person1.name); // John console.log(person1.age); // 23
В приведенной выше программе имя свойства объявлено в функции конструктора, а также в свойстве прототипа функции конструктора.
Когда программа выполняется, person1.nameсмотрит в функцию конструктора, чтобы увидеть, есть ли свойство с именем name. Поскольку функция-конструктор имеет свойство name со значением 'John', объект принимает значение из этого свойства.
Когда программа выполняется, person1.ageсмотрит в функцию конструктора, чтобы увидеть, есть ли свойство с именем age. Поскольку функция-конструктор не имеет ageсвойства, программа просматривает объект-прототип функции-конструктора, и этот объект наследует свойство от объекта-прототипа (если доступно).
Примечание . Вы также можете получить доступ к свойству прототипа функции-конструктора из объекта.
function Person () ( this.name = 'John' ) // adding a prototype Person.prototype.age = 24; // creating object const person = new Person(); // accessing prototype property console.log(person.__proto__); // ( age: 24 )
В приведенном выше примере personобъект используется для доступа к свойству прототипа с помощью __proto__. Однако __proto__он устарел, и вам следует избегать его использования.
