ES6 export && export default 差異總結

夢之卿知發表於2019-03-03
Export

1. export default 在一個模組裡只能有一個，但是export可以有多個

    //model.js
    let e1=`export 1`;
    let e2=`export 2`;
    let e3=`export 3`;
    let e4=`export 4`;
    export {e2};
    export {e3};
    export {e4};
    export default e1;
複製程式碼
    //使用模組的index.js
    import e1, {e2, e3, e4} from "./model";
    console.log(e1);
    console.log(e2);
    console.log(e3);
    console.log(e4);
複製程式碼
    #index.js執行結果
    export 1
    export 2
    export 3
    export 4
複製程式碼

如果在model.js再新增一個export default

    //model.js
    let e5=`export e5`;
    export default  e5
複製程式碼
    #執行結果
    SyntaxError: .../model.js: 
    Only one default export allowed per module. (10:0)
   9 | let e5=`export e5`;
> 10 | export default  e5

複製程式碼

2.模組中通過export 匯出的(屬性或者方法)可以修改，但是通過export default匯出的不可以修改

    //model.js
    let e1=`export 1`;
    let e2=`export 2`;
    export {e2};
    export default e1;
    e1=`export 1 modified`;
    e2=`export 2 modified`;
複製程式碼
    //index.js
    import e1, {e2}from "./model";
    console.log(e1);
    console.log(e2);
複製程式碼
    #index.js執行結果  
    export 1
    export 2 modified
複製程式碼

首先需要了解到：

  1. ES6中模組通過export和export default暴露出來的屬性或者方式並不是普通的賦值或者引用，它們是對模組內部定義的標誌符類似指標的繫結。
  2. 對於一個匯出的屬性或者方法，在什麼地方匯出不重要，在什麼時候匯入也不重要，重要的是:訪問這這個繫結的時候的當前值。 
        //model.js
    let e1=`export 1`;
    let e2=`export 2`;
    export {e2};
    export default e1;
    e1=`export 1 modified`;
    setTimeout(()=>{
        e2=`export 2 modified`;
    },1000);
複製程式碼
        //index.js
    import e1, {e2}from "./model";
    console.log(e1);
    console.log(e2);
    setTimeout(()=>{
        console.log(`later`,e2)
    },5000);
複製程式碼
        //index.js執行結果
    export 1
    export 2
    later export 2 modified
複製程式碼

但是，export是繫結到識別符號，改變標誌符的值，然後訪問這個繫結，得到的是新值；export default繫結的是標誌符指向的值，如果修改標誌符指向另一個值，這個繫結的值不會發生變化。
如果想修改預設匯出的值，可以使用export {e1 as default}這種方法。

    //model.js修改
    export {e1 as default}
複製程式碼
    #index.js執行結果
    export 1 modified
    export 2
    later export 2 modified
複製程式碼

3. export default與export語法差異。

  1. export var e1=`...` 是合法語句，但是export default var e2=`...`是不合法的（let和const也一樣）。
  2. export default可以直接新增識別符號匯出，例如export default e2;export如果要匯出已經宣告的表示符,必須使用{},例如export {e1},注意：這裡{}不是宣告一個物件。

最後：模組匯出的屬性或者方法只能在模組內部修改，不能在匯入模組的地方修改。

相關文章