Question

我似乎记得看到一个快捷方式，你不必这样做。如果属性和构造函数参数被命名为相同的东西，构造函数中的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);
  }
}

当然，你是否应该这样做是值得商榷的，但这是可能的。请注意，我们不能依赖构造函数中arg名称的名称，因为可能会出现缩小问题。

Answer 3

为更多consice构造函数扩展原型

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

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

Answer 4

您可能还记得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}

Answer 5

如何使用销毁方式？

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

尽管，创建该对象将需要创建一个“ config”对象，根据您的视图，该对象要么使代码混乱，要么使其更具可读性：

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;
}));

Answer 6

Object.assign，就像在JavaScript中一样，但是使用TypeScript，您应该指定构造函数values是object。

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

这是一个简短的Codepen example。

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

6 个答案: