javascript - 在内存层面，JS中创建对象和创建类实例有区别吗？

Question

假设我想使用随机数据库创建一个 Person 数组。

我可以做类似的事情

import {generateRandom} from 'someLib'

let people = []

function getPerson() ({
  name: generateRandom.string()
  age: generateRandom.number()
})

for (let i = 0; i < 10; i++) {
  people.push(getPerson())
}

但我也可以做类似的事情

import {generateRandom} from 'someLib'

class Person {
  constructor() {
    this.name = generateRandom.string(),
    this.age = generateRandom.number()
  }
}

let people = []

for (let i = 0; i < 10; i++) { 
  people.push(new Person()) 
}

在内存层面上，结果有什么不同吗？

---

(这只是一个理论问题，我不是要解决什么特别的问题)

我发现了与此相关的问题 Difference between creating a class in javascript to create an object and creating an class and object in Java

这表明 JS 中没有类。

这只是语法糖吗？做完全相同事情的 2 种方法？

Answer 1

如果你想自己检查内存，你可以把这段代码放在控制台中:

class Test{};

const test = new Test();

class Class {};
test.Class = Class;
test.classObj = new Class();

function func() {return {};};
test.func = func;
test.funcObj = func();

使用 google chrome 开发工具拍摄堆快照，按构造函数排序并找到 Test 类。

然后您可以检查这些函数和对象的内存。这是我得到的屏幕截图:

可以看到类构造函数实例化的对象比函数实例化的对象稍大。展开原型(prototype)，您可以看到它们都使用 Object 构造函数，但 classObj 在其原型(prototype)链中具有额外的 Class 构造函数。

您还可以看到，类构造函数似乎保留了比常规函数更多的内存，保留的大小意味着如果函数不再使用，将通过垃圾回收清理的内存。

似乎类构造函数多了 172 个字节，空对象每个对象多了 24 个字节。

---

根据 VLAZ 的评论，这是添加了 10 个方法和 10 个实例的结果。

class Test{};

const test = new Test();

class Class {
  method0(){};
  method1(){};
  method2(){};
  method3(){};
  method4(){};
  method5(){};
  method6(){};
  method7(){};
  method8(){};
  method9(){};
};
test.Class = Class;
for (let i=0; i < 10; i++){
  test["classObj" + i] = new Class();
}


function func0(){};
function func1(){};
function func2(){};
function func3(){};
function func4(){};
function func5(){};
function func6(){};
function func7(){};
function func8(){};
function func9(){};
function constructorFunc() {
  return {
    method0: func0,
    method1: func1,
    method2: func2,
    method3: func3,
    method4: func4,
    method5: func5,
    method6: func6,
    method7: func7,
    method8: func8,
    method9: func9,
  };
};
test.constructorFunc = constructorFunc;
for (let i=0; i < 10; i++){
  test["funcObj" + i] = constructorFunc();
}

类对象的浅尺寸现在小得多。这似乎是因为它们可以只存储对类原型(prototype)的引用，而不是直接引用它们的所有方法。

乍一看，Class保留的大小似乎比constructorFunc小，但是展开Class可以看到一个名为prototype 这是一个保留额外 1.38 KB 的对象。将其添加到类本身的 520 B 中会将其推到 constructorFunc 的保留内存之上。但是通过创建类的实例而不是对象节省的内存很快就会超过它。

看来上课是个不错的选择。