用于设置实例属性的 ES6 类构造函数快捷方式

Question

我似乎记得看到一个快捷方式，如果属性和构造函数参数被命名为相同的东西，则不必在构造函数中执行 this.foo 赋值 - 但我似乎无法在谷歌搜索中找到它的参考.

例如：

class Polygon {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
}

你可以做类似的事情吗

class Polygon {
  constructor(height=height, width=width) { 
     // wasn't there a way to declare these arguments so it auto sets the instance variables?
  }
}

Answer 1

您可以将其更改为：

class Polygon {
  constructor(height, width) {
    Object.assign(this, { height, width })
  }
}

这意味着您传递单个对象而不是多个参数

Answer 2

如果您喜欢这类事情，您可能可以定义一个超类来执行此操作：

class BaseClass {
  constructor(names = [], values = []) {
    names.forEach((n, idx) => this[n] = values[idx]);
  }
}

class Polygon extends BaseClass {
  constructor(height, width) {
    super(['height', 'width'], arguments);
  }
}

当然，是否应该这样做还有很大争议，但这是可能的。请注意，由于可能存在缩小问题，我们不能依赖构造函数中参数名称的名称。

Answer 3

您可能还记得 ES6 对象文字速记语法：

function makePolygon(height,width){
    return {height,width}; // in ES5 was return {height:height,width:width};
}

let poly = makePolygon(10,10);
console.log(poly); // {height: 10, width: 10}

解决问题的另一种方法是使用带有配置对象和默认参数的 ES6 类：

class Polygon{
    constructor(config={}){
        this.name = "Triangle";
        this.height = 10;
        this.width = 10;
        this.numSides = 3;
        Object.assign(this,config);
    }
}

let triangle = new Polygon();
let square = new Polygon({name: "Square", numSides: 4});
let pentagon = new Polygon({name: "Pentagon", numSides:5,height: 20,width: 20});

console.log(triangle,square,pentagon);
// Polygon {name: "Triangle", height: 10, width: 10, numSides: 3}
// Polygon {name: "Square", height: 10, width: 10, numSides: 4}
// Polygon {name: "Pentagon", height: 20, width: 20, numSides: 5}

更新 9/3/2023

• Polygon 类现在具有对象解构语法：

class Polygon{
    constructor({name="Triangle", height=10, width=0, numSides=3} = {}){
        return {...this, name, height, width, numSides};
    }
}

Answer 4

扩展原型以获得更简洁的构造函数

Object.prototype.initialize = function (obj) { Object.assign(this,obj) }

class Polygon {
  constructor(height,width) {
    this.initialize({height,width})
  }
}

Answer 5

Object.assign，就像在 JavaScript 中一样，但是对于 TypeScript，您应该指定构造函数

values

是一个

object

。

constructor(values: object) {
    Object.assign(this, values);
}

这是一个简短的 Codepen 示例。

Answer 6

使用破坏怎么样：

class Polygon {
  constructor({height, width}) { Object.assign(this, arguments[0]); }
}

不过，创建此对象将需要创建一个“配置”对象，根据您的观点，该对象可能会增加代码混乱或使其更具可读性：

console.log(new Polygon({height: 100, width: 200}));

将打印：

Polygon {height: 100, width: 200}

此方法的一个好处是，如果您从服务器以 json 形式接收多边形对象，现在可以轻松地将它们恢复到相应的类：

let dataFromServer = "{\"polygons\":[{\"height\":10,\"width\":20},{\"height\":30,\"width\":40}]}";

console.log(JSON.parse(dataFromServer, (key, value) => {
  if (key === "polygons") return value.map(it => new Polygon(it));
  return value;
}));