ts(typescript)面向对象之静态成员

简介: 在js中,构造函数也是函数,只是特殊的地方在于,构造函数相对于普通函数来说。使用new 的方式来创建,并且构造函数里面是有this的。这个this 的指向是当前构造函数的对象。而普通的函数的this的指向是指向全局window的。

类的静态成员不是ts提出的新语法,而是es6中里面提出的


含义: 静态成员是指,附着在类上的成员(属于某个构造函数的成员),在ts 中的表现是在类中使用 static修饰符进行修饰的成员。例如:


class User {
  // 静态属性
  static users: User[] = [];
  constructor(
    public username: string,
    public password: string) { }
  // 静态方法
  static login() {
    // do something
  }
}


回忆构造函数


在js中,构造函数也是函数,只是特殊的地方在于,构造函数相对于普通函数来说。使用new 的方式来创建,并且构造函数里面是有this的。这个this 的指向是当前构造函数的对象。而普通的函数的this的指向是指向全局window的。


20210124101320289.png


如下例子:


function User(name, password){
  this.name = name;
  this.password = password;
}


上面是一个构造函数,构造函数里面默认是有this的,而且默认返回的是this.例如下面:


function A(){
  var this = {};
  // ... 中间有无数代码
  return this;
}


我们可以把上面的构造函数,实现最上面ts 的功能登录功能,登录是每一个用户都是同样的功能,因为我们可以放在构造函数的属性上,达到共享一个方法,节约内存。


代码如下:


function User(name, password){
  this.name = name;
  this.password = password;
}
User.users = [];
User.login = function(){
   // do something
}


上面的js 写的User类,构造函数,和最上面ts 实现的功能都是一样,我们也可以看一下ts 编译的结果,对比一下。


20210125091023809.png


特性


静态方法中的this


通过上面的回忆构造函数,我们可以得出 es6 或者 ts 中类的static, static就是把成员挂在类上面,在创建类的时候是不能调用的,只有通过类的属性的方式来进行调用。


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


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


静态方法的实用性——单例模式


单例模式适用的范围是,整个系统只要有一个实例存在就行,是唯一个的。这样做的好处是每当使用的时候,不需要重写创建对象,浪费不必要的内存


ts 实现单例模式


经典单例模式


class User {
  private constructor() { }
  static singleStone: User | undefined = undefined;
  static createStone() {
    if (this.singleStone) {
      return this.singleStone;
    } else {
      this.singleStone = new User();
      return this.singleStone;
    }
  }
}


20210125093354130.png


ts特别版本的单例模式


使用构造函数私有化,单例只读属性即可。如下


class User {
  private constructor() { }
  static readonly singleStone: User = new User();
}


20210125093639849.png

相关文章
|
2月前
|
JavaScript
typeScript基础(3)_ts函数默认值和可选参数
本文介绍了在TypeScript中如何使用函数的默认值和可选参数。展示了如何为函数参数指定默认值,使得在调用函数时可以省略某些参数,以及如何定义可选参数。
116 2
|
17天前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
46 0
|
17天前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
22 0
|
2月前
|
JavaScript 前端开发
typeScript基础(8)_ts类型断言
本文介绍了TypeScript中的类型断言,它用于在编译时告诉TypeScript某个对象具有特定的类型,即使它看起来不具备。类型断言可以用来访问一个类型上存在而另一个类型上不存在的属性或方法。需要注意的是,类型断言并不会在运行时改变JavaScript的行为,因此如果断言不当,运行时仍然可能出错。文章还提醒避免将类型断言为`any`类型或进行多重断言。
30 1
|
6月前
|
JavaScript
【TS】You are currently running a version of TypeScript which is not officially supported by @typesc
【TS】You are currently running a version of TypeScript which is not officially supported by @typesc
174 2
|
6月前
|
JavaScript 前端开发 开发者
JavaScript(JS)和TypeScript(TS)的区别
JavaScript(JS)和TypeScript(TS)的区别
107 0
|
6月前
|
JavaScript 前端开发 Ubuntu
TypeScript笔记(1)——环境配置与第一个ts程序
TypeScript笔记(1)——环境配置与第一个ts程序
57 0
|
17天前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
28 0
|
17天前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
存储 JavaScript
typeScript进阶(11)_元组类型
本文介绍了TypeScript中的元组(Tuple)类型,它是一种特殊的数组类型,可以存储不同类型的元素。文章通过示例展示了如何声明元组类型以及如何给元组赋值。元组类型在定义时需要指定数组中每一项的类型,且在赋值时必须满足这些类型约束。此外,还探讨了如何给元组类型添加额外的元素,这些元素必须符合元组类型中定义的类型联合。
42 0