es6中容易忽视的细节（三）

时间 2019-11-10

原文原文链接

proxy代理的坑

var obj = {index:'index'}
    var newObj = new Proxy(obj,{
        get:(target,key)=>{
            console.log(target)  // {index: "index"}
            return target[key]+123;
            // return target.key  若是这块这样返回的话访问newObj.index就会报undefined
        }
    })
    newObj.index    // index123
    实践中遇到这样的问题，可是具体什么缘由还还弄清楚，有谁但愿你们在底部留言告知，不胜感激

es6中模块与commonJs的区别

ES6 模块的设计思想，是尽可能的静态化，使得编译时就能肯定模块的依赖关系，以及输入和输出的变量。es6

CommonJS 模块就是对象，输入时必须查找对象属性；ES6 模块不是对象，而是经过export命令显式指定输出的代码，再经过import命令输入。异步

```
// CommonJS模块：这种引入方式只有在运行时加载，而且把整个fs对象引入，不可以静态加载
let { stat, exists, readFile } = require('fs');
// ES6模块：es6的模块中的每个组件都是独立的，这样引入只把对应组件引入，可以静态加载(这就致使没法动态的加载须要模块，实现模块的按需加载)
import { stat, exists, readFile } from 'fs';
```

import命令接受一对大括号，里面指定要从其余模块导入的变量名。大括号里面的变量名，必须与被导入模块（profile.js）对外接口的名称相同。ui
```
var a={name:'zhangsan',sex:'man'};
export {person as a};

import {personX as person} form './person.js';
```
import命令有自动提高的功能，会自动提高到文件的顶部，因此在文件中只要咱们引入便可使用，不须要考虑引入的位置，与let相反设计
```
console.log(personX);    // {name:'zhangsan',sex:'man'};这样不会报错
import {personX as person} form './person.js';
```

import是静态执行，全部在引入组件过程当中能不能掺杂任何表达式代理

// 报错
if (x === 1) {
  import { foo } from 'module1';
} else {
  import { foo } from 'module2';
}
import 'lodash'    // 这样会直接执行模块

import命令与require命令同时存在时会先执行import命令，由于import在静态解析阶段执行，因此它是一个模块之中最先执行的。

import与export结合使用code

export { es6 as default } from './someModule';

// 等同于
import { es6 } from './someModule';
export default es6;
这样暴露在另外一个文件中引入的时候就能够 import anyName from 'es6';

import()相似于commonJs的require()区别是前者是异步执行，后者是同步执行

扩展

module.exports==export.default，这样暴露引入的时候就能够任意指定模块名称，exports暴露引入时只能用{}把内部组件包裹起来