custom-event-polyfill
custom-event-polyfill copied to clipboard
CustomEvent could not be extended
When I extends CustomEvent using babel the prototype is wrongly set to CustomEventPrototype
instead of my class so I can't call methods of my class.
Scenario:
- Extends CustomEvent using ES6 syntax:
export default class MyEvent extends CustomEvent {
test() {return 'ok';}
}
- Construct event and call
test()
methods:
const evt = new MyEvent();
console.log(Object.getPrototypeOf(evt));
console.log(evt.test());
- Compile using Babel
Results:
[object CustomEventPrototype]
Object doesn't support property or method 'test'
Expected:
no error
[object MyEvent]
ok
Fix
I find a way to fix that by adding the following code at the end of CustomEvent contructor:
Object.setPrototypeOf(evt, Object.getPrototypeOf(this));
Thanks for reporting this. Can you raise a PR for the same after checking what is the behaviour in browsers which do support CustomEvent? I'm on a mobile so can't check it myself right now.
I have checked the behaviour of actual browsers without polyfill :
- Gecko (Firefox): support CustomEvent constructor and extends
- Bink (Chrome): support CustomEvent constructor and extends
- Webkit (Safari): support CustomEvent constructor but doesn't support correctly extends
- Edge: support CustomEvent constructor but doesn't support correctly extends
- IE: don't support CustomEvent constructor
Thanks. I'll take a look at your commit in some time...