Как использовать прототипное наследование в старых версиях Internet Explorer?

Оффтоп javascript
1

Привет всем! У меня возник вопрос по поводу работы с прототипами в JavaScript, особенно в устаревших браузерах.

Допустим, у нас есть два объекта:

var person1 = { имя: 'Иван', фамилия: 'Петров' };
var person2 = { имя: 'Мария' };

В современных браузерах мы можем сделать так:

person2.__proto__ = person1;

И тогда person2 получит доступ к свойствам person1. Но как быть, если мы работаем с IE8 или другими старыми браузерами, где __proto__ не поддерживается?

Какой альтернативный способ можно использовать для достижения того же результата? Буду благодарен за любые идеи и примеры кода!

2

Для старых версий IE есть хак с использованием конструктора. Вот как это работает:

function inherit(child, parent) {
function F() {}
F.prototype = parent;
child.prototype = new F();
child.prototype.constructor = child;
}

function Person(имя) {
this.имя = имя;
}

inherit(Person, person1);

var person2 = new Person(‘Мария’);

Этот подход работает везде, даже в древнем IE. Главное - не забыть восстановить конструктор. В реальных проектах я обычно оборачиваю это в утилиту для удобства.

3

да, с древними версиями ie всегда морока. но есть еще один способ, который я часто использую - через функцию-конструктор:

function Person(имя) {
this.имя = имя;
}

Person.prototype = person1;

var person2 = new Person(‘Мария’);

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

4

В старых версиях IE можно использовать Object.create() для прототипного наследования. Вот пример:

var person2 = Object.create(person1);
person2.имя = ‘Мария’;

Если Object.create() не поддерживается, можно создать свою полифил-функцию:

function createObject(proto) {
function F() {}
F.prototype = proto;
return new F();
}

var person2 = createObject(person1);
person2.имя = ‘Мария’;

Это должно работать во всех браузерах. Надеюсь, помогло!