JavaScript类的声明以及使用

类的声明以及使用

声明

先声明，再访问 （函数声明会提升，类声明不会）

类关键字

class YourName {

// 类的主体

}

类表达式

var YourName = class {

/ /类的主体

}

类的实例化

var myUser = new YourName();

构造方法constructor()

constructor 是一种用于创建和初始化class创建的对象的特殊方法

在一个类中只能有一个名为 “constructor” 的特殊方法。 （否则报SyntaxError 错误）

如果没有显式指定构造方法，则会添加默认的 constructor 方法。

如果不指定一个构造函数(constructor)方法, 则使用一个默认的构造函数(constructor)。

class User {
    constructor(name) {
        		name; // => 'Fundebug'
        		this.name = name;
    		}
}

var user = new User("Fundebug");

类公有域（Public）

都可以访问该实例字段，实例方法

class ClassWithPrivateField {
  publicField
}

class ClassWithPrivateMethod {
  publicMethod() {
    return 'hello world'
 }
}

类私有域（Private）

只有定义该私有字段，方法的类能访问该字段，方法

class ClassWithPrivateField {
  #privateField
}

class ClassWithPrivateMethod {
  #privateMethod() {
    return 'hello world'
 }
}

静态（static）

类（class）通过 static 关键字定义静态方法。不能在类的实例上调用静态方法，而应该通过类本身调用。这些通常是实用程序方法，例如创建或克隆对象的功能。

        class ClassWithStaticMethod {

          static staticProperty = 'someValue';
          static staticMethod() {
            return 'static method has been called.';
          }

        }
        
        var StaticMethod = new ClassWithStaticMethod();

        console.log(ClassWithStaticMethod.staticProperty);
        // output: "someValue"
        console.log(ClassWithStaticMethod.staticMethod());
        // output: "static method has been called."

        console.log(StaticMethod.staticProperty);
        //underfind
        console.log(StaticMethod.staticMethod());
        //报错Uncaught TypeError: StaticMethod.staticMethod is not a function

静态私有字段

只有定义静态私有字段的类可以访问该字段

        class ClassWithStaticMethod {

            static #staticProperty = 'someValue';
            static staticMethod() {
                return ClassWithStaticMethod.#staticProperty;
            }

        }

        var StaticMethod = new ClassWithStaticMethod();

        console.log(ClassWithStaticMethod.staticProperty);
        // underfind
        console.log(ClassWithStaticMethod.staticMethod());
        // someValue

静态私有方法

静态私有方法也是在类里面而非实例中调用的。和静态私有字段一样，它们也只能在类的声明中访问。

        class ClassWithStaticMethod {

            static #staticProperty = 'someValue';
            static #staticMethod() {
                return ClassWithStaticMethod.#staticProperty;
            }

            static staticShow_staticMethod(){
                return ClassWithStaticMethod.#staticMethod()
            }
            Show_staticMethod(){
                return ClassWithStaticMethod.#staticMethod()
            }

        }

        var StaticMethod = new ClassWithStaticMethod();

        console.log(ClassWithStaticMethod.staticShow_staticMethod());
        // someValue
        console.log(StaticMethod.Show_staticMethod());
        // someValue

继承（extends）

extends关键字用于类声明或者类表达式中，以创建一个类，该类是另一个类的子类

子类可以继承父类中的公有成员

父类的私有成员不会被子类继承

//父类
class User {
    name;

    constructor(name) {
        this.name = name;
    }

    getName() {
        return this.name;
    }
}

//子类
class ContentWriter extends User {
    posts = [];
}

//子类实例
const writer = new ContentWriter("John Smith");

//子类可以访问父类中的公有字段和方法
writer.name; // => 'John Smith'
writer.getName(); // => 'John Smith'

//同时也有自己的字段
writer.posts; // => []

super

super关键字用于访问和调用一个对象的父对象上的函数

在构造函数中使用时，super关键字将单独出现，并且必须在使用this关键字之前使用。super关键字也可以用来调用父对象上的函数

constructor()中的super()

//父类
class Polygon {
  constructor(height, width) {
    this.name = 'Rectangle';
    this.height = height;
    this.width = width;
  }
  sayName() {
    console.log('Hi, I am a ', this.name + '.');
  }
  get area() {
    return this.height * this.width;
  }
  set area(value) {
    this._area = value;
  }
}


//子类
class Square extends Polygon {
  constructor(length) {
    this.height; // ReferenceError，super 需要先被调用！

    // 这里，它调用父类的构造函数的,
    // 作为Polygon 的 height, width
    super(length, length);

    // 注意: 在派生的类中, 在你可以使用'this'之前, 必须先调用super()。
    // 忽略这, 这将导致引用错误。
    this.name = 'Square';
  }
}

\

调用父类上的静态方法

super相当于父类

class Rectangle {
  constructor() {}
  static logNbSides() {
    return 'I have 4 sides';
  }
}

class Square extends Rectangle {
  constructor() {}
  static logDescription() {
    
    //super相当于父类 Rectangle
    return super.logNbSides() + ' which are all equal';
  }
}
Square.logDescription(); // 'I have 4 sides which are all equal'