JS学习——类

学习内容来源：JavaScript 类、JavaScript 类继承、JavaScript Static 方法

JavaScript 类

ECMAScript 2015，也称为 ES6，引入了 JavaScript 类。
JavaScript 类是 JavaScript 对象的模板。

注意：与函数和其他 JavaScript 声明不同，类声明不会被提升。这意味着您必须先声明类，然后才能使用它。

JavaScript 类的语法

• 使用关键字 class 创建一个类。
• 始终添加一个名为 constructor() 的方法。
• 类中的语法必须以“严格模式”编写。在“严格模式”下，如果您使用变量而不声明它，会得到错误。

// 语法
class ClassName {
  constructor() { ... }
}

// 创建了一个名为 "Car" 的类。该类有两个初始属性："name" 和 "year"。
class Car {
  constructor(name, year) {
    this.name = name;
    this.year = year;
  }
}

注意：JavaScript 类不是对象。它是 JavaScript 对象的模板。

使用类

• 当有了一个类时，可以使用该类来创建对象。
• 在创建新对象时会自动调用构造方法（constructor method）。

// 使用了上面的 Car 类创建了两个对象
let myCar1 = new Car("Ford", 2014);
let myCar2 = new Car("Audi", 2019);

构造方法

构造方法是一种特殊的方法：

• 它必须有确切的名称的 “constructor”
• 创建新对象时自动执行
• 用于初始化对象属性
• 如果没有定义构造方法，JavaScript 会添加一个空的构造方法。

类方法

• 创建类方法的语法与对象方法相同。
• 可以向类方法发送参数

// 语法
class ClassName {
  constructor() { ... }
  method_1() { ... }
  method_2() { ... }
  method_3() { ... }
}

JavaScript 类继承

类继承

如需创建类继承，请使用 extends 关键字。
使用类继承创建的类继承了另一个类的所有方法。

例子：

// 创建 Model 类继承自 Car 类。
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  present() {
    return 'I have a ' + this.carname;
  }
}

// super() 引用父类。通过在 constructor 方法中调用 super() 方法，我们调用了父级的 constructor 方法，获得了父级的属性和方法的访问权限。
class Model extends Car {
  constructor(brand, mod) {
    super(brand);
    this.model = mod;
  }
  show() {
    return this.present() + ', it is a ' + this.model;
  }
}

let myCar = new Model("Ford", "Mustang");
document.getElementById("demo").innerHTML = myCar.show();

Getter 和 Setter

类还允许使用 getter 和 setter。如需在类中添加 getter 和 setter，请使用 get 和 set 关键字。

注意：

• getter/setter 方法的名称不能与属性名称相同。
• 即使 getter/setter 是一个方法，当你想要获取属性值时或者修改属性值时也不要使用括号。

// 为 "carname" 属性创建 getter 和 setter
class Car {
  constructor(brand) {
    this.carname = brand;
  }
  get cnam() {
    return this.carname;
  }
  set cnam(x) {
    this.carname = x;
  }
}

// 创建对象
let myCar = new Car("Ford");

// 获取属性 carname 的值
let name = myCar.cnam

// 修改属性 carname 的值
myCar.cname = "Benz"

JavaScript Static 方法

1、static 类方法是在类本身上定义的。不能在对象上调用 static 方法，只能在对象类上调用。

例子：

class Car {
  constructor(name) {
    this.name = name;
  }
  static hello() {
    return "Hello!!";
  }
}

let myCar = new Car("Ford");

// 可以在 Car 类上调用 'hello()' ：
let txt1 = Car.hello();

// 但不能在 Car 对象上调用，此举将引发错误。
let txt2 = myCar.hello();

2、如果要在 static 方法中使用 myCar 对象，可以将其作为参数发送。

例子：

class Car {
  constructor(name) {
    this.name = name;
  }
  static hello(x) {
    return "Hello " + x.name;
  }
}
let myCar = new Car("Ford");
let txt = Car.hello(myCar);