提起来面向对象这个概念,可能就老生常谈了,从我们接触JavaScript的时候,老师,课本就经常说一句话,在js中,一切皆对象!那么到底什么是面向对象呢?
想要面向对象,操作对象;那么首先我们需要有一个对象,那如何才能创造出一个对象?那就必须先定义一个类;所谓何为类?我们可以把它看做是一个模型,根据不同的模型创造出不同的东西,比如 人类的DNA会创造出一个人;猫咪的DNA会创造出一只猫咪;那么DNA就是这个类!
在TypeScript中关于类和js的相似,通过使用class来定义一个类。主要包含两个属性:属性和方法
定义实例属性-直接定义的属性就是实例属性,我们需要通过实例化得对象来进行属性的访问
class Person {
name: string = 'xiaomi'
}
const per = new Person()
console.log(per.name) //xiaomi
静态属性 / 类属性 --- 在属性前使用static关键字来定义类属性/静态属性,需要通过类来访问
class Person {
static age: number = 18
}
const per = new Person()
// console.log(per.age) //error 其实也不是error是undefined,我的ide会自动报红
console.log(Person.age) //18
只读属性
class Person {
name: string = '李青'
readonly gender: string = '男'
}
const per = new Person()
console.log(per.name) //小米
console.log(per.gender) //'男'
per.name = '艾希'
per.gender = '女' //error
console.log(per.name) //艾希
console.log(per.gender) //'女'
也许你会看到控制台是已经修改成功了的,可能对这个进行了怀疑,但是请不要怀疑,请看你的控制台
还可以扩展一下,静态的只读属性
class Person {
static readonly id: string = 'B1502653265' //静态的只读属性
}
const per = new Person()
console.log(Person.id)
实例化方法
class Person {
name: string = '李青'
static age: number = 26;
getQSkill(): void {
console.log(this.name) //在这里面我们可以用this来访问到其他的属性,比如name
console.log(Person.age) //但是对于静态属性,我们不能通过this访问,需要通过类来进行访问
console.log('q技能天音波,回音击')
}
}
const per = new Person()
per.getQSkill()
打印:
静态方法
class Person {
static getWSkill(): void {
console.log('w技能金钟罩')
}
}
const per = new Person()
// per.getWSkill() //同样的,静态方法,是不能通过实例化对象来调用的,会告诉你这个方法是未定义
Person.getWSkill() //success
先到这里,下篇继续。。。