默认导出类的新实例

Question

下面的 sn-ps 会在每次导入时产生新的实例吗？

// 1st implementation

class ConnectionManager {
...
}

export default new ConnectionManager();

// 2nd implementation

class ConnectionManager {
...
}

const connectionManager = new ConnectionManager();
export default connectionManager;

如果是，我怎样才能在每次导入时获得相同的实例？

Answer 1

ES6 模块遵循单实例模式。也就是说，在加载模块时创建实例。

Here 是一篇关于它的文章。

// File: yolo.js

class Yolo {}
export let yolo = new Yolo();

// File: laser.js

import { yolo } from "./yolo.js";
// yolo is a single instance of Yolo class


// File: cat.js

import { yolo } from "./yolo.js";
// same yolo as in laster.js

Answer 2

应该是一样的。

以下示例同时使用了这两种实现，将它们导入到 2 个不同的文件中，并将它们全部导入到单个 index 文件中。每次创建实例时，我们都会为该类生成一个随机的value，并记录它的创建。

// ConnectionManagerImpl1.ts
class ConnectionManagerImpl1 {
    public value;

    constructor() {
        this.value = Math.random().toString(36).substring(7);
        console.log(`New ConnectionManagerImpl1 instance created: ${this.value}`)
    }
}

export default new ConnectionManagerImpl1();

---

// ConnectionManagerImpl2.ts
class ConnectionManagerImpl2 {
    public value;

    constructor() {
        this.value = Math.random().toString(36).substring(7);
        console.log(`New ConnectionManagerImpl2 instance created: ${this.value}`)
    }
}

const connectionManagerImpl2 = new ConnectionManagerImpl2();
export default connectionManagerImpl2;

---

// import1.ts
import connectionManagerImpl1 from './ConnectionManagerImpl1';
import connectionManagerImpl2 from './ConnectionManagerImpl2';

export { connectionManagerImpl1, connectionManagerImpl2 };

---

// import2.ts
import connectionManagerImpl1 from './ConnectionManagerImpl1';
import connectionManagerImpl2 from './ConnectionManagerImpl2';

export { connectionManagerImpl1, connectionManagerImpl2 };

---

// index.ts
import * as import1 from './import1';
import * as import2 from './import2';

console.log(import1)
console.log(import2)
console.log("Done")

使用tsc --module 'commonjs' * && node index.js运行上述设置

输出：

New ConnectionManagerImpl1 instance created: ddt3re
New ConnectionManagerImpl2 instance created: uv5z6
{ connectionManagerImpl1: ConnectionManagerImpl1 { value: 'ddt3re' },
  connectionManagerImpl2: ConnectionManagerImpl2 { value: 'uv5z6' } }
{ connectionManagerImpl1: ConnectionManagerImpl1 { value: 'ddt3re' },
  connectionManagerImpl2: ConnectionManagerImpl2 { value: 'uv5z6' } }
Done

如您所见，仅创建了 ConnectionManagerImpl1 和 ConnectionManagerImpl2 的 1 个实例。因此，两个实现都应该只创建 1 个实例。

Answer 3

export 语句用于创建 JavaScript 模块以从模块中导出函数、对象或原始值，以便其他程序可以通过 import 语句使用它们。

有两种不同类型的导出，命名和默认。每个模块可以有多个命名导出，但只有一个默认导出。

export default class ConnectionManager { .. }

或者

class ConnectionManager {
   ...
}
export default connectionManager;