咨询JavaScript语句`return new proto.constructor(...values);`的含义

我在Stack Overflow上找到了「从JSON表示返回指定类型对象」任务的解决方案，但搞不懂return new proto.constructor(...values);这句代码的意思。相关代码如下：

任务代码 #

/**
 * Returns the object of specified type from JSON representation
 *
 * @param {Object} proto
 * @param {string} json
 * @return {object}
 *
 * @example
 * var r = fromJSON(Rectangle.prototype, '{"width":10, "height":20}');
 */
function fromJSON(proto, json) {
    // ???
}


const obj = fromJSON(Rectangle.prototype, '{"width": 10, "height": 20}');

console.log(obj);

解决方案代码 #

function fromJSON(proto, json) {
    const obj = JSON.parse(json);
    const values = Object.values(obj);
    
    return new proto.constructor(...values);
}

function Rectangle(w, h) {
  this.width = w;
  this.height = h;
}

拆解开看这句代码的意思 #

• proto.constructor：
  JS里每个原型对象（比如例子里的Rectangle.prototype）都自带constructor属性，这个属性直接指向生成该原型的构造函数。所以这里传进来的proto是Rectangle.prototype的话，proto.constructor就是Rectangle函数本身。

• ...values：
  values是把JSON解析后的对象（比如{width:10, height:20}）用Object.values提取出的属性值数组[10,20]。...是扩展运算符，能把数组里的元素挨个拆出来，当成单独的参数传给构造函数。这里就相当于把10和20分别传给Rectangle的w和h参数。

• new关键字：
  用new调用构造函数，会生成一个该构造函数的实例对象。把前面两部分拼起来，new proto.constructor(...values)就等于new Rectangle(10,20)，最后得到一个width为10、height为20的Rectangle实例。

核心作用总结 #

这句代码的核心就是：通过传入的原型对象找到对应的构造函数，把JSON解析出的属性值拆成单独参数传给构造函数，最终创建并返回你需要的指定类型实例对象，完成从JSON到目标类型对象的转换。

内容的提问来源于stack exchange，提问作者Chumba