2016年4月3日 星期日

解決babel6 class extends 在 ie10 以下版本super無法呼叫 parent constructor

先直接看程式碼 ```js class A { constructor() { console.log('A'); } } class B extends A { constructor() { super(); } } new B(); ``` 這是一個很簡單物件繼承,預期console內輸出 "A" 實際做了測試之後發現在ie11, chrome, firefox都能正常輸出 但在ie9, ie10卻完全失效 後來查了原因後原來Object.getPrototypeOf在es5及es6的功能完全不同 才造成super失效 在github上已經有人提出兩種出解決方案 1.設定babel的plugins ```json { "presets": ["react", "es2015"], "plugins": [ ["transform-es2015-classes", { "loose": true }], "transform-proto-to-assign" ] } ``` 2.修改Object.getPrototypeOf 來自[https://github.com/seznam/IMA.js-babel6-polyfill](https://github.com/seznam/IMA.js-babel6-polyfill "polyfill") ```js (function() { var testObject = {}; if (!(Object.setPrototypeOf || testObject.__proto__)) { var nativeGetPrototypeOf = Object.getPrototypeOf; Object.getPrototypeOf = function(object) { if (object.__proto__) { return object.__proto__; } else { return nativeGetPrototypeOf.call(Object, object); } } } })(); ```