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';