JavaScript – это не ориентированный на классовый объектно-ориентированный язык. Но у него все еще есть способы использования объектно-ориентированного программирования (OOP).
В этом руководстве я объясню OOP и покажу вам, как его использовать.
По словам Википедия , программирование на основе классом
Стиль объектно-ориентированного программирования (OOP), в котором наследование происходит через определение классов объектов, а не наследство, происходящее через один
Самая популярная модель OOP является классовой.
Но, как я уже упоминал, JavaScript не на основе классовых языков – это прототипный язык.
Согласно Mozilla документации:
На основе прототипа языка имеет представление о прототипном объекте, объект, используемый в качестве шаблона, из которого для получения начальных свойств для нового объекта.
Посмотрите на этот код:
let names = {
fname: "Dillion",
lname: "Megida"
}
console.log(names.fname);
console.log(names.hasOwnProperty("mname"));
// Expected Output
// Dillion
// false
Переменная объекта имена имеет только два свойства – fname и недвижимость . Нет методов вообще.
Так где же HasownProperty родом из?
Ну, это происходит от Объект прототип.
Попробуйте войти в систему содержимого переменной в консоль:
console.log(names);
Когда вы расширяете результаты в консоли, вы получите это:
Обратите внимание на последнюю недвижимость – __Proto__ ? Попробуйте расширить его:
Вы увидите набор недвижимости под Объект конструктор. Все эти свойства исходят от глобального Объект прототип. Если вы посмотрите внимательно, вы также заметите наши скрытые HasownProperty. .
Другими словами, все объекты имеют доступ к Объект прототип. Они не обладают этими свойствами, но предоставляются доступ к свойствам в прототипе.
__Proto__ недвижимость
Это указывает на объект, который используется в качестве прототипа.
Это свойство на каждом объекте, который дает ему доступ к Прототип объекта имущество.
Каждый объект имеет это свойство по умолчанию, что относится к Объект protoype За исключением случаев, когда настроен иначе (то есть, когда объект __proto__ указан на другой прототип).
Изменение свойства __proto__
Это свойство может быть изменено, явно заявив, что он должен относиться к другому прототипу. Следующие методы используются для достижения этого:
Object.Create. ()
function DogObject(name, age) {
let dog = Object.create(constructorObject);
dog.name = name;
dog.age = age;
return dog;
}
let constructorObject = {
speak: function(){
return "I am a dog"
}
}
let bingo = DogObject("Bingo", 54);
console.log(bingo);
В консоли это то, что у вас было:
Обратите внимание на __Proto__ Собственность и говорить Метод?
Object.Create. Использует аргумент, переданный ему, чтобы стать прототипом.
Новое ключевое слово
function DogObject(name, age) {
this.name = name;
this.age = age;
}
DogObject.prototype.speak = function() {
return "I am a dog";
}
let john = new DogObject("John", 45);
Джон ‘s __Proto__ Имущество направлено на Догобъект прототип. Но помните, Догобъект Prototype является объектом ( ключ и пару ценности ), следовательно, у него также есть __Proto__ Собственность, которая относится к глобальному Объект Protoype.
Эта техника называется ПРОТОТИП Цепочка Отказ
Обратите внимание, что: Новый Ключевой подход делает то же самое, что и Object.Create () Но только это проще, так как оно делает некоторые вещи автоматически для вас.
Так что…
Каждый объект в JavaScript имеет доступ к Объект прототип по умолчанию. Если настроен для использования другого прототипа, скажите Prototype 2 Тогда Прототип2 также будет иметь доступ к прототипу объекта по умолчанию и так далее.
Объект + комбинация функций
Вы, вероятно, путают тот факт, что Догобъект Это функция ( Функция dogobject () {} ), и у нее есть свойства, доступ к которым доступа к нотация . Это называется Функция объекта комбинация Отказ
Когда функции объявлены, по умолчанию им дают множество свойств, прилагаемых к нему. Помните, что функции также являются объектами в типах данных JavaScript.
Теперь, Класс
JavaScript представил класс Ключевое слово в Ecmascript 2015. Это делает JavaScript, похоже на язык OOP. Но это просто синтаксический сахар по существующему методике прототипирования. Он продолжает свой прототип на заднем плане, но делает внешний корпус как ООП. Теперь мы посмотрим на то, что это возможно.
В следующем примере является общее использование A класс в JavaScript:
class Animals {
constructor(name, specie) {
this.name = name;
this.specie = specie;
}
sing() {
return `${this.name} can sing`;
}
dance() {
return `${this.name} can dance`;
}
}
let bingo = new Animals("Bingo", "Hairy");
console.log(bingo);
Это результат в консоли:
__Proto__ Ссылки на Животные Прототип (который в свою очередь ссылается на объект прототип).
Из этого мы можем видеть, что конструктор определяет основные функции, в то время как все за пределами конструктора ( Sing () и танцевать () ) являются ли бонусные функции ( прототипы ).
На заднем плане, используя Новый Подход ключевых слов, приведенное выше переводит:
function Animals(name, specie) {
this.name = name;
this.specie = specie;
}
Animals.prototype.sing = function(){
return `${this.name} can sing`;
}
Animals.prototype.dance = function() {
return `${this.name} can dance`;
}
let Bingo = new Animals("Bingo", "Hairy");
Подклассы
Это функция в OOP, где класс наследует функции из родительского класса, но обладает дополнительными функциями, которые родитель не так.
Идея вот, например, скажем, вы хотите создать Кошки класс. Вместо того, чтобы создать класс с нуля – заявив имя , возраст и Вид Свойство AFRESH, вы наследуете эти свойства от родителя Животные класс.
Это Кошки Класс может иметь дополнительные свойства, такие как Цвет усов Отказ
Давайте посмотрим, как сделаны подклассы с класс .
Здесь нам нужен родитель, который наследует подкласс. Осмотрите следующий код:
class Animals {
constructor(name, age) {
this.name = name;
this.age = age;
}
sing() {
return `${this.name} can sing`;
}
dance() {
return `${this.name} can dance`;
}
}
class Cats extends Animals {
constructor(name, age, whiskerColor) {
super(name, age);
this.whiskerColor = whiskerColor;
}
whiskers() {
return `I have ${this.whiskerColor} whiskers`;
}
}
let clara = new Cats("Clara", 33, "indigo");
С вышеизложенным мы получаем следующие выходы:
console.log(clara.sing()); console.log(clara.whiskers()); // Expected Output // "Clara can sing" // "I have indigo whiskers"
Когда вы регистрируете содержимое Clara в консоли, у нас есть:
Вы заметите, что Клара имеет __Proto__ Свойство, которое ссылается на конструктор Кошки и получает доступ к Усы () метод. Это __Proto__ Имущество также имеет __Proto__ Свойство, которое ссылается на конструктор Животные Тем самым получение доступа к петь () и танцевать () Отказ имя и возраст Недвижимость, которые существуют на каждом объекте, созданном из этого.
Используя Object.Create Подход метода, приведенное выше переводит:
function Animals(name, age) {
let newAnimal = Object.create(animalConstructor);
newAnimal.name = name;
newAnimal.age = age;
return newAnimal;
}
let animalConstructor = {
sing: function() {
return `${this.name} can sing`;
},
dance: function() {
return `${this.name} can dance`;
}
}
function Cats(name, age, whiskerColor) {
let newCat = Animals(name, age);
Object.setPrototypeOf(newCat, catConstructor);
newCat.whiskerColor = whiskerColor;
return newCat;
}
let catConstructor = {
whiskers() {
return `I have ${this.whiskerColor} whiskers`;
}
}
Object.setPrototypeOf(catConstructor, animalConstructor);
const clara = Cats("Clara", 33, "purple");
clara.sing();
clara.whiskers();
// Expected Output
// "Clara can sing"
// "I have purple whiskers"
Object.SetPrototyeepef это метод, который принимает в два аргумента – объект (первый аргумент) и желаемый прототип (второй аргумент).
Из вышесказанного, Животные Функция возвращает объект с AnimalConstructor как прототип. Кошки Функция возвращает объект с Catconstructor Как это прототип. Catconstructor С другой стороны, дается прототип AnimalConstructor Отказ
Поэтому обычные животные имеют доступ только к AnimalConstructor Но у кошек есть доступ к Catconstructor и AnimalConstructor Отказ
Упаковка
JavaScript использует свой прототип природы, чтобы приветствовать разработчиков ООП к своей экосистеме. Он также обеспечивает легкие способы создания прототипов и организовывать связанные данные.
Истинные языки ООП не выполняют прототипирование на заднем плане – просто обратите внимание на это.
Большое спасибо Будет оговорка Курс по адресу Frontend Masters – JavaScript: Жесткие части объекта ориентированы JavaScript Отказ Я узнал все, что вы видите в этой статье (плюс немного дополнительных исследований) со своего курса. Вам стоит это увидеть.
Вы можете ударить меня в Twitter в Iamdillion по любым вопросам или вкладам.
Спасибо за прочтение: )
Полезные ресурсы
- Объектно-ориентированный JavaScript для начинающих
- Введение в объективное ориентированное программирование в JavaScript
Оригинал: “https://www.freecodecamp.org/news/how-javascript-implements-oop/”