背景

ES Module是JavaScript在ES2015版本開始提供的語言標準級別的模組化方案，在此之前JavaScript一直沒有語言級別的模組化體系。沒有模組化的支援，使用JavaScript開發大型應用將舉步維艱，所以經過大量的實踐，社群制定了一些模組載入方案，最主要的有運行於瀏覽器的AMD方案和運行於以Nodejs為代表的服務端的CommonJS方案。

由於Webpack和Babel等打包、轉義工具的出現，開發者已經可以在開發中使用ES Module，AMD已是明日黃花，使用的人越來越少，不太值得去關注。但CommonJS方案由於Nodejs在前端構建工具和服務端中的普及度，在Nodejs全面支援ES Module

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物件新增屬性,整體匯入時，不允許給模組物件新增屬性，因為整體匯入時的模組物件是一個不可拓展的物件,不可以給模組物件新增任何屬性
複製程式碼