Понять наследство объекта JavaScript

Давайте сначала изучим вопрос подробно. Что такое наследование объекта JavaScript?

Например, у нас есть конструктор объекта «животного».

 function Animal () {this.Type = 'Animal'; }

Существует также конструктор для объекта «кошки».

 Функция Cat (имя, цвет) {this.name = name; this.color = color; }

Мы знаем, что кошки также принадлежат животным. Если этот объект CAT хочет унаследовать свойства объекта животного, что мы должны делать?

Связывание конструктора

Использование привязки конструктора является самым простым способом, просто используйте вызов или примените, чтобы привязать родительский объект с собственным объектом.

 Функция Cat (имя, цвет) {Animal.Apply (это, аргументы); this.name = name; this.color = color; } var cat1 = new Cat ("хаха", 'red'); console.log (cat1.type); // животные

Однако этот метод является относительно редким.

Копия наследования

Если все свойства и методы родительского объекта скопированы в детском объекте, также может быть достигнуто наследование.

 Функция Extend (ребенок, родитель) {var p = parent.prototype; var c = child.prototype; for (var i in p) {c [i] = p [i]; } c.Uber = p; // функция моста}

Как использовать:

 расширить (кошка, животное); var cat1 = new Cat ("хаха", "красный"); предупреждение (cat1.type); // животное

Прототип наследование (прототип)

По сравнению с прямым связыванием выше, метод наследования прототипа более распространен. Я сам кратко суммировал прототип.

Каждая функция имеет атрибут прототипа, который является ссылкой на объект. При создании нового экземпляра с использованием нового ключевого слова этот объект экземпляра будет наследовать атрибуты и методы от объекта прототипа.

То есть, если атрибут прототипа конструктора «CAT» указывает на экземпляр «животного», то когда создается экземпляр объекта «Cat», унаследованы свойства и методы объекта «животного».

Пример наследства

 Cat.Prototype = New Animal (); cat.prototype.constructor = cat; var cat1 = new Cat ("хаха", "красный"); console.log (cat1.constructor == cat); // true console.log (cat1.type); // животное

1. В первой строке кода мы указываем объект прототипа функции CAT на экземпляр объекта животного (который содержит атрибут типа животного).

2. Что означает вторая строка кода?

1) Во -первых, если мы не добавим эту строку кода, запустите

Cat.Prototype = New Animal ();

console.log (cat.prototype.constructor == Animal); //истинный

Другими словами, на самом деле, каждый объект прототипа имеет атрибут конструктора, указывающий на его функцию конструктора.

2) Давайте посмотрим на следующий код

 Cat.Prototype = New Animal (); var cat1 = new Cat ("хаха", 'красный'); console.log (cat1.constructor == Animal); //истинный

Из вышесказанного мы видим, что конструктор экземпляра Cat1 - это животное, поэтому это, очевидно, неправильно. Анкет Анкет Cat1 четко генерируется New Cat (), поэтому мы должны исправить его вручную. Значение конструктора объекта прототипа Cat. изменяется на Cat.

3) Так что это также момент, на который мы должны обратить внимание. Если мы заменим объект прототипа, мы должны вручную исправить атрибут конструктора объекта прототипа.

O.Prototype = {};

O.Prototype.constructor = O;

Непосредственно наследует прототип

Поскольку в объектах животных, неизменные свойства могут быть написаны непосредственно в животном. Прототип. Затем позвольте Cat.Prototype указывать на Animal.prototype, который осознает наследование.

Теперь давайте сначала переписаем объект животного:

 function Animal () {} Animal.Prototype.Type = 'Animal';

Затем реализуйте наследство:

 Cat.Prototype = Animal.Prototype; cat.prototype.constructor = cat; var cat1 = new Cat ("хаха", "красный"); console.log (cat1.type); // животные

По сравнению с предыдущим методом этот метод, по -видимому, более эффективен (экземпляры животных не созданы), экономия пространства. Но правильно ли это? Ответ неверен, давайте продолжим чтение.

Cat.Prototype = Animal.Prototype;

Эта строка кода позволяет Cat.Protototype и Animal.Prototype указывать на один и тот же объект, поэтому, если определенное свойство Cat.Prototype изменяется, это будет отражено на животном. Прототип, что, очевидно, не то, что мы хотим видеть.

Например, мы запускаем:

Console.log (Animal.Prototype.constructor == Animal) // Неверно

Это оказалось ложным, почему? cat.prototype.constructor = cat; Эта линия также изменит свойство конструктора животного.

Используйте пустые объекты в качестве посредника

 var f = function () {}; F.Prototype = Animal.Prototype; cat.prototype = new f (); cat.prototype.constructor = cat;

Объединяя два вышеупомянутых метода, поскольку F является пустым объектом, он почти не занимает память. Модификация объекта прототипа CAT в это время не повлияет на объект прототипа животных.

console.log (Animal.Prototype.constructor == Animal); // истинный

Затем мы инкапсулируем приведенный выше метод:

 Функция Extend (ребенок, родитель) {var f = function () {}; F.prototype = parent.prototype; Child.prototype = new f (); Child.prototype.constructor = ребенок; Child.Uber = Parent.Prototype; }

При его использовании метод заключается в следующем:

 расширить (кошка, животное); var cat1 = new Cat ("хаха", "красный"); console.log (cat1.type); // животное

Child.Uber = Parent.Prototype; Эта строка кода является мостовой функцией, позволяющей атрибуту Uber детского объекта непосредственно указывать на атрибут прототипа родительского объекта, который эквивалентен открытию канала под названием Uber на собственном объекте, так что экземпляр детского объекта может использовать все свойства и методы родительского объекта.

Вышесказанное - мое понимание наследственных объектов JavaScript. Я надеюсь, что это может помочь вам более или менее. Спасибо за чтение.