基本用法
模块导入导出各种类型的变量,如字符串,数值,函数,类
- 导出的函数声明与类声明必须要有名称(export default 命令另外考虑)
- 不仅能导出声明还能导出引用(例如函数)
export const str = '字符串'
export const num = 123
export const obj = { name: 'Tom', age: 24 }
export const arr = [1, 2, 3]
export const set = new Set([4, 5, 6])
export const map = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
export function add(a, b) { return a + b }
export class Computer {
// 静态方法
static sum(list) {
list.reduce((a, b) => a + b)
}
constructor(a) {
this.a = a
// 实例属性
this.cache = []
// 实例方法
this.add = (a, b) => {
return a + b
}
// 默认返回实例对象 this
}
// getter
get a() {
console.log('getter');
return this._a;
}
// setter
set a(a) {
console.log('setter');
this._a = a;
}
// 原型方法
push(val) {
this.cache.push(val + '哈哈哈')
}
unshift(val) {
this.cache.unshift(val + '嘻嘻嘻')
}
}
export class Child extends Computer{
constructor(){
super()// super必须调用。且出现在this前面
this.age = 30
super.push()// super 作为对象,在普通方法中,指向父类的原型对象
}
static sum(){
// 调用父类静态方法
return super.sum([4,8,36])+20;// super 作为对象,在静态方法中,指向父类
}
}
import 命令的特点
import 命令的特点
- 只读属性:不允许在加载模块的脚本里面,改写接口的引用指向;即可以改写 import 变量类型为对象的属性值,不能改写 import 变量类型为基本类型的值。
import {str} from "./xxx.js"
str = 'new value'; // error,不允许修改基本类型值
import {obj} from "./xxx.js"
a.foo = "hello"; // a = { name: 'Tom', age: 24 , foo : 'hello' }// 允许修改对象属性值
- 单例模式:多次重复执行同一句 import 语句,那么只会执行一次,而不会执行多次。import 同一模块,声明不同接口引用,会声明对应变量,但只执行一次 import 。
import { str } "./xxx.js";
import { str } "./xxx.js";
// 相当于 import { str } "./xxx.js";
import { str } from "./xxx.js";
import { num } from "./xxx.js";
// 相当于 import { str, num } from "./xxx.js";
export default 命令
- 在一个文件或模块中,export、import 可以有多个,export default 仅有一个。
- export default 中的 default 是对应的导出接口变量。
- 通过 export 方式导出,在导入时要加{ },export default 则不需要。
- export default 向外暴露的成员,可以使用任意变量来接收。
// a.js
export const str = 'string'
const dog = 'Tom'
export default dog
// --------------------------------
// b.js
import {str} from './a.js'
import dog from './a.js'// 不需要括号
// import cat from './a.js'// 使用任意变量接收dog都行
console.log(str , dog)
复合使用
export { str, num} from "./xxx.js";
// 约等于下面两段语句
import { str, num} from "./xxx.js";
export { str, num};
// 改名----------------------------------------
// 普通改名
export { str as foo} from "./xxx.js";
// 将 str 转导成 default
export { str as default } from "./xxx.js";
// 将 default 转导成 foo
export { default as foo } from "./xxx.js";
// 输出所有-----------------------------------------
export * from "./xxx.js";
总结
- ES6 的模块自动开启严格模式,不管你有没有在模块头部加上 use strict;。
- 模块中可以导入和导出各种类型的变量,如函数,对象,字符串,数字,布尔值,类等。
- 每个模块都有自己的上下文,每一个模块内声明的变量都是局部变量,不会污染全局作用域。
- 每一个模块只加载一次(是单例的), 若再去加载同目录下同文件,直接从内存中读取。