10JavaScript语法——基本规则

1.脚本和模块

2.import 声明

3.export 声明

4.函数体

5.预处理和指令序言

1.脚本和模块

在ES6引入了模块机制后，JavaScript有两种源文件，一种叫脚本，另一种叫模块。

1-1 区别

概念上区别

• 脚本是具有主动性的JavaScript代码段，是控制宿主完成一定任务的代码。
• 模块是被动性的JavaScript代码段，是等待被调用的库。

引入执行区别

• 脚本可由浏览器或者node环境引入执行。
• 模块只能由JavaScript代码用import引入执行。
• 现代浏览器可以支持script标签引入模块，需添加type=“module”。

<script type="module" src="xxxxx.js"></script>

内容上区别

2.import声明

2-1 import 声明有两种用法

import "mod"; //引入一个模块
import v from "mod";  //把模块默认的导出值放入变量v

2-2 两种import区别

• 直接import一个模块，只保证这个模块代码被执行。
• 带from的import意思是引入模块中的一部分信息，可以把它们变成本地变量。

模块a:

export var a = 1;

export function modify(){
    a = 2;
}

模块b:

import {a, modify} from "./a.js";

console.log(a);

modify();

console.log(a);

3.export声明

export {a}
//default用法
var a = {}
export default a

4.函数体

4-1函数体总类

• 普通函数体

function foo (){
	//function body
}

• 异步函数体

async function foo (){
	//function body
}

• 生成器函数体

function *foo(){
	//Function body
}

• 异步生成器函数体

async function *foo(){
	//Function body
}

5.预处理和指令序言

5-1 预处理

• 在JavaScript执行前，会对脚本、模块和函数体中的语句进行预处理。
• 预处理过程将会处理var、函数声明、class、const和let语句，以确定其中变量的意义。

5-1-1 var 声明

var的声明穿透一切语句结构，只认脚本、模块和函数。

var a = 1;

function foo() {
    console.log(a);
    var a = 2;
}

foo(); // undefined

这段代码声明了脚本级别的a，有在foo函数级声明了a，然而console.log(a)在函数级a前，就不会去访问外层作用域中的a。

var a = 1;

function foo() {
    console.log(a);
    if (false) {
    	var a = 2;
    }
}

foo(); // undefined

结果跟前一段一样，因为var只认脚本、模块和函数三种语法结构。

5-1 指令序言

”use strict“是JavaScript标准中规定的唯一一种指令序言。

"use strict";
function f(){
    console.log(this);
};
f.call(null);