Question

尝试进行ES6破坏。

我在React类构造函数中使用以下代码：

let { class, ...rest } = props;

上面的代码有效。但是我需要this.class和this.rest中的变量。

我有此代码，它可以工作：

let { classes, ...rest } = props; 
this.classes = classes; 
this.rest = rest;

我正在寻找这样的东西：

{ this.classes, ...this.rest } = props;

Answer 1

您可以使用重命名属性，尽管不幸的是，这涉及到一些重复：

({ classes: this.classes, ...this.rest } = props);

classes是我们从props开始使用的属性的名称； this.classes是要分配给它的变量的名称。使用this.rest，我们显然不需要命名原始属性名称。

演示：

function Foo(props) {
    ({ classes: this.classes, ...this.rest } = props);
}

const props = {
  classes: 'some clases',
  a: 'A',
  b: 'B'
}

console.log(new Foo(props));

Answer 2

一种棘手的实现方式是使用与所需this绑定的函数

重命名是关键，这里发生的是它从props中选取值并将其分配给我们重命名的任何值

({ classes:this.classes,...this.rest } = props)

所以实际上与

相同

this.classes = props.classes;
this.rest = all the properties expect those which are already destrucutred

您可以在此处粘贴代码并查看简化版本Babel

const props = {
  classes: 'some clases',
  a: 'A',
  b: 'B'
}

let tempThis = {}
console.log(tempThis)

let getMeValuesOnThis = function(props) {
  ({ classes:this.classes,...this.rest } = props)
}.bind(tempThis)

getMeValuesOnThis(props)

console.log('---values after function execution---')
console.log(tempThis)

ray已经建议在评论中使用Object.assign的方法

ES6分解为“ this”

2 个答案: