阅读 13848

ES6 export && export default 差异总结

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中模块通过exportexport 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 defaultexport语法差异。

  1. export var e1='...' 是合法语句,但是export default var e2='...'是不合法的(letconst也一样)。
  2. export default可以直接添加标识符导出,例如export default e2;export如果要导出已经声明的表示符,必须使用{},例如export {e1},注意:这里{}不是声明一个对象。

最后:模块导出的属性或者方法只能在模块内部修改,不能在导入模块的地方修改。

文章分类
前端