Лично я из Java Background, мое отношение к наследованию было совершенно другим, чем к наследованию JavaScript. Для новичка концепция наследования в JavaScript довольно сложна для понимания. Цель этой статьи — шаг за шагом раскрыть все аспекты наследования в JavaScript, так что оставайтесь со мной.
Что такое наследование?
Наследование в объектно-ориентированном языке программирования — это механизм, в котором базовый класс приобретает все свойства и поведение родительского класса. Это важная часть ООП (система объектно-ориентированного программирования). Идея наследования в Java заключается в том, что вы можете создавать новые классы, основанные на существующих классах. Когда вы наследуете от существующего класса, вы можете повторно использовать методы и поля родительского класса.
Проще говоря, класс, который наследует другой класс, может использовать функции и переменные унаследованного класса. Вместо многократного создания одних и тех же методов мы можем использовать концепцию наследования.
Что такое наследование в JavaScript?
Прежде чем узнать, что такое наследование в JavaScript, прочтите мою статью о том, что такое объект в JavaScript. Он дает основу для того, что такое __proto__, как он связан с различными программными ограничениями, такими как массив, объект и т. д. в JavaScript.
Итак, прочитав эту статью, вы, должно быть, поняли, как JavaScript добавляет объект __proto__ к различным ограничениям программирования.
Просто для демонстрации прикрепите то же изображение, что и в моей предыдущей статье.
Как вы заметили здесь, мы только что создали массив, и он имеет доступ ко всем методам массива, таким как map, join, concat и т. д. Все эти методы добавляются движком JavaScript в переменную Array.
Поэтому к каждому массиву в JavaScript будет прикреплен один и тот же набор методов и свойств. Теперь у вас должен загореться свет: каждый массив получает один и тот же метод, что означает, что все они наследуют свойства от Array.Prototype, все функции наследуют свойства от Function.Prototype. Это наследование в JavaScript.
Всякий раз, когда пользователь создает функцию, массив, объект и т. д., в JavaScript он получает доступ ко всем методам прототипа или наследует эти методы. В JavaScript это называется наследованием.
Позвольте мне проиллюстрировать быстрый пример, чтобы понять это лучше.
let userOneObject = {
name: "User 1",
city: "Singapore",
getTitle : function(){
console.log(this.name + " is from " + this.city )
}
}
userOneObject.getTitle() // Output will be "User 1 is from Singapore"
Как упоминалось выше, вывод приведенного выше фрагмента будет
Пользователь 1 из Сингапура
Теперь давайте создадим еще один объект, как показано ниже.
let userOneObject = {
name: "User 1",
city: "Singapore",
getTitle : function(){
console.log(this.name + " is from " + this.city )
}
}
let userTwoObject = {
name : "User2"
}
userTwoObject.getTitle()// we will get reference error as userTwoObject is not aware of getTitle method
Вывод приведенного выше кода будет: ошибка ссылки, userTwoObject не знает о методе getTitle
Теперь давайте сделаем кое-что интересное, чего вам никогда не следует делать в повседневном программировании,
let userOneObject = {
name: "User 1",
city: "Singapore",
getTitle : function(){
console.log(this.name + " is from " + this.city )
}
}
let userTwoObject = {
name : "User2"
}
userTwoObject.__proto__ = userOneObject;
userTwoObject.getTitle() // Output will be User2 is from Singapore
Можете ли вы угадать выход сейчас? это будет
User2 из Сингапура
Внимательно наблюдайте за ним. В выходных данных this.name имеет значение User2, но значение города — Сингапур. Это означает, что поскольку прототип userOneObject назначен userTwoObject, теперь userTwoObject имеет доступ ко всем методам userOneObject.
Иерархия была бы такой: сначала движок JavaScript ищет ссылку в объявленных методах объекта (например:getTitle внутри объекта), если он не находит ее там, то он ищет ее. в его объекте __proto__. Если он не находит даже там, он будет искать, есть ли у __proto__ какой-либо объект __proto__, если он есть, затем он ищет там, и этот процесс продолжается до тех пор, пока __proto__ не станет неопределенным.
Теперь это похоже на наследство?
Точно так же работает наследование в Java/C# или любом другом объектно-ориентированном языке программирования. Таким образом, хотя JavaScript использует прототип для целей наследования, окончательная реализация связана с другим языком программирования.
Можем ли мы реализовать объектно-ориентированное наследование так же, как Java в JavaScript?
Ответ - да. Хотя многие не используют ключевое слово class в JavaScript, вы должны знать, что после ES6 можно создавать классы в JavaScript, используя ключевое слово class. Ниже приведен пример фрагмента того же
class BaseClass {
displayBaseClassName(){
console.log("This is Base class")
}
}
class DerivedClass extends BaseClass {
displayDerivedClassName(){
console.log("This is Derived class")
}
}
let derivedClassObj = new DerivedClass();
derivedClassObj.displayBaseClassName(; //Output will be "This is Base class"
Здесь мы создали два класса BaseClass и DerivedClass. И для этой цели используется производный класс, наследуемый от ключевого слова BaseClass extend. Точно так же, как вы использовали бы наследование в Java, вы можете использовать его в JavaScript с минимальными изменениями в создании объекта и функций.
Не путайте приведенный выше код с наследованием прототипов. Если вас спросят, что такое наследование в JavaScript? тогда они будут ожидать ответа прототипного наследования, а не второго. Удачи !!
Похожие статьи
