温故知新（六二）：简述 import 原理，与 require 有什么不同

简述 import 原理，与 require 有什么不同

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

答案：

import 原理（实际上就是 ES6 module 的原理）

1.简单来说就是闭包的运用

2.为了创建 Module 的内部作用域，会调用一个包装函数

3.包装函数的返回值也就是 Module 向外公开的 API，也就是所有 export 出去的变量

4.import 也就是拿到 module 导出变量的引用

与 require 的不同

CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用

CommonJS 模块是运行时加载，ES6模块是编译时输出接口，编译时加载（效率更高由于是编译时加载，所以 import 命令会提升到整个模块的头部）

CommonJS 是运行时加载对应模块，一旦输出一个值，即使模块内部对其做出改变，也不会影响输出值，如：

// module  a.js
var a = 1;
function changeA(val){
    a = val;
}
 
module.exports = {
    a:a,
    changeA:changeA,
}

// module b.js
var modA = require('./a.js');
console.log('first',modA.a); //  1
modA.changeA(2);
console.log('second',modA.a); //  1

而 ES6 模块则不同，import 导入是在 JS 引擎对脚本静态分析时确定，获取到的只是一个只读的引用。等脚本正在运行时，会根据这个引用去对应的模块中取值。所以引用对应的值发生改变时，其导入的值也会发生改变。

CommonJs模块默认采用非严格模式，ES6 的模块自动采用严格模式（无论你加不加 "use strict"）