类是一个模板，它描述一类对象的行为和状态。在ES5中简化为通过构造函数来描述。ES6恢复了过来。
1 class
要使用class关键字去定义一个类，用法如下：
[JavaScript] 纯文本查看 复制代码 class Person{
}
console.log(new Person());//Person {}
console.log(typeof Person);//function
可见Person有构造函数的作用，类似于ES5中的构造函数，但又不仅仅是一个构造函数，因为毕竟连写法都不一样了呢。
2 构造函数
[JavaScript] 纯文本查看 复制代码 class Person{
constructor(name='zhangsan'){
this.name = name;
this.add = function(a,b){
return a+b;
}
}
}
console.log(new Person());
//Person {
name: "zhangsan"，
add:function(){}
}
可见每一个类中的constructor才是对应的ES5中的构造函数本身。其内挂载到this上的属性和方法(函数)都是将来的实例属性和方法。但类的设计者认为方法（函数）应该是所有实例共享即可，没必要每个实例上都存一份，于是有了下面的写法。
3 原型上的函数
[JavaScript] 纯文本查看 复制代码 class Person{
constructor(name='zhangsan'){
this.name = name;
}
add(a,b){
return a + b;
}
}
console.log(new Person());
//Person {name: "zhangsan"}
console.log(Person.prototype.add);
//ƒ add(a,b){return a + b;}
如上写法，add函数即挂载到了原型上，供所有实例共享。注意上边的写法，定义原型上的函数时与constructor平级，且不需要使用,逗号隔开。
4 另外一种往实例上挂载非函数属性的写法
在构造函数外写key = value
[JavaScript] 纯文本查看 复制代码 class Person{
constructor(name='zhangsan'){
this.name = name;
}
age=18;
}
console.log(new Person());
//Person {age: 18, name: "zhangsan"}
这种写法不能接受构造函数的初始化参数，只能通过实例.操作符进行访问和设置。
5访问器get和set
[JavaScript] 纯文本查看 复制代码 class Day{
constructor(day=1){
this.day= day;
}
get proxyDay(){
if(day < 10){
return '0'+this.day;
}
return this.day;
}
set proxyDay(value){
if(value < 31 && value >0){
this.day = value;
}
}
}
var day = new Day();
console.log(day.proxyDay);//1
day.proxyDay = -1;
console.log(day.proxyDay);//1
day.proxyDay = 15;
console.log(day.proxyDay);//15
6 extends关键字 继承
[JavaScript] 纯文本查看 复制代码 class Day{
constructor(day=1){
this.day= day;
}
}
class Holiday extends Day{
/*
constructor(){
super();
}
*/
}
var holiday = new Holiday();
console.log(holiday);//{day:1}
以上代码中Holiday类继承了Day类，Day即为Holiday的父类，Holiday即为Day的子类，Holiday中的构造器已经注释掉了，可依然能得到一个实例{day:1}，可见Holiday默认执行了父类的构造器
子类构造器中可以新增挂载实例属性，且可覆盖继承自父类属性。
[JavaScript] 纯文本查看 复制代码 class Day{
constructor(day=1){
this.day= day;
}
}
class Holiday extends Day{
constructor(){
super();
this.day = 5;
this.hour = 12;
}
}
var holiday = new Holiday();
console.log(holiday);//{day:5,hour:12}
7 static关键字 静态函数
[JavaScript] 纯文本查看 复制代码 class Day{
constructor(day=1){
this.day= day;
}
static add(a,b){
return a + b;
}
}
var day = new Day();
console.log(day.add);//undefined
console.log(Day.add);//ƒ add(a,b){return a + b;}
静态函数只可以通过类Day调用，实例不可调用。
需要注意的是，static只针对函数其作用。 8 静态属性（只能通过类调用的数据类型属性）[JavaScript] 纯文本查看 复制代码 class Day{
constructor(day=1){
this.day= day;
}
static add(a,b){
return a + b;
}
}
Day.dayType = '日子';
var day = new Day();
console.log(day.dayType);//undefined
console.log(Day.dayType);//日子
| 
收藏
淘帖
踩
