资讯专栏INFORMATION COLUMN

关于ES模块你必须要知道的一些禁忌(一)

yexiaobai / 552人阅读

摘要:没有模块化的支持,使用开发大型应用将举步维艰,所以经过大量的实践,社区制定了一些模块加载方案,最主要的有运行于浏览器的方案和运行于以为代表的服务端的方案。该方法返回被冻结的对象。

背景

ES ModuleJavaScriptES2015版本开始提供的语言标准级别的模块化方案,在此之前JavaScript一直没有语言级别的模块化体系。没有模块化的支持,使用JavaScript开发大型应用将举步维艰,所以经过大量的实践,社区制定了一些模块加载方案,最主要的有运行于浏览器的AMD方案和运行于以Nodejs为代表的服务端的CommonJS方案。

由于WebpackBabel等打包、转义工具的出现,开发者已经可以在开发中使用ES ModuleAMD已是明日黄花,使用的人越来越少,不太值得去关注。但CommonJS方案由于Nodejs在前端构建工具和服务端中的普及度,在Nodejs全面支持ES Module、老版本Nodejs消亡之前,我们还是要关注CommonJS方案以及它与ES Module之间的区别,以免搞混、记忆混淆,酿成bug。为了为后面的禁止点做铺垫,先让我们来了解或回顾两个API:Object.preventExtensionsObject.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.preventExtensionsObject.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方案中,你是可以修改整体导入模块对象的直接属性的,长期在CommonJSES 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.preventExtensionsObject.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 ModuleJob.run (internal/modules/esm/ModuleJob.js:106:14)
    at 
===================================
不允许修改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 ModuleJob.run (internal/modules/esm/ModuleJob.js:106:14)
    at 
===================================
不允许对lib对象新增属性,整体导入时,不允许给模块对象新增属性,因为整体导入时的模块对象是一个不可拓展的对象,不可以给模块对象新增任何属性

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/100214.html

相关文章

  • 【面试篇】寒冬求职季之你必须要原生JS(中)

    摘要:如果你还没读过上篇上篇和中篇并无依赖关系,您可以读过本文之后再阅读上篇,可戳面试篇寒冬求职季之你必须要懂的原生上小姐姐花了近百个小时才完成这篇文章,篇幅较长,希望大家阅读时多花点耐心,力求真正的掌握相关知识点。 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了裁员措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力。 一年前,也许你搞清楚闭包,this,原型链,就...

    Mike617 评论0 收藏0
  • 【面试篇】寒冬求职季之你必须要原生JS(上)

    摘要:循环可以使用的范围包括数组和结构某些类似数组的对象对象,以及字符串。只能遍历数组,不能中断,返回值是修改后的数组。除了之外,等,也有同样的问题。声明一个只读的常量。这在语法上,称为暂时性死区。暂时性死区也意味着不再是一个百分百安全的操作。 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了裁员措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力。 一年前,也许你搞清楚闭包...

    AlphaWatch 评论0 收藏0
  • 【面试篇】寒冬求职季之你必须要原生JS(上)

    摘要:只能遍历数组,不能中断,返回值是修改后的数组。这在语法上,称为暂时性死区。作用域链无论是还是查询,都会在当前的作用域开始查找,如果没有找到,就会向上级作用域继续查找目标标识符,每次上升一个作用域,一直到全局作用域为止。 互联网寒冬之际,各大公司都缩减了HC,甚至是采取了裁员措施,在这样的大环境之下,想要获得一份更好的工作,必然需要付出更多的努力。 一年前,也许你搞清楚闭包,this,原...

    宠来也 评论0 收藏0
  • 写给初入门/半路出家前端er

    摘要:半路出家的前端程序员应该不在少数,我也是其中之一。年,冯冯同事兼师兄看我写太费劲,跟我说对面楼在找,问我要不要学,说出来可能有点丢人,但是在那之前,我真得不知道什么是,什么是。 半路出家的前端程序员应该不在少数,我也是其中之一。 为何会走向前端 非计算机专业的我,毕业之后,就职于一家电力行业公司,做过设备调试、部门助理、测试,也写过一段时间的QT,那三年的时间,最难过的不是工作忙不忙,...

    Cc_2011 评论0 收藏0
  • 前端基础汇总

    摘要:及相关问题数据类型函数中指向原型作用域闭包面向对象对象创建模式继承严格模式与对象转换的方法添加属性,根据原型创建区别新特性解构赋值简化对象写法剪头函数三点运算符模板字符串形参默认值异步过程深拷贝与浅拷贝赋值与浅拷贝的区别浅拷贝的几种方法实现 js及es相关问题 数据类型函数中this指向——————原型作用域闭包——————面向对象对象创建模式继承——————Es5严格模式Json与j...

    2json 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<