ES6 解构为“this”

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 已经建议了一种在 cmets 中使用 Object.assign 的方法