TypeScript17：静态成员

一、什么是静态成员

静态成员是指，附着在类上的成员（属于某个构造函数的成员）

class User {
  constructor(
    public loginId: string,
    public loginPwd: string,
    public name: string,
    public age: number) { }
  
  static login(loginId: string,loginPwd: string): User | undefined {
    console.log('login');
    return undefined
  }
}
const result = User.login('admin', '123456'); // login

使用 static 修饰的成员是静态成员，可以直接用类名调用。

实例成员：对象成员，属于某个类的对象；

静态成员：非实例成员，属于某个类。

class User {
  static users:User[] = []
  constructor(
    public loginId: string,
    public loginPwd: string,
    public name: string,
    public age: number) { 
      // 需要将新建的用户加入到数组中
      User.users.push(this)
    }
  static login(loginId: string,loginPwd: string): User | undefined {
    console.log('login');
    return User.users.find(u => u.loginId === loginId && u.loginPwd === loginPwd)
  }
  sayHello() {
    console.log(`大家好，我叫${this.name}，今年${this.age}岁，我的账号是${this.loginId}`);
  }
}
const u1 = new User('u1', '123','张三',12); // 新建一个用户
const u2 = new User('u2', '123','李四',13); // 新建一个用户
const u3 = new User('u3', '123', '王二麻', 14); // 新建一个用户
const result = User.login('u1', '123'); // 模拟登录
if (result) {
  result.sayHello() // 大家好，我叫张三，今年12岁，我的账号是u1
} else { 
  console.log('登录失败');
}

上面代码中， User 作为一个用户类，每新建一个用户需要通过 new 方法来创建。

新建的用户需要在类内部保存到数组中， 以便登陆时通过 login 来校验账户和密码，这时的 users 应为一个静态成员。如果为一个实例成员，则会导致每创建一个用户， users 的值都会发生变化，无法进行登录校验。

二、静态方法中的 this

实例方法中的 this 指向的是当前对象；

静态方法中的 this 指向的是当前类。

上面例子中，类中的登录方法可以通过 this 访问 users ，效果一致。

static login(loginId: string,loginPwd: string): User | undefined {
  return this.users.find(u => u.loginId === loginId && u.loginPwd === loginPwd)
}

三、设计模式：单例模式 

单例模式：某些类的对象，在系统中最多只能有一个，为了避免开发者造成随意创建多个类对象的错误，可以使用单例模式进行强约束。

通过静态方法创建一个对象：  this 指向棋盘 Board 

class Board { 
  width: number = 500;
  height: number = 700;
  init() { 
    console.log("初始化棋盘");
  }
  private constructor() { }
  private static _board?: Board;
  static createBoard(): Board { 
    // 判断私有的_board是不是已经有值，如果有值，返回该棋盘对象；
    // 如果没有值，新建一个棋盘对象返回
    if (this._board) {
      return this._board
    }
    this._board = new Board();
    return this._board;
  }
}
const board1 = Board.createBoard(); // 返回一个棋盘对象
const board2 = Board.createBoard(); // 返回一个棋盘对象
board1.init() // 初始化棋盘
console.log( board1 === board2); // true

class Board { 
  width: number = 500;
  height: number = 700;
  init() { 
    console.log("初始化棋盘");
  }
  private constructor() { }
  static readonly singleBoard = new Board();
}
const board1 = Board.singleBoard; // 返回一个棋盘对象
const board2 = Board.singleBoard; // 返回一个棋盘对象
board1.init() // 初始化棋盘
console.log( board1 === board2); // true

区别：下面这种写法在最开始就创建棋盘，而不是在需要的时候创建；创建棋盘时候没有办法写很多代码，例如异步等。