Наследование DOM интерфейсов?

Question

[Finom]

Здравствуйте.
Сегодня сделал для себя открытие, что не получается унаследовать ДОМ интерфейс, EventTarget в частности.

X = function() {};
X.prototype = Object.create( EventTarget.prototype );
var x = new X;
x.addEventListener( 'y', function() {} );

Выдает ошибку:
TypeError: Illegal invocation

Что я делаю не так? Всегдя был убежден, что прототипы интерфейсов можно наследовать, оказалось, что не всё так просто...

Answer 1

[Сергей Протько]

What's wrong with extending the DOM

Answer 2

[Константин Китманов]

Вкратце: есть родные для JS объекты -- те, которые описаны в спецификации EcmaScript-262, и есть объекты, предоставляемые средой выполнения -- host objects. Вторые могут не подчиняться правилам языка (например, в IE8 у функции console.log отсутствуют методы call и apply).

Answer 3

[4Koshik]

Попробуй так:

//Запускаем
function testing() {
//создаём объекты наследующие прототип EventTarget
	let myObj1 = new MyObj("obj1");
	let myObj2 = new MyObj("obj2");
	
	//Запускаем метод walk
	myObj1.walk(7);//гулять 7 секунд
	myObj2.walk(2);//гулять 2 секунды
	
	//не забываем подписаться на события, генерируемы нашим объектом
	myObj1.addEventListener("WalkBegin", onWalkBegin);//начало прогулки
	myObj2.addEventListener("WalkBegin", onWalkBegin);
	
	myObj1.addEventListener("WalkEnd", onWalkEnd);//конец прогулки
	myObj2.addEventListener("WalkEnd", onWalkEnd);
}

//класс MyObj наследующий EventTarget
//По сути это новый объект EventTarget с расширенными свойствами и методами
function MyObj(name){
	var eventTarget = new EventTarget();
	eventTarget.name = name;//добавляем свойство имя
	eventTarget.walk = (timeToWalkInSec) => { //добавляем метод гулять
		eventTarget.dispatchEvent(new Event("WalkBegin")); //кидаем событие "начал гулять"
		setTimeout( () => {
			eventTarget.dispatchEvent(new Event("WalkEnd"));//кидаем событие "закончил гулять"
		}, timeToWalkInSec * 1000);
	}
	return eventTarget; //!!! Ключевое место. Вместо того чтобы возвращать this мы возвращаем расширенный объект
}

function onWalkBegin(event){ //обработчик события
	console.log(event.target.name + " begin walk");
}

function onWalkEnd(event){//обработчик события
	console.log(event.target.name + " end walk");
}