成员可见性
- public 类外可见
- private 类内可见 #var 真私有属性
- protected 子类和自己可见
// public
class Person1 {
public friend?: Person
constructor(public name: string, friend?: Person) {
this.friend = friend
}
}
const p1 = new Person1('jack')
p1.friend // undefined
// private
class Person2 {
private friend?: Person
constructor(public name: string, friend?: Person) {
this.friend = friend
}
xxx() {
this. friend // TODO: 这里是可以使用的
}
}
const p2 = new Person2('jack', p1)
p2.friend // TODO: typescript 报错
// protected
class Person3 {
private friend?: Person
constructor(public name: string, friend?: Person) {
this.friend = friend
}
xxx() {
this. friend // TODO: 这里是可以使用的
}
}
class User extends Person3 {
constructor(public id: number, name: string, friend?: User) {
super(name, friend)
}
yyy() {
this.friend // TODO: 子类这里是可以使用的
}
}
const u = new User(1, 'jack')
u.friend // TODO: typescript 报错
但是这些代码始终都会变成 JS
那么说，TS 提供的这三个关键词还有用嘛？
显然易见：因为类型擦除，在 JS 中，你又可以随心所欲了
但是我就想要私有属性怎么办，那就使用 JS 的#
class Person {
#friend?: Person
constructor(public name: string, friend?: Person) {
this.#friend = friend
}
}
const p = new Person('jack')
p.friend // TODO: typescript 报错
static
static 的意思是这个属性是通过类名访问的
class Person {
xxx = 1
name: string
constructor(name: string) {
this.name = name
}
}
Person.xxx // TODO: typescript 报错
所以为了解决上面的问题，面向对象又加了一个关键字，static
class Person {
static xxx = 1
name: string
constructor(name: string) {
this.name = name
}
}
Person.xxx // TODO: 可以使用了
这就叫做静态属性
这里在提示一下 name 叫做成员属性
什么区别？静态属性是代码执行到哪一行的时候就初始化了，而成员属性是实例化后才初始化的
但是使用 staic 的时候需要注意一点
他不能在固有属性上使用
class Person {
static name: string // TODO: 报错啦
name: stirng
constructor(name: string) {
this.name = name
}
}
为什么会这样呢？
这又要追寻到 JS 的问题了：JS 中的 class 是用函数实现的
怎么证明，用 typeof：
class 是个 function，且自然自带 name，这样看来，JS 中的 class 就是辣鸡，看起来实现了 class，但又好像是个残废，所以有关固有属性的都会报错
class Person {
static length: string // TODO: 报错啦
static prototype: string // TODO: 报错啦
static arguments: string // TODO: 报错啦
static caller: string // TODO: 报错啦
name: stirng
constructor(name: string) {
this.name = name
}
}
static block
需求是这样：我们想记录这个功能被创建过多少次？
如果是 JS 程序员，那么很简单
let count = parseInt(loocalStorage.getItem('count') || 0)
count += 1
如果是在 class 里面那就很难做到，除非~再加个语法
class Foo {
static #count = 0
static { // TODO: 注意这里，这种语法代表类在创建的时候会执行
const count = loadFrimLocalStorage() || 0
Foo.#count += count
}
constructor() {
console.log(Foo.#count)
}
}
类和泛型
class Hash<K, V> {
map: Map<K, V> = new Map()
set(key: K, value: V) {
this.map.set(key, value)
}
get(key: K) {
return this.map.get(key)
}
}
const h = new Hash<string | number, string | number>()
h.set('name', 'hi')
g.get('name')
其实上面这个 Hash 就是一个 Map，那么直接用继承就好了
class Hash<K, V> extends Map<K, V> {
destory() {
this.clear()
}
}
抽象类
interface A {}
class B {}
interface 只能写类型，不写实现
class 又写类型，又写实现
人都喜欢折中
能不能有的实现，有的不实现呢？
为了应对这个需求，又来到了面向对象熟悉的操作，加关键字， abstract
abstract class Person {
a() {
console.log('a')
}
abstract name: string
abstract b: () => number
}
这就是抽象类，请注意这个抽象类是不能直接使用的！
const p = new Person()
// TODO: 报错：Cannot Create an Instance of an abstract class.ts
把类当作参数（常用）
把类作为参数，而不是把对象作为参数
class Person {}
function fn(X: Person) { // TODO: typescript 报错
const p = new X()
}
fn(Person)
怎么解决呢？下面两种方式
// 第一种：
function fn1(X: typeof Person) {
const p = new X()
}
// 第二种：
function fn2(X: new (name: string) => Person) {
const p = new X()
}
看起来很奇怪把~
个人对 class 的看法
有这么多关键字，有这么多语法，搞的像背书一样，每个关键字是什么意思，怎么组合，该怎么声明类型，全都是固定的，都是套路，都是模版，有什么好处呢？
那就是工业化，千人一面，大家写出来的代码都是一样的，即使你是新手，你也能看懂老手的代码，大家沟通起来就简单多了。
如果说面向对象适合前端就罢了，但是实际上来看，虽然以前转向前端的都是面向随想那帮人，他们自然而然在写前端时候会加入各种组合，各种设计模式，
但是从 ES6 开始，前端就希望代码更加简化，希望更多的函数和对象组合，虽然这个时候出了真正的关键词 class，但是很多前端就是不用，你 class 的功能我全都可以用函数和对象来实现，直到今年 react 和 vue 都出了 hooks API，他们连 this 都不用了，更不用说 new 了，所以事实证明，不用 class 也能写出很好的程序。
