javascript中为什么我们不能直接使用export?

比眉伴天荒 2023-10-04 22:17 8阅读 0赞

相信很多人最开始时都有过这样的疑问  
假如我的项目目录下有一个 index.html, index.js 于是我像这样写

<table> 
 <tbody> 
  <tr> 
   <td> <p>&lt;!DOCTYPE html&gt;</p> <p>&lt;html lang="en"&gt;</p> <p>&nbsp; &nbsp; &lt;head&gt;</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta charset="UTF-8" /&gt;</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge" /&gt;</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0" /&gt;</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;title&gt;Document&lt;/title&gt;</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;script src="./js/index.js"&gt;&lt;/script&gt;</p> <p>&nbsp; &nbsp; &lt;/head&gt;</p> <p>&nbsp; &nbsp; &lt;body&gt;</p> <p>&nbsp; &nbsp; &nbsp; &nbsp; &lt;div&gt;首页&lt;/div&gt;</p> <p>&nbsp; &nbsp; &lt;/body&gt;</p> <p>&lt;/html&gt;</p> </td> 
  </tr> 
 </tbody> 
</table>

index.js里面是：

export default { a: 1 }

![5f50646151d54b078c50b19554cc168f.png][]

在浏览器之间打开index.html，发现报错了：

![443531dfa5cb4ffab6cbbe7ff54954d1.png][]

这到底是为什么?为什么连chrome浏览器竟然还不完全支持es6的语法?  
其实,ES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载。同时还有CMD规范，为同步加载方案如seaJS。  
ES6在语言规格的层面上，实现了模块功能，而且实现得相当简单，完全可以取代现有的CommonJS和AMD规范，成为浏览器和服务器通用的模块解决方案。话有回到我们刚才的问题 ‘为什么chrome浏览器竟然还不完全支持es6的语法’

首先，JavaScript有两种源文件，一种叫做脚本，一种叫做模块。这个区分是在ES6引入了模块机制开始的，在ES5和之前的版本中，就只有一种源文件类型（就只有脚本）。

脚本是可以由浏览器或者node环境引入执行的，而模块只能由JavaScript代码用import引入执行。

从概念上，我们可以认为脚本具有主动性的JavaScript代码段，是控制宿主完成一定任务的代码；而模块是被动性的JavaScript代码段，是等待被调用的库。

我们对标准中的语法产生式做一些对比，不难发现，实际上模块和脚本之间的区别仅仅在于是否包含import 和 export。

脚本是一种兼容之前的版本的定义，在这个模式下，没有import就不需要处理加载“.js”文件问题。

现代浏览器可以支持用script标签引入模块或者脚本，如果要引入模块，必须给script标签添加type=“module”。如果引入脚本，则不需要type。

![d838d0aa76f6455a9758f17f67bf0368.png][]

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>&lt;script </code><code>type</code><code>=</code><code>"module"</code> <code>src=</code><code>"xxxxx.js"</code><code>&gt;&lt;</code><code>/script</code><code>&gt;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这样，就回答了我们标题中的问题，script标签如果不加type=“module”，默认认为我们加载的文件是脚本而非模块，如果我们在脚本中写了export，当然会抛错。

但是当你引入module时候，再次执行发现又报错了：

> Access to script at 'file:///E:/Dpandata/ZatProject/Something/HtmlDemo/js/index.js' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

![d84784abde3a41fa8f531a99639f5b9d.png][]

从错误提示看，脚本是被跨域策略给拦截了，跨域请求只支持这些协议：`http, data, chrome, chrome-extension, chrome-untrusted, https.`，而我们的协议是`file`，

而且加了module后的js文件属于局部作用于，不加module的文件属于全局作用域，别的文件也可以访问到A.js中的变量。

其中脚本中可以包含语句。模块中可以包含三种内容：import声明，export声明和语句。先来讲讲import声明和export声明。

**import声明**  
我们首先来介绍一下import声明，import声明有两种用法，一个是直接import一个模块，另一个是带from的import，它能引入模块里的一些信息。

import “mod”; //引入一个模块  
import v from “mod”; //把模块默认的导出值放入变量v  
直接import一个模块，只是保证了这个模块代码被执行，引用它的模块是无法获得它的任何信息的。

带from的import意思是引入模块中的一部分信息，可以把它们变成本地的变量。

