👉 Привет всем, я Беннисон. В этом блоге мы собираемся узнать о функции конструктора JavaScript и новом операторе, эти вещи являются частью ООП (объектно-ориентированного программирования) JavaScript. И функция конструктора не ES6. Прежде чем перейти к этому блогу, если вы не читали мой предыдущий блог, в котором я объяснял основы ООП и в чем разница между классическим ООП и JavaScript ООП, пожалуйста, прочитайте эти блоги, которые будут более полезными для понимания этого блога. Хорошо, давайте перейдем к блогу.
- Мы можем использовать функцию конструктора для создания объекта. Функция-конструктор — это не что иное, как обычная (нормальная) функция. Единственная разница между функцией-конструктором и обычной функцией заключается в том, что функция-конструктор вызывается с ключевым словом new, а обычная функция — нет.
function User(firstName, lastName) {
console.log(this); // {}
}
const user = new User('Bennison', 'Devadoss');
- В приведенном выше примере мы видим функцию User, имя функции-конструктора всегда начинается с заглавной буквы, это стандартный способ определения функции-конструктора.
- Здесь важно то, что функция вызывается с новым ключевым словом. По сути, когда мы вызываем функцию с новым ключевым словом, за сценой происходят четыре вещи.
- Здесь первый шаг: когда мы вызываем функцию с новым ключевым словом, новое ключевое слово создает пустой объект и присваивает его переменной перед вызовом фактической функции.
- На следующем шаге эта функция будет вызываться, в этом вызове функции это ключевое слово устанавливается для вновь созданного пустого объекта. вот почему в приведенном выше примере мы видим пустой объект ({}) для этого ключевого слова.
- И на третьем шаге вновь созданный объект будет связан с прототипом. для получения дополнительной информации об этом прототипе ссылок, который мы увидим в моих следующих блогах.
- На четвертом и последнем шаге функция-конструктор автоматически возвращает специальный объект this.
function User(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
console.log(this); /* User { firstName: 'Bennison', lastName: 'Devadoss' } */
}
const user = new User('Bennison', 'Devadoss');
console.log(user); /* User firstName: 'Bennison', lastName: 'Devadoss' } */
- Теперь вы можете увидеть приведенный выше пример. Здесь я обновил тот, который мы обсуждали ранее. В начале «этот» объект будет пустым, теперь я создал два свойства для этого «этого» объекта. Итак, в приведенном выше примере консоль возвращает объект типа «{ firstName: ‘Bennison’, lastName: ‘Devadoss’ }». И в конце «этот» объект будет автоматически возвращен туда, где была вызвана функция.
- Используя эту функцию-конструктор, мы можем создать множество объектов (экземпляров), если хотите. вот почему функция конструктора называется blueprint (для создания объектов).
- В ООП (объектно-ориентированном программировании) объект называется экземпляром, который наследуется от класса.
- В Javascript есть специальное ключевое слово instanceof, которое используется для проверки того, является ли экземпляр функцией-конструктором или нет.
function User(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
function Company(name) {
this.name = name;
}
const user = new User('Bennison', 'Devadoss');
console.log(user instanceof User); /* true */
console.log(user instanceof Company); /* false */
- В приведенном выше примере мы видим две функции-конструктора: одна — User, а другая — Company, и экземпляр создается из функции-конструктора User, а не из функции-конструктора Company.
- Итак, если я хочу проверить, является ли унаследованный объект экземпляром пользователя (функция конструктора) или нет. Мне нужно использовать оператор instanceOf, который вернет значение, которое будет либо истинным, либо ложным.
- Мы также можем добавить методы в функцию-конструктор.
function User(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
this.getFullName = function () {
console.log(`${this.firstName} ${this.lastName}`); // 'Bennison Devadoss'
};
}
const user = new User('Bennison', 'Devadoss');
console.log(user); /* User {
firstName: 'Bennison',
lastName: 'Devadoss',
getFullName: [Function (anonymous)]
} */
user.getFullName();
- Создание метода внутри функции-конструктора — плохая привычка, никогда не следует создавать метод внутри функции-конструктора. Например, если мы собираемся создать несколько экземпляров этой функции-конструктора, то каждый из них будет иметь свой собственный метод.
- Здесь метод функции-конструктора копируется во все экземпляры. Мы должны использовать один метод для всех экземпляров, что означает, что метод не является собственным свойством этого объекта, поэтому для этого нам нужно установить метод в прототип. В приведенном ниже примере я привел пример решения.
function User(firstName, lastName) {
this.firstName = firstName;
this.lastName = lastName;
}
const user = new User('Bennison', 'Devadoss');
User.prototype.getFullName = function () {
console.log(`${this.firstName} ${this.lastName}`);
};
console.log(user); /* User { firstName: 'Bennison', lastName: 'Devadoss' } */
user.getFullName();
Мы увидим прототип этой функции в моем следующем блоге.
- Я надеюсь, что в этом блоге мы узнали концепцию функции-конструктора, нового ключевого слова и ее рабочего процесса. Спасибо, что читаете этот блог, до скорой встречи👋.
Использованная литература:
👉 https://javascript.info/constructor-new
