JavaScript 相关 

Last Update: 2024-06-03

目录

var let 和 const

var:

let:

this 的指向

全局代码中的 this 指向全局对象,但很少在全局代码中使用 this。

在函数中调用 this,它的指向取决于函数如何被调用的:

调用方法写法指向
通过 new 调用new method()new 出的新对象
直接调用method()全局对象
通过对象调用obj.method()obj
callmethod.call(ctx)call 的第一个参数
applymethod.apply(ctx)apply 的第一个参数

call 方法就是调用函数,没有其它含义。apply 第二个参数是一个数组,这个数组被用来给 method 方法传递参数。

模块化

CommonJS 模块化

CommonJS 的特点:

CommonJS 规范规定,每个模块内部的 module 变量指向一个对象,这个对象代表当前模块,它的属性 module.exports 是对外的接口。加载某个模块,就是加载该模块的 module.exports 属性。

为了方便,Node 为每个模块额外提供了一个和 module 平级的 exports 变量,这个变量指向 module.exports。所以可以向 exports 对象添加方法来导出模块接口。

但要注意,不能直接将 exports 变量指向一个值,因为这切断了 exports 变量与 module.exports 属性的联系。这意味着如果模块只导出一个常量值或函数,则不能使用 exports,只能使用 module.exports

require 指令读入并执行一个 JavaScript 文件,如果参数所指的文件名没有后缀,则默认使用 .js 作为后缀,执行后返回该模块的 module.exports 对象。如果没有发现指定模块就报错。

如果想要多次执行某个模块,可以让该模块输出一个函数,然后每次 require 这个模块的时候,重新执行一下输出的函数。

所有缓存的模块保存在 require.cache 之中,可以用 delete require.cache[require.resolve('./b.js')] 删除模块的缓存,其中 require.resolve('./b.js') 会返回 b.js 的完整路径。

CommonJS 导入的值是被导出的变量的拷贝。即,一个值一旦被导入,那么模块内部的变化就影响不当前被导入的值。

ES6 模块化

ES6 模块的导入导出分为 基本导入导出默认导入导出 两种,具有以下的特点:

  1. 使用 预声明 依赖的方式导入模块
    • 延迟声明某些时候可以提高效率,但无法在一开始确定模块依赖关系
    • 预声明在一开始可以确定模块依赖关系,但某些时候效率较低
  2. 导入导出方式灵活
  3. 路径表示被进一步规范,所有路径必须以 ./ 或 ../ 开头

基本导入导出

基本导出可以有多个,每个导出必须有名称。导出语法为:

export 声明表达式;
// 或
export { 具名符号 };

由于使用的是 预加载 ,因此,导入任何其他模块,导入代码必须放置到所有代码之前。

如果要导入基本导出,写法是:

import { 导入的符号列表 } from "模块路径";
// 或导入后为其重命名
import { 导入的符号列表 as somename } from "模块路径";

注意以下细节:

默认导入导出

每个模块,除允许有多个基本导出之外,还允许有一个默认导出。语法是:

export default 默认导出的数据;
// 或
export { 默认导出的数据 as default };

由于每个模块仅允许有一个默认导出,因此,每个模块不能出现多个默认导出语句,且默认导出可以不具名。

要想导入一个模块的默认导出,语法为:

import 接收变量 from "模块路径";

由于导入默认导出时,接收导入的 接收变量 的名称可自行定义,因此没有用 as 关键字改别名一说。

要同时导入某个模块的默认导出和基本导出,语法为:

import 接收默认导出的变量, { 接收基本导出的变量 } from "模块路径";
// 或
import * as Module from "模块路径";

注:如果使用 * 号,会将所有基本导出和默认导出聚合到一个对象中,默认导出会作为属性 default 存在。

浏览器引入 ES6 模块

目前,浏览器使用以下方式引入一个ES6模块文件:

<script src="入口文件" type="module">

但这个方式并没有被写入 ES6 模块化标准。