Концепция объектов и типов данных в JavaScript🗃️.
JavaScript известен своей парадигмой объектно-ориентированного программирования. В JavaScript большинство вещей можно рассматривать как объекты, включая массивы, функции и даже примитивные типы данных, такие как число, строка и логическое значение, когда они заключены в экземпляры объекта. Однако важно отметить, что не все в JavaScript является объектом, например неопределенные и нулевые значения. Понимание различий между объектами и другими типами данных в JavaScript необходимо для написания эффективного и действенного кода.
В JavaScript каждый объект имеет свойство prototype, которое ссылается на прототип объекта. Прототип — это объект, содержащий свойства и методы, которые может использовать объект. Это позволяет использовать наследование на основе прототипов в JavaScript.
В наследовании на основе прототипа свойство constructor является свойством объекта-прототипа, которое ссылается на функцию-конструктор, используемую для создания объектов, наследуемых от этого прототипа. Это свойство часто используется для проверки типа объекта и создания новых экземпляров того же типа с помощью ключевого слова new.
давайте визуализируем это в Dev-tools.
Связывание прототипов
Теперь, когда у нас есть понимание основных основ объектов и прототипов в JavaScript, мы можем продемонстрировать это, создав функцию Product в JavaScript для изучения многоуровневого наследования.
function Product(n, p) {
this.name = n;
this.price = p;
}
//Output
//undefined -> Object Created
Product.prototype
//Output
//{constructor:f} //an object with properties have been created
После создания функции продукта теперь мы создаем новое унаследованное имя объекта iPhone.
const iPhone = new Product("iPhone14",100000);
Теперь мы создадим метод display() в Product с помощью прототипа. Создание метода display() в Product с помощью прототипа позволяет добавить этот метод в объект-прототип Product. В результате все экземпляры Product, включая ваш объект iphone, наследуют этот метод и смогут его использовать. Это помогает избежать избыточности кода, позволяя определить метод один раз в прототипе, а не для каждого отдельного экземпляра Product..
Product.prototype.display = function(){
console.log("Details of the product are", this);
}
//Output in Console
ƒ (){
console.log("Details of the product are", this);
}
Теперь мы можем использовать iPhone.display(); и показать детали моего продукта
iPhone.display();
//Output
Details of the product are Product {name: 'iPhone14', price: 100000}
если сейчас мы попытаемся использовать метод toString(); в iPhone, это не сработает
iPhone.toString(); //Output //'[object Object]'
чтобы сделать его доступным, нам нужно вызвать из основного Object.prototype
Product.prototype.toString = function(){
console.log(this);
}
//Output
ƒ (){
console.log(this);
}
//Now we can access toString propertie
iPhone.toString();
//Output
Product {name: 'iPhone14', price: 100000}
и вот как работаетцепочка прототипов. Это помогает создать привязку между методами и объектами, упрощая написание эффективного и действенного кода.
И если мы расширим вывод iPhone.toString(); , мы увидим имя объекта [[Prototype]], покажет связь Object.prototype to Product.prototype
Мы также можем видеть, что родителем iPhone является объект Product.prototype. напишите приведенный ниже код в консоли, чтобы увидеть это
iPhone.__proto__ //this will return the Product.prototype Object in the console iPhone.__proto__.constructor //will point to the main Product function
Что такое Dunder proto __proto__ ?
__proto__(dunder proto) — это способ наследования свойств объекта в JavaScript. __proto__(dunder proto) свойство объекта. прототип — это свойство доступа, которое предоставляет [[Prototype]] объекта, через который к нему обращаются. Этот __proto__(dunder proto) устанавливает все свойства объекта, установленные в его [[Prototype]], для целевого объекта. (Относится к родителю)
Многоуровневое наследование
Теперь, когда у нас есть понимание того, как работает цепочка прототипов, мы можем изучить, как многоуровневое наследование происходит в функциональном программировании.
//1st function
function Product(){}
//Output
//undefined
//setting a prototype method named details
Product.prototype.details = function () {
console.log("iPhone14");
}
//Output
//ƒ () {
// console.log("iPhone14");
//}
//2nd function
function Mobile(){
}
undefined
//Setting inheritance between product and mobile
Object.setPrototypeOf(Mobile.prototype, Product.prototype);
Product {constructor: ƒ}constructor: ƒ Mobile()[[Prototype]]: Object
//Created a new Object name show with the help of Mobile
show = new Mobile()
Mobile {}
//Now we can call product.prototype method name detail to show the Mobile details
show.details();
//Output
//iPhone14
В этом фрагменте кода у нас есть две функции: Product и Mobile. Мы устанавливаем метод прототипа с именем details в функцию Product. Затем мы устанавливаем наследование между Product.prototype и Mobile.prototype с помощью Object.setPrototypeOf().
Затем мы создаем новый объект с именем show, используя функцию-конструктор Mobile. Поскольку Mobile наследуется от Product, мы можем вызвать метод details() для show, чтобы отобразить сведения о мобильном телефоне, который выводит «iPhone14».
В целом это демонстрирует, как наследование на основе прототипов работает в JavaScript и как мы можем использовать его для создания более эффективного кода путем совместного использования методов между объектами.
Вот блок-схема кода: -
В заключение, понимание объектов и прототипов в JavaScript имеет решающее значение для написания эффективного и действенного кода. Используя принципы наследования на основе прототипов и цепочки прототипов, мы можем создавать сложные и динамичные приложения. Я надеюсь, что вы нашли эту статью информативной и полезной. Если да, пожалуйста, поставьте лайк и поделитесь с другими.🙏
