在你不知道this指向哪儿的时候, 请慎用 Arrow Function!
发布于 8 年前 作者 Kaijun 7306 次浏览 来自 分享

自从用上了ES6之后, 但凡见到 function() {} 总要改成 () => {}, 觉得这样既优雅又美观. 直到今天debug了半天, 终于翻然悔悟, 在心里还不清楚this指向的时候, 请慎用 Arrow Function!

比如Mongoose定义Schema的statics/methods的时候:

XXXSchema.statics.list = () => {
  return this.find().exec()
}

乍一看这样并没有错误, 实际上此处的this并不会指向你认为的对象. 因为 Arrow Function是 Lexical scoping, this指向定义Arrow Function时外围, 而不是运行时的对象

可以看下这篇文章: Do ES6 Arrow Functions Really Solve “this” In JavaScript? 说的很详细

11 回复

前排学习

来自酷炫的 CNodeMD

一看就是没有用koa2的,O(∩_∩)O哈哈~

@i5ting 使用koa2后 具体有什么差别呢?

来自酷炫的 CNodeMD

@Kaijun 因为Koa2内部,需要给function bind上下文,所以显然Koa2的中间件是不能用Arrow Function的

其实看下babel转译后的代码就知道会有这个问题,无脑用肯定会出问题

最后知道真相的我眼泪掉下来

@CoderIvan 依稀看过koa的demo 貌似通过this.ctx获取上下文

来自酷炫的 CNodeMD

ECMAScript 6 入门对箭头函数的使用限制做说明了 箭头函数有几个使用注意点。 (1)函数体内的this对象,就是定义时所在的对象,而不是使用时所在的对象。 (2)不可以当作构造函数,也就是说,不可以使用new命令,否则会抛出一个错误。 (3)不可以使用arguments对象,该对象在函数体内不存在。如果要用,可以用Rest参数代替。 (4)不可以使用yield命令,因此箭头函数不能用作Generator函数。

@FoghostCn 赞 很详细!

来自酷炫的 CNodeMD

@alsotang 又是一个不刷 changelog 就升级的教材~ 当然这里的 changelog 指 function(){} & arrow function 的区别点啊~

this倒是没被坑过 arguments被坑过一次

回到顶部