带from的import细分又有三种用法，我们可以分别看下例子：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code> <code>x from </code><code>"./a.js"</code> <code>引入模块中导出的默认值。</code></p> <p><code>import</code> <code>{a as x, modify} from </code><code>"./a.js"</code><code>; 引入模块中的变量。</code></p> <p><code>import</code> <code>* as x from </code><code>"./a.js"</code> <code>把模块中所有的变量以类似对象属性的方式引入。</code></p> </td> 
  </tr> 
 </tbody> 
</table>

第一种方式还可以跟后两种组合使用。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code> <code>d, {a as x, modify} from </code><code>"./a.js"</code></p> <p><code>import</code> <code>d, * as x from </code><code>"./a.js"</code></p> </td> 
  </tr> 
 </tbody> 
</table>

语法要求不带as的默认值永远在最前。注意，这里的变量实际上仍然可以受到原来模块的控制。  
我们看一个例子，假设有两个模块a和b。我们在模块a中声明了变量和一个修改变量的函数，并且把它们导出。我们用b模块导入了变量和修改变量的函数。

模块a：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>export</code> <code>var a = 1;</code></p> <p><code>export</code> <code>function</code> <code>modify(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>a = 2;</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

模块b：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>import</code> <code>{a, modify} from </code><code>"./a.js"</code><code>;</code></p> <p><code>console.log(a);</code></p> <p><code>modify(); </code></p> <p><code>console.log(a);</code></p> </td> 
  </tr> 
 </tbody> 
</table>

当我们调用修改变量的函数后，b模块变量也跟着发生了改变。这说明导入与一般的赋值不同，导入后的变量只是改变了名字，它仍然与原来的变量是同一个。

**export声明**  
我们再来说说export声明。与import相对，export声明承担的是导出的任务。

模块中导出变量的方式有两种，一种是独立使用export声明，另一种是直接在声明型语句前添加export关键字。

独立使用export声明就是一个export关键字加上变量名列表，例如：

export \{a, b, c\};  
我们也可以直接在声明型语句前添加export关键字，这里的export可以加在任何声明性质的语句之前，整理如下：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>--var</code></p> <p><code>--</code><code>function</code> <code>(含async和generator)</code></p> <p><code>--class</code></p> <p><code>--</code><code>let</code></p> <p><code>--const</code></p> </td> 
  </tr> 
 </tbody> 
</table>

export还有一种特殊的用法，就是跟default联合使用。export default 表示导出一个默认变量值，它可以用于function和class。这里导出的变量是没有名称的，可以使用import x from “./a.js”这样的语法，在模块中引入。

export default 还支持一种语法，后面跟一个表达式，例如：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>var a = {};</code></p> <p><code>export</code> <code>default a;</code></p> </td> 
  </tr> 
 </tbody> 
</table>

但是，这里的行为跟导出变量是不一致的，这里导出的是值，导出的就是普通变量a的值，以后a的变化与导出的值就无关了，修改变量a，不会使得其他模块中引入的default值发生改变。

说到这里,就来大致说说export和export default的区别

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>1.</code><code>export</code><code>与</code><code>export</code> <code>default均可用于导出常量、函数、文件、模块等</code></p> <p><code>2.在一个文件或模块中，</code><code>export</code><code>、</code><code>import</code><code>可以有多个，</code><code>export</code> <code>default仅有一个</code></p> <p><code>3.通过</code><code>export</code><code>方式导出，在导入时要加{ }，</code><code>export</code> <code>default则不需要</code></p> </td> 
  </tr> 
 </tbody> 
</table>

或者我们可以这样理解,export default的本质其实就是讲后面的值付给default变量,然后你可以为它取你想要的变量

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>所以</code></p> <p><code>export</code> <code>default 1&nbsp;&nbsp; </code><code>//</code> <code>执行</code></p> <p><code>export</code> <code>1 </code><code>//</code> <code>报错</code></p> </td> 
  </tr> 
 </tbody> 
</table>

第二行报错正式是因为没有指定对外的接口,而第一句指定为default

在import语句前无法加入export，但是我们可以直接使用export from语法。

export a from “a.js”

JavaScript引擎除了执行脚本和模块之外，还可以执行函数。而函数体跟脚本和模块有一定的相似之处

再来谈一下函数体

执行函数的行为通常是在JavaScript代码执行时，注册宿主环境的某些事件触发的，而执行的过程，就是执行函数体（函数的花括号中间的部分）。

先看一个例子，感性地理解一下：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>setTimeout(</code><code>function</code><code>(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"go go go"</code><code>);</code></p> <p><code>}, 10000)</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这段代码通过setTimeout函数注册了一个函数给宿主，当一定时间之后，宿主就会执行这个函数。

