[英]Difference between mobx's `action.bound` and arrow functions on class functions?
Using arrow functions on a class with babel transpiles it so the definition is bound in the constructor.在带有 babel 的 class 上使用箭头函数将其转译,因此定义绑定在构造函数中。 And so it is not in the prototype and it is not available via
super
when inheriting.因此它不在原型中,并且在继承时不能通过
super
获得。 It is also not as efficient when scaling by creating many instances.通过创建许多实例进行扩展时,它的效率也不高。
There are more blog posts on this topic, but I just wanted to know the difference in how mobx.action.bound is handled compared to arrow functions when using babel.关于这个主题的博客文章比较多,但我只是想知道在使用 babel 时,与箭头函数相比,mobx.action.bound 的处理方式有何不同。
Comparing the two:比较两者:
class Example {
test = () => {
console.log(this.message)
}
}
class Example {
@action.bound
test() {
console.log(this.message)
}
}
There are 2 variables @action
and @action.bound
have an effect on: @action
和@action.bound
有2个变量对@action
@action.bound
产生影响:
this
is bound in the resulting function. this
在产生的功能绑定。 To summarize, these are the rules: 总而言之,这些是规则:
@action
preserves the original function's binding and prototype-inclusion. @action
保留原始函数的绑定和原型包含。 If the original function is not bound, the result will not be, and vise versa. @action.bound
will always result in a function which is bound, and which is in the prototype. @action.bound
将始终生成一个绑定的函数,该函数位于原型中。 You can easily test this like so: 您可以像这样轻松测试:
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
Now let's try adding @action
: 现在让我们尝试添加
@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
Now let's try adding @action.bound
: 现在让我们尝试添加
@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
As you can see, @action
maintains the function's bindings (or lack of binding). 如您所见,
@action
维护函数的绑定(或缺少绑定)。 Meanwhile, @action.bound
will always return a bound function, thus turning an unbound function into a bound one, and an already bound function will remain bounded. 同时,
@action.bound
将始终返回绑定函数,从而将未绑定函数转换为绑定函数,并且已绑定函数将保持有界。
As for your concern about inheritance, here is the Store
definition: 至于您对继承的关注,这里是
Store
定义:
class Store {
unbound() {}
arrow = () => {}
@action unboundAction() {}
@action.bound unboundActionBound() {}
@action arrowAction = () => {}
@action.bound arrowActionBound = () => {}
}
And this is what the storeInstance looks like: 这就是storeInstance的样子:
As you pointed out, arrow = () => {}
is not part of the prototype. 正如您所指出的,
arrow = () => {}
不是原型的一部分。 And to answer your question, @action arrow = () => {}
will not result in a function which is in the prototype. 要回答你的问题,
@action arrow = () => {}
将不会产生原型中的函数。 It looks like @action
preserves the previous behavior. 看起来
@action
保留了以前的行为。 However, @action.bound
will always result in a function which is in the prototype. 但是,
@action.bound
将始终生成原型中的函数。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.