共计 5407 个字符，预计需要花费 14 分钟才能阅读完成。
背景
ES Module 是 JavaScript 在 ES2015 版本开始提供的语言标准级别的模块化方案，在此之前 JavaScript 一直没有语言级别的模块化体系。没有模块化的支持，使用 JavaScript 开发大型应用将举步维艰，所以经过大量的实践，社区制定了一些模块加载方案，最主要的有运行于浏览器的 AMD 方案和运行于以 Nodejs 为代表的服务端的 CommonJS 方案。
由于 Webpack 和 Babel 等打包、转义工具的出现，开发者已经可以在开发中使用 ES Module，AMD 已是明日黄花，使用的人越来越少，不太值得去关注。但 CommonJS 方案由于 Nodejs 在前端构建工具和服务端中的普及度，在 Nodejs 全面支持 ES Module、老版本 Nodejs 消亡之前，我们还是要关注 CommonJS 方案以及它与 ES Module 之间的区别，以免搞混、记忆混淆，酿成 bug。为了为后面的禁止点做铺垫，先让我们来了解或回顾两个 API：Object.preventExtensions 和 Object.freeze。
Object.preventExtensions
Object.preventExtensions() 将对象标记为不再可扩展，因此它将永远不会具有超出它被标记为不可扩展的属性。注意，一般来说，不可扩展对象的属性可能仍然可被删除。尝试将新属性添加到不可扩展对象将静默失败或抛出 TypeError（在 strict mode 下）当我们在严格模式下，尝试对不可拓展的对象进行属性添加时，就会抛出异常，具体代码如下：
“use strict”
var obj = {
age: 23,
name: ‘rioli’,
city: [‘sz’, ‘jy’]
};
Object.preventExtensions(obj);
obj.province = ‘GD’;
运行结果：
Uncaught TypeError: Cannot add property ‘province’, object is not extensible
Object.freeze
Object.freeze() 方法可以冻结一个对象，冻结指的是不能向这个对象添加新的属性，不能修改其已有属性的值，不能删除已有属性，以及不能修改该对象已有属性的可枚举性、可配置性、可写性。该方法返回被冻结的对象。当我们在严格模式下，尝试对已冻结的对象进行属性修改时，就会抛出异常，具体代码如下：
“use strict”
var obj = {
age: 23,
name: ‘rioli’,
city: [‘sz’, ‘jy’]
};
Object.freeze(obj);
obj.age = 26;
运行结果：
Uncaught TypeError: Cannot assign to read only property ‘age’ of object ‘#<Object>’
构建不可拓展的冻结对象
我们可以利用 Object.preventExtensions 和 Object.freeze 这两个 API 来组合构建一个不可拓展的冻结对象，即：不能对对象的顶级属性对象增、删、改等操作。
“use strict”
var obj = {
age: 23,
name: ‘rioli’,
city: [‘sz’, ‘jy’]
};
Object.freeze(obj);
Object.preventExtensions(obj);
// obj.age = 26; 修改顶级属性将引发报错
// obj.province = ‘GD’; 新增顶级属性将引发报错
// delete obj.name; 删除顶级属性将引发报错
// 但仍然可以修改对象的子对象的属性，因为修改对象的子对象的属性并不会修改子对象的引用，对于引用类型来说等于没有发生值的改变
obj.city[0] = ‘zq’;
obj.city.push(‘st’);
ES Module 禁忌之不可以修改整体导入模块对象的直接属性
为什么会列出这个禁忌，这是因为在 CommonJS 方案中，你是可以修改整体导入模块对象的直接属性的，长期在 CommonJS 在 ES Module 中交叉使用，难免会造成不必要的记忆混淆。但是在 ES Module 中，整体导入的模块对象是一个不可拓展的冻结的常量对象，对其直接属性的修改和新增将引发报错。
假定我们正处于 CommonJs 环境下，例如 NodeJS 中，我们导入等个模块，然后尝试对模块对象的属性进行修改和新增，具体代码如下：
lib.js
exports.time = Date.now();
exports.getCurrrentYear = function () {
return new Date().getFullYear();
}
exports.people = {
age: 26,
name: ‘rioli’,
cities: [‘jieyang’, ‘shenzhen’]
};
main.js
const lib = require(‘./lib’);
const people = lib.people;
const print = (data) => {
console.log(“===================================”);
console.log(data);
};
print(people);
print(lib);
people.age = 999;
print(people);
people.father = ‘baba’;
print(people);
lib.people = 23;
print(lib);
lib.people.age = 666;
print(lib);
lib.provices = [‘GD’, ‘FJ’];
print(lib);
运行结果通过，控制台输出结果如下：
===================================
{age: 26, name: ‘rioli’, cities: [ ‘jieyang’, ‘shenzhen’] }
===================================
{time: 1545274516494,
getCurrrentYear: [Function],
people: {age: 26, name: ‘rioli’, cities: [ ‘jieyang’, ‘shenzhen’] } }
===================================
{age: 999, name: ‘rioli’, cities: [ ‘jieyang’, ‘shenzhen’] }
===================================
{age: 999,
name: ‘rioli’,
cities: [‘jieyang’, ‘shenzhen’],
father: ‘baba’ }
===================================
{time: 1545274516494, getCurrrentYear: [Function], people: 23 }
===================================
{time: 1545274516494, getCurrrentYear: [Function], people: 23 }
===================================
{time: 1545274516494,
getCurrrentYear: [Function],
people: 23,
provices: [‘GD’, ‘FJ’] }
在 ES Module 环境下，整体导入的模块对象，但我们对其进行修改和新增属性的时候，其表现和上述利用 Object.preventExtensions 和 Object.freeze 这两个 API 来组合构建一个不可拓展的冻结对象的表现一样，即：这个模块对象是一个不可拓展的冻结的常量对象。演示代码如下：lib.mjs
export const time = Date.now();
export function getCurrrentYear() {
return new Date().getFullYear();
}
export const people = {
age: 26,
name: ‘rioli’,
cities: [‘jieyang’, ‘shenzhen’]
};
main.mjs
import {people} from ‘./lib.mjs’;
import * as lib from ‘./lib.mjs’;
// 首先定一个基调，其实但我们用 import * as xx from ‘yy’ 将一个模块做整体导入时，此时 xx 会作为作为模块命名空间
const print = (data) => {
console.log(“===================================”);
console.log(data);
};
print(people);
print(lib);
// 允许修改
people.age = 999;
print(people);
// 允许修改
people.father = ‘baba’;
print(people);
// 不允许修改，因为作为整体导入时，模块对象的直接一级属性是只读属性，修改将引发报错
try {
lib.people = 23;
print(lib);
} catch (e) {
print(e);
print(“ 不允许修改 lib.people，因为作为整体导入时，模块对象的直接一级属性是只读属性，修改将引发报错 ”);
}
// 允许修改，因为作为整体导入时，模块对象的直接一级属性是只读属性，但一级
// 属性引用的对象不是只读对象，可以修改其属性（只要没有被设置为不可写）
lib.people.age = 666;
print(lib);
// 整体导入时，不允许给模块对象新增属性，因为整体导入时的模块对象是一个不可拓展的对象, 不可以给模块对象新增任何属性
try {
lib.provices = [‘GD’, ‘FJ’];
print(lib);
} catch (e) {
print(e);
print(“ 不允许对 lib 对象新增属性, 整体导入时，不允许给模块对象新增属性，因为整体导入时的模块对象是一个不可拓展的对象, 不可以给模块对象新增任何属性 ”);
}
具体运行结果：
===================================
{age: 26, name: ‘rioli’, cities: [ ‘jieyang’, ‘shenzhen’] }
===================================
{getCurrrentYear: [Function: getCurrrentYear],
people: {age: 26, name: ‘rioli’, cities: [ ‘jieyang’, ‘shenzhen’] },
time: 1545275257126 }
===================================
{age: 999, name: ‘rioli’, cities: [ ‘jieyang’, ‘shenzhen’] }
===================================
{age: 999,
name: ‘rioli’,
cities: [‘jieyang’, ‘shenzhen’],
father: ‘baba’ }
===================================
TypeError: Cannot assign to read only property ‘people’ of object ‘[object Module]’
at file:///Users/chenjt/Documents/playground/ESModule-learning/lesson02/esmodule/main.mjs:28:16
at ModuleJob.run (internal/modules/esm/ModuleJob.js:106:14)
at <anonymous>
===================================
不允许修改 lib.people，因为作为整体导入时，模块对象的直接一级属性是只读属性，修改将引发报错
===================================
{getCurrrentYear: [Function: getCurrrentYear],
people:
{age: 666,
name: ‘rioli’,
cities: [‘jieyang’, ‘shenzhen’],
father: ‘baba’ },
time: 1545275257126 }
===================================
TypeError: Cannot add property provices, object is not extensible
at file:///Users/chenjt/Documents/playground/ESModule-learning/lesson02/esmodule/main.mjs:43:18
at ModuleJob.run (internal/modules/esm/ModuleJob.js:106:14)
at <anonymous>
===================================
不允许对 lib 对象新增属性, 整体导入时，不允许给模块对象新增属性，因为整体导入时的模块对象是一个不可拓展的对象, 不可以给模块对象新增任何属性