小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
序言
最近在专研TS相关的内容,TS类是TS里的一大重点,其中的知识点要点也非常的多,今天我们由浅入深,一步步消化一下TS中的类。
什么是类
类的实质是一种引用数据类型,它是一种复杂的数据类型。因为它的本质是数据类型,而不是数据,所以不存在于内存中,不能被直接操作,只有被实例化为对象时,才会变得可操作。 在TS中,如何辨别一个类呢,他有两大特性。
- 由 class 关键字 定义。
- 有自己的成员属性。
- 有自己的构造函数
class People {
name: string; // 成员属性
constructor(name: string) { // 类的构造函数
this.name = name;
}
}
以上例子,我们使用 class 关键字申明了一个 People类,定义了一个 name 的成员属性,还要给他定义一个构造函数,以便让他可以进行实例化。以上代码编译为 ES5 的代码如下。
var People = /** @class */ (function () {
function People(name) {
this.name = name;
}
return People;
}());
类的静态属性和成员属性
类的静态属性和成员属性有什么区别呢?相信很多人都知道说,静态属性不需要实例化就可以使用,那么这是为什么呢,我么来看一下静态属性编译后的ES5代码。
class People {
static age: number = 25;
name: string; // 成员属性
constructor(name: string) { // 类的构造函数
this.name = name;
}
}
//编译后
var People = /** @class */ (function () {
function People(name) {
this.name = name;
}
Person.age = 25;
return People;
}())
我们通过观察发现,成员属性是在类的构造函数内,所以只能通过实例化,才会返回,以供访问,但是静态属性是直接挂在构造函数上,可以直接通过构造函数访问。
类的静态方法和成员方法
class People {
static askAge(){
return 25
}
name: string; // 成员属性
constructor(name: string) { // 类的构造函数
this.name = name;
}
say(words: string) :void { // 定义成员方法
console.log(`我是${this.name} `);
}
}
//编译后
"use strict";
var People = /** @class */ (function () {
function People(name) {
this.name = name;
}
People.askAge = function () {
return 25;
};
People.prototype.say = function (words) {
console.log(`我是${this.name} `);
};
return People;
}());
我们观察上方的出结论,类的成员方法是挂载在构造函数的原型对象上面,而静态方法是添加到构造函数上。
类成员方法重载
class Person {
constructor(public name: string) {}
say(): void;
say(words: string): void;
say(words: number): void;
say(words?: any) :void { // 方法重载
if(typeof words === "string") {
console.log(`${this.name} says:${words}`);
} else if(typeof words === 'number') {
console.log(`${this.name} says:${words}`);
}else {
console.log(`${this.name} says:Nothing`);
}
}
}
let p1 = new Person("Semlinker");
p1.say();
p1.say("Hello TS");
p1.say(123);
上例中,我们定义了一个成员方法 say ,他可以不接受参数,也可以接受 string 类型参数,还可以接受 number 类型函数 ,函数内可以根据类型的不同,执行不同的逻辑。