我们可以认为，宏任务中（还有微任务,这里不再多做解释）可能会执行的代码包括“脚本(script)”“模块（module）”和“函数体（function body）”。正因为这样的相似性。

函数体其实也是一个语句的列表。跟脚本和模块比起来，函数体中的语句列表中多了return语句可以用。

函数体实际上有四种，下面，分别介绍一下。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>普通函数体，例如：</code></p> <p><code>function</code> <code>foo(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//</code></p> <p><code>}</code></p> <p><code>异步函数体，例如：</code></p> <p><code>async </code><code>function</code> <code>foo(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//</code></p> <p><code>}</code></p> <p><code>生成器函数体，例如：</code></p> <p><code>function</code> <code>*foo(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//</code></p> <p><code>}</code></p> <p><code>异步生成器函数体，例如：</code></p> <p><code>async </code><code>function</code> <code>*foo(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

上面四种函数体的区别在于：能否使用await或者yield语句。

说完了三种语法结构，再来介绍下JavaScript语法的全局机制(非严格模式)：预处理。  
这对于我们解释一些JavaScript的语法现象非常重要。不理解预处理机制我们就无法理解var等声明类语句的行为。  
**var声明**  
var声明永远作用于脚本、模块和函数体这个级别，在预处理阶段，不关心赋值的部分，只管在当前作用域声明这个变量。

还是先举个例子。

这段代码声明了一个脚本级别的a，又声明了foo函数体级别的a，我们注意到，函数体级的var出现在console.log语句之后。

但是预处理过程在执行之前，所以有函数体级的变量a，就不会去访问外层作用域中的变量a了，而函数体级的变量a此时还没有赋值，所以是undefined。再看一个情况：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>var a = 1;</code></p> <p><code>function</code> <code>foo() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(a);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>if</code><code>(</code><code>false</code><code>) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var a = 2;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> <p><code>foo();</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这段代码比上一段代码在var a = 2之外多了一段if，我们知道if(false)中的代码永远不会被执行，但是预处理阶段并不管这个，var的作用能够穿透一切语句结构，它只认脚本、模块和函数体三种语法结构。所以这里结果跟前一段代码完全一样，我们会得到undefined。

看下一个例子。

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>var a = 1;</code></p> <p><code>function</code> <code>foo() { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var o= {a:3}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>with(o) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var a = 2;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(o.a);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(a);</code></p> <p><code>}</code></p> <p><code>foo();</code></p> </td> 
  </tr> 
 </tbody> 
</table>

在这个例子中，引入了with语句，用with(o)创建了一个作用域，并把o对象加入词法环境，在其中使用了var a = 2;语句。  
在预处理阶段，只认var中声明的变量，所以同样为foo的作用域创建了a这个变量，但是没有赋值。  
在执行阶段，当执行到var a = 2时，作用域变成了with语句内，这时候的a被认为访问到了对象o的属性a，所以最终执行的结果，我们得到了2和undefined。  
这个行为是JavaScript公认的设计失误之一(类似的还有双等 ==)，一个语句中的a在预处理阶段和执行阶段被当做两个不同的变量，严重违背了直觉，但是今天，在JavaScript设计原则“don’t break the web”之下，已经无法修正了，所以这里需要特别的注意。  
因为早年JavaScript没有let和const，只能用var，又因为var除了脚本和函数体都会穿透，人民群众发明了“立即执行的函数表达式（IIFE）”这一用法，用来产生作用域，例如：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>for</code><code>(var i = 0; i &lt; 20; i ++) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>void </code><code>function</code><code>(i){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var div = document.createElement(</code><code>"div"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div.innerHTML = i;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div.onclick = </code><code>function</code><code>(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(i);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.body.appendChild(div);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}(i);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这段代码很经典，常常在实际开发中见到，也经常被用作面试题，为文档添加了20个div元素，并且绑定了点击事件，打印它们的序号。  
我们通过IIFE在循环内构造了作用域，每次循环都产生一个新的环境记录，这样，每个div都能访问到环境中的i。  
如果我们不用IIFE：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>for</code><code>(var i = 0; i &lt; 20; i ++) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var div = document.createElement(</code><code>"div"</code><code>);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div.innerHTML = i;</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>div.onclick = </code><code>function</code><code>(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(i);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>document.body.appendChild(div);</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这段代码的结果将会是点每个div都打印20，因为全局只有一个i，执行完循环后，i变成了20。

**function声明**

function声明的行为原本跟var非常相似，但是在最新的JavaScript标准中，对它进行了一定的修改，这让情况变得更加复杂了。  
在全局（脚本、模块和函数体），function声明表现跟var相似，不同之处在于，function声明不但在作用域中加入变量，还会给它赋值。  
我们看一下function声明的例子

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>console.log(foo);</code></p> <p><code>function</code> <code>foo(){ </code></p> <p></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这里声明了函数foo，在声明之前，我们用console.log打印函数foo，我们可以发现，已经是函数foo的值了。  
function声明出现在if等语句中的情况有点复杂，它仍然作用于脚本、模块和函数体级别，在预处理阶段，仍然会产生变量，它不再被提前赋值：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>console.log(foo);</code></p> <p><code>if</code><code>(</code><code>true</code><code>) { </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>function</code> <code>foo(){ </code></p> <p></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这段代码得到undefined。如果没有函数声明，则会抛出错误。  
这说明function在预处理阶段仍然发生了作用，在作用域中产生了变量，没有产生赋值，赋值行为发生在了执行阶段。  
出现在if等语句中的function，在if创建的作用域中仍然会被提前，产生赋值效果。

**class声明**

class声明在全局的行为跟function和var都不一样。  
在class声明之前使用class名，会抛错：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>console.log(c);</code></p> <p><code>class c{ </code></p> <p></p> <p><code>}</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这段代码我们试图在class前打印变量c，我们得到了个错误，这个行为很像是class没有预处理，但是实际上并非如此。

我们看个复杂一点的例子：

<table> 
 <tbody> 
  <tr> 
   <td> <p><code>var c = 1;</code></p> <p><code>function</code> <code>foo(){ </code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(c);</code></p> <p><code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>class c {}</code></p> <p><code>}</code></p> <p><code>foo();</code></p> </td> 
  </tr> 
 </tbody> 
</table>

这个例子中，我们把class放进了一个函数体中，在外层作用域中有变量c。然后试图在class之前打印c。

执行后，我们看到，仍然抛出了错误，如果去掉class声明，则会正常打印出1，也就是说，出现在后面的class声明影响了前面语句的结果。

这说明，class声明也是会被预处理的，它会在作用域中创建变量，并且要求访问它时抛出错误。

class的声明作用不会穿透if等语句结构，所以只有写在全局环境才会有声明作用。

这样的class设计比function和var更符合直觉，而且在遇到一些比较奇怪的用法时，倾向于抛出错误。

按照现代语言设计的评价标准，及早抛错是好事，它能够帮助我们尽量在开发阶段就发现代码的可能问题。

针对以上问题以及一些不严谨的问题和一些引擎难以优化的错误,出现了严格模式

设立”严格模式”的目的，主要有以下几个：

- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为;

- 消除代码运行的一些不安全之处，保证代码运行的安全；

- 提高编译器效率，增加运行速度；

- 为未来新版本的Javascript做好铺垫。

其中 ES6 的模块自动采用严格模式，不管你有没有在模块头部加上”use strict”;

至于平常开发时我们到底要不要使用严格模式以及包括要不要使用typescript?每个人都有每个人的观点!那么,在开发中你是否推荐用严格模式来’约束’你的代码及风格呢？

[5f50646151d54b078c50b19554cc168f.png]: https://img-blog.csdnimg.cn/5f50646151d54b078c50b19554cc168f.png
[443531dfa5cb4ffab6cbbe7ff54954d1.png]: https://img-blog.csdnimg.cn/443531dfa5cb4ffab6cbbe7ff54954d1.png
[d838d0aa76f6455a9758f17f67bf0368.png]: https://img-blog.csdnimg.cn/d838d0aa76f6455a9758f17f67bf0368.png
[d84784abde3a41fa8f531a99639f5b9d.png]: https://img-blog.csdnimg.cn/d84784abde3a41fa8f531a99639f5b9d.png