巩固js（一）词法结构-保留字二

保留字二

ECMAScript5保留的关键字

class const enum export extends import super

一．class

ES6引入了class（类）这个概念，通过class关键字可以定义类。

class Animal{
	constructor(name,sex){
		this.name = name;
		this.sex = sex
	}
	
	likeAnimal(){
		return 'I like' + this.name
	}
}

注：

1. 定义类的方法时候，前面不需要加function关键字，方法之间不需要用逗号隔开
2. 类声明不会提升，函数声明会提升
3. 类和模块的内部，默认使用严格模式
4. 生成类的实例对象，使用new命令
5. ES6不提供私有方法（可以通过symbol实现）–后面会讲解
6. ES6同样不提供私有属性（目前一个提案在属性名之前加#表示为私有属性，）
7. 类的方法内部如果含有this，默认指向类的实例（单独使用此方法，很可能报错，所处环境不一样，this的指向不同）
8. name属性总是返回在class关键字后面的类名

class Animal{}
Animal.name //”Animal”

9. Object.assign(类名.prototype,{})方法可以一次向类中添加多个方法
10. 类的属性名可以使用表达式
11. 可以通过实例的__proto__属性为class添加方法（不推荐）

constructor:构造函数，用于初始化class并创建一个对象（是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor，如果没有显式定义，一个空的constructor方法会被默认添加）

二．const

const与var性质相同，声明变量，但是const声明变量时必须同时赋值，并且不允许修改（可以用来定义常量）
注：

1. 只在块级作用域起作用
2. 不存在变量提升（先定义后使用）
3. 不可重复声明同一变量
4. 声明引用类型的常量时，注意传址赋值

三．enum

枚举类型：将变量的值一一列举出来，变量限于列举出来的值得范围内取值（仅将此作为关键字）

四．export和import

export命令

模块是独立的文件，该文件内部的所有的变量外部都无法获取。如果希望获取某个变量，必须通过export输出

//exportStudy.js
var a = 1;
var b = 2;
var c = 3;

export{a,b,c};

除了可以输出变量，还可以输出类或者函数

export function add(x,y){
	return x + y;
}

同样可以批量输出，要包含在大括号里，也可以用as重命名

function a1(){}
function a2(){}

export {
	a1 as functionA1,
	a2 as functionA2
}

注：export命令规定的是对外的接口，必须与模块内部的变量建立一一对应关系。（实质是在接口名与模块内部变量之间，建立了一一对应的关系）

//写法一
export var a = 1;

//写法二
var a = 1;
export {a};

//写法三
var a = 1;
export {a as b};

//class与函数
export function a() {};//正确
function a() {}
export a;//报错
export {a};//正确

//报错
export 1;

//报错
var a = 1;
export a;

可以理解为export是导出一个变量，而不是导出一个值。（每个文件是一个模块，每个模块是独立的，对于其他文件来说，他们是未知的，要让外界知道的需要暴露出来，要暴露出来的东西需要通过名字来）

参考：export与import

export语句输出的接口，都是和其对应的值是动态绑定的关系，即通过该接口取到的都是模块内部实时的值，

注：export模块可以处于模块中的任何位置，但是必须在模块顶层，不能在其他作用域

import命令

export定义了模块的对外接口后，其他js文件就可以通过import来加载这个模块

import {a,b,c} from './exportStudy';

function la(){
	return a + b + c;
}

import命令接受一对大括号，里面指定要从其他模块导入的变量名，必须与被导入模块对外接口的名称相同

如果想重新给导入的变量一个名字，可以使用as关键字

import {a as d} from './exportStudy'

import后的from可以指定需要导入模块的路径名，可以是绝对路径，也可以是相对路径，.js可以省略，如果只有模块名，没有路径，需要有配置文件指定。

注：
1.import有提升效果，会提升到整个模块的头部，首先执行（是在编译阶段执行的）
2.import是静态执行的，不能使用表达式和变量（需要放在除import之外所有代码之前）

export default

之前的例子中，import导入时都需要知道模块中所要加载的变量名或函数名，但是如果不想阅读源码，只想使用接口的时候，可以使用export default命令，为模块指定输出

//export-default.js
export default function(){
	console.log('123');
}

其他模块加载该模块时，import命令可以为该匿名函数指定任意名字。

import la from './export-default';

la() //123


//export default
export default function ha(){

}

import ha from 'ha';


//export
export function la(){

}

import {la} from 'la';

注：import和export只能在模块的顶层，不能在模块之中，否则会语法报错

import()

因为require是运行时加载，所以import命令没有办法代替require的动态加载功能，所以引入了import()函数，完成动态加载

动态加载：是按需加载，等需要某个特定js的时候，再加载该js，所以可以在js里面写逻辑，根据自己的需要去加载对应的js文件

import(specifier)

specifier用来指定所要加载的模块的位置，import能接受什么参数，import()可以接受同样的参数

import()返回一个promise对象。

e.g

const main = document.querySelector('main');

import(`./section-modules/${someVariable}.js`)
  .then(module => {
    module.loadPageInto(main);
  })
  .catch(err => {
    main.textContent = err.message;
  });


按需加载：可以按钮绑定点击事件，当用户点击该按钮时，再加载对应的模块

button.addEventListener(‘click’,function(){
	import('./lala.js')
	.then(lala =>{
		console.log(‘lalalala’)
	})
	.catch(error => {
	
	})
})

条件加载：可以放在条件判断语句中，实现条件加载

If(xxx){
	import('moduleA').then(...);
}else{
	import('moduleB').then(...);
}

五．extends和super

extends用于类声明或类表达式中，来创建一个类，该类是另一个类的子类

class childClass extends ParentClass{}

注：继承的.prototype必须是一个Object或者null

super用于访问和调用一个对象的父级对象上的函数。

（super和this一起学习讲解，单出文章）