在使用babel的类上使用箭头函数进行转换,以便在构造函数中绑定定义。因此它不在原型中,并且在继承时不能通过super
获得。通过创建许多实例进行缩放时,它也不那么有效。
关于这个主题有更多的博客文章,但我只是想知道使用babel时与使用babel的箭头函数相比如何处理mobx.action.bound的区别。
比较两者:
class Example {
test = () => {
console.log(this.message)
}
}
class Example {
@action.bound
test() {
console.log(this.message)
}
}
答案 0 :(得分:5)
有两个变量@action
和@action.bound
会影响:
this
绑定到结果函数中。总结一下,这些是规则:
@action
保留原始函数的绑定和原型包含。如果原始函数未绑定,则结果将不会,反之亦然。而且,如果原始功能不在原型中,则结果将不会,反之亦然。@action.bound
始终会产生绑定的函数,并且该函数位于原型中。您可以像这样轻松地测试它:
class Store {
unbound() {
console.log('unbound', this)
}
arrow = () => {
console.log('arrow', this)
}
}
const storeInstance = new Store()
const unbound = storeInstance.unbound
const arrow = storeInstance.arrow
unbound()
arrow()
// console displays:
// unbound undefined
// arrow Store
现在让我们尝试添加@action
:
class Store {
@action
unbound() {
console.log('unbound', this)
}
@action
arrow = () => {
console.log('arrow', this)
}
}
const storeInstance = new Store()
const unbound = storeInstance.unbound
const arrow = storeInstance.arrow
unbound()
arrow()
// console still displays:
// unbound undefined
// arrow Store
现在让我们尝试添加@action.bound
:
class Store {
@action.bound
unbound() {
console.log('unbound', this)
}
@action.bound
arrow = () => {
console.log('arrow', this)
}
}
const storeInstance = new Store()
const unbound = storeInstance.unbound
const arrow = storeInstance.arrow
unbound()
arrow()
// console now displays:
// unbound Store
// arrow Store
如您所见,@action
维护函数的绑定(或缺少绑定)。同时,@action.bound
将始终返回绑定的函数,从而将未绑定的函数转换为绑定的函数,而已经绑定的函数将保持绑定状态。
关于您对继承的关注,这里是Store
的定义:
class Store {
unbound() {}
arrow = () => {}
@action unboundAction() {}
@action.bound unboundActionBound() {}
@action arrowAction = () => {}
@action.bound arrowActionBound = () => {}
}
正如您所指出的,arrow = () => {}
不是原型的一部分。为了回答您的问题,@action arrow = () => {}
将不会产生原型中的函数。看来@action
保留了以前的行为。但是,@action.bound
总是会产生原型中的函数。