ES6 中的隐形“坑”

[lmk123]

使用 ES6（借助了 Babel 的力量）写代码已经很长时间了，中间碰到了几个坑，记录一下。

Promise 中的未捕获错误

下面的代码会报错，因为里面的 x 未定义：

new Promise( resolve => resolve( x + 1 ) ).then( ()=> console.log( '一切正常' ) );

不过按照标准，浏览器不会给出任何错误提示，因为错误会被传递到 catch() 回调里。上面的代码没有注册这个回调，所以结果就是浏览器没有任何反应：既不会打印 log，也不会报错。

之前我使用的是 jakearchibald/es6-promise，它严格遵循标准，我花了很长时间都不知道为什么 Promise 没执行到 then 里面去，换成了 Babel 的 browser-polyfill.js 才知道 Promise 里面产生了未捕获的错误。Babel 同时也会提示产生了未处理的 rejection，好贴心 :)

箭头函数里的 this

const t = {
  name:'mk',
  yes() { console.log(this.name); },
  no:() =>  console.log( this.name )
};

t.yes(); // 打印出 mk
t.no(); // 报错

箭头函数里的 this 指向它外围的那个 this，上面的代码中，yes() 方法里的 this 指向 t，但 no() 方法里的 this 指向全局对象，而由于 babel 默认使用严格模式，this 会被替换为 undefined，所以会报错。

除了 this 以外，箭头函数不能被当做构造函数、不能使用 arguments 对象、不能用 yield ，这三点也是要注意的。

[SiZapPaaiGwat]

第一个，你应该没有使用WebStorm或者JSHint; 第二个没看懂，如果你在babel里面设置严格模式那么this是undefined会报错

[lmk123]

@simongfxu

1. 大部分错误都不是由语法错误引起的，这里只是做一个示例
2. 我刚才重新在 babel.io 里试了一下（结果），babel 会把 no() 方法中的 this 替换成 undefined。奇怪的是昨天测试的时候它没有替换 this。已在文中更正 :)