# Class 的基本语法
# 定义一个类
注意，每个类内部都有constructor属性，实例化一个类时使用new关键字。
- 利用
class关键字定义
class Student {
constructor(name) {
this.name = name;
}
sayHi() {
console.log(`Hello, I am ${this.name}`);
}
}
let stu1 = new Student('jack');
stu1.sayHi();
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 利用表达式定义一个类
//注意：myClass可以在类的外部使用，Student只能在类的内部使用
const myClass = class Student {
constructor(name, age) {
this.name = name;
this.age = age;
}
}
console.log(myClass); //可以在外部使用
// console.log(Student); //只能在类的内部使用，在外部使用会报错，提示Student is not defined
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
如果在类的内部没用到第二个类名，可以省略。
const yourClass = class {
constructor(stuName, stuAge) {
this.stuName = stuName;
this.stuAge = stuAge;
}
}
1
2
3
4
5
6
2
3
4
5
6
- 属性表达式
类的属性名，可以采用跟对象相似的表达式模式，加方括号。
let methodName = 'sayHi';
class Student {
constructor(name, age) {
this.name = name;
}
//使用属性表达式
[methodName]() {
console.log('Hello everyone');
}
}
let stu1 = new Student();
console.log(stu1.sayHi);
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Class的注意点
- 定义一个类后，不存在变量提升。
- 类的内部自动默认使用严格模式。
- ES6的类实际上是ES5构造函数的包装，函数的特性被其继承，利用.name属性，返回class关键字后的类名。
# 利用原型思想理解Class
ES6中的Class，就是换了一种形式来表示原型，只是形式上更加规范，但是本质上不变。所以，从原型的角度来理解class的设计模式，是必要的。
回想ES5原型构造对象时使用的原型、构造函数组合模式创建对象，这种模式很好的利用了各自的优点
class Student`可以认为是一个函数。
- 构造函数模式：内部
constructor()是构造函数 ==> 保证了实例对象的独立性 - 原型模式：在
constructor()外，在class内部声明的属性方法，执行后设置在实例的原型上 ==> 保证了数据的共享性
- 构造函数模式：内部
class Student {
constructor(name, age, gender) {
this.name = name;
this.age = age;
this.gender = gender;
}
sayHi() {
console.log(`Hello everyone, I am ${this.name}, A ${this.age} years old ${this.gender}`);
}
}
let stu1 = new Student('jack', 18, 'boy');
stu1.sayHi();
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# this 指向
如上例中class Student为一个构造函数，所以内部this默认指向该类的实例对象。
# 在class中使用 getter 与 setter
类上的getter与setter相当于对绑定属性的读取和修改。
# Module 的基本语法
两个关键字的使用：
export导出
- 默认导出：
export default - 指定导出：使用
export关键字
import导入
- 按需导入：
import { fn } from './...' - 按默认导入：
import fn from './...'即导入该文件export default部分 - 文件整体导入：
import from './...'导入整个文件或模块