2.2JavaScript类型之类(Class)

1.类定义

类声明、类表达式都是 Function 类型的实例。

1.1类声明

class 类名 {
  //类体
}

1.2类表达式

注意：命名类表达式的右侧依然是类表达式，不是类声明。

//命名类表达式
const C = class C2 {
  //类体
};

//匿名类表达式
const C = class {
  //类体
};

注意：命名类表达式的类名 C2 的作用域仅仅为类体，不可以在类体外使用。

const C = class C2 {
  f() {
    return 1;
  }
};
console.log(new C().f());   // 1 
console.log(new C2().f());  // 报错

2.成员定义

注意：JavaScript 语言不支持成员常量。

//类
class 类名 {
  //静态字段
  static a = 1;
  
  //静态getter
  static get a() {
  }

  //静态setter
  static set a(形参) {
  }

  //静态方法
  static f1() {
  }

  //静态初始化块
  static {
  }

  //新实例字段
  b = 1;

  //实例getter
  get b() {
  }

  //实例setter
  set b(形参) {
  }
  
  //实例方法
  f2() {
  }

  //构造方法
  constructor(b) {
    //老实例字段
    this.b = b
  }
}

//对象字面量
const 对象名 = {
  //数据属性
  a: 1,
  
  //实例getter
  get a() {
  },

  //实例setter
  set a(形参) {
  },

  //老方法
  f: function() {
  },

  //新方法
  f() {
  }
};

3.继承

3.1方法继承

一个子类只可以直接继承自一个父类，不可以直接继承自多个父类。

子类会直接继承父类中可继承的方法，间接继承祖父类中可继承的方法，以此类推，直至没有可继承的方法。

注意：从父类中继承过来的方法无需在子类中重新声明，否则会发生覆盖。

//类声明
class 子类名 extends 父类名 {
  //子类体
}

//类表达式
//命名类表达式
const C = class C2 extends 父类名 {
  //子类体
};

//匿名类表达式
const C = class extends 父类名 {
  //子类体
};

3.2方法覆盖(Override)

如果从父类中继承过来的方法在子类中重新声明，则在子类中重新声明的方法会覆盖从父类中继承过来的方法。

注意：只需要方法名相同，就会发生覆盖。

注意：覆盖并不会影响父类中原来的方法。

class A {
  f() {
    return 1;
  }
}

class B extends A {
  f() {
    return 2;
  }
}

console.log(new B().f());  // 2

3.3super关键字

super 关键字用于在子类中调用父类的方法。

//调用父类的方法
//[]方式
super[静态访问器属性名]
super[静态方法名]()
super[实例访问器属性名]
super[实例方法名]()

//.方式
super.静态访问器属性名
super.静态方法名()
super.实例访问器属性名
super.实例方法名()

//调用父类的构造方法
//不传递参数(注意:圆括号不可以省略)
super()
//传递指定参数
super(参数)

//调用父对象字面量的方法
//[]方式
super[访问器属性名]
super[方法名]()

//.方式
super.访问器属性名
super.方法名()

4.创建对象

4.1类创建对象方式

//无实参(因为没有实参传递，则可以省略圆括号，一般不推荐省略）
const 对象名 = new 类名();

//有实参
const 对象名 = new 类名(实参);

4.2对象字面量创建对象方式

注意：赋值运算符 = 右侧期望的是表达式，所以右侧的花括号 {} 处于表达式上下文，表示的是对象字面量表达式的开始和结束。如果花括号 {} 处于语句上下文，则表示的是块语句的开始和结束。

注意：最后一个属性(或方法)后面允许有逗号 ,，这样要添加一个新属性(或新方法)时很方便。

const 对象名 = {};

4.3Object()构造方法创建对象方式

Object() 构造方法创建方式目前已很少使用，而类创建方式和对象字面量创建方式非常流行。

const 对象名 = new Object();
对象名.属性名 = 值;
对象名.方法名 = function() {
  //方法体
};

4.4方法重载(Overload)

JavaScript 语言不支持方法重载。

4.5this关键字

如果在类上下文，则 this 关键字指向当前类。

如果在对象上下文，则 this 关键字指向当前对象。

5.访问成员

[] 方式用于使用表达式的返回值作为成员名。

//外部调用
//类
类名[静态字段名]
类名[静态访问器属性名]
类名[静态方法名]()
对象名[实例字段名]
对象名[实例访问器属性名]
对象名[实例方法名]()

//对象字面量
对象名[数据属性名]
对象名[访问器属性名]
对象名[方法名]()

//内部调用
//类
//类上下文
this[静态字段名]
this[静态访问器属性名]
this[静态方法名]()
//实例上下文
this[实例字段名]
this[实例访问器属性名]
this[实例方法名]()

//对象字面量
//实例上下文
this[数据属性名]
this[访问器属性名]
this[方法名]()

方括号 [] 内可以为任何 JavaScript 表达式，表达式的返回值的类型只可以为 字符串类型(包括空字符串) 或者 符号类型。

//类创建对象方式
const name = "b";

class C {
  "a" = 1;
  "1" = 2;
  "first name" = 3;
  "first-name" = 4;
  [name] = 5;
}

const o = new C();
o["a"];           // 语法糖：o.a;
o["1"];           // 语法糖：o[1];
o["first name"];  // 无语法糖
o["first-name"];  // 无语法糖
o["b"];           // 语法糖：o.b;
o[name];

//对象字面量创建对象方式
const name = "b"; 

const o = {
  "a": 1,
  "1": 2,
  "first name": 3,
  "first-name": 4,
  [name]: 5
};

o["a"];           // 语法糖：o.a;
o["1"];           // 语法糖：o[1];
o["first name"];  // 无语法糖
o["first-name"];  // 无语法糖
o["b"];           // 语法糖：o.b;
o[name];

//Object()构造方法创建对象方式
const name = "b";

const o = new Object();
o["a"] = 1;           // 语法糖：o.a = 1;
o["1"] = 2;           // 语法糖：o[1] = 2;
o["first name"] = 3;  // 无语法糖
o["first-name"] = 4;  // 无语法糖
o["b"] = 5;           // 语法糖：o.b = 5;
o[name] = 6;

. 方式只支持 JavaScript 标识符。

//外部调用
//类
类名.静态字段名
类名.静态访问器属性名
类名.静态方法名()
对象名.实例字段名
对象名.实例访问器属性名
对象名.实例方法名()

//对象字面量
对象名.数据属性名
对象名.访问器属性名
对象名.方法名()

//内部调用
//类
//类上下文
this.静态字段名
this.静态访问器属性名
this.静态方法名()
//实例上下文
this.实例字段名
this.实例访问器属性名
this.实例方法名()

//对象字面量
//实例上下文
this.数据属性名
this.访问器属性名
this.方法名()