javascript – mobx的`action.bound`和类函数上的箭头函数之间的区别?

前端之家收集整理的这篇文章主要介绍了javascript – mobx的`action.bound`和类函数上的箭头函数之间的区别?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

在使用babel的类上使用箭头函数进行转换,以便在构造函数中绑定定义.因此它不在原型中,并且在继承时不能通过super获得.通过创建许多实例进行缩放时,它也不那么有效.

关于这个主题有更多的博客文章,但我只是想知道在使用babel时,与箭头函数相比,mobx.action.bound的处理方式有何不同.

比较两者:

class Example {
   test = () => {
      console.log(this.message)
   }
}

class Example {
   @action.bound
   test() {
      console.log(this.message)
   }
}
最佳答案
@action和@ action.bound有2个变量对以下内容产生影响:

>绑定:如何在结果函数中绑定它.
>原型:如果生成函数在原型中.

总而言之,这些是规则:

> @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 = () => {}
}

这就是storeInstance的样子:

enter image description here

正如您所指出的,arrow =()=> {}不是原型的一部分.要回答你的问题,@ action arrow =()=> {}不会产生原型中的函数.看起来@action保留了以前的行为.但是,@ action.bound将始终生成原型中的函数.

猜你在找的JavaScript相关文章