TS中的类,你真的了解吗?(上)

930 阅读2分钟

小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。

序言

最近在专研TS相关的内容,TS类是TS里的一大重点,其中的知识点要点也非常的多,今天我们由浅入深,一步步消化一下TS中的类。

什么是类

类的实质是一种引用数据类型,它是一种复杂的数据类型。因为它的本质是数据类型,而不是数据,所以不存在于内存中,不能被直接操作,只有被实例化为对象时,才会变得可操作。 在TS中,如何辨别一个类呢,他有两大特性。

  1. 由 class 关键字 定义。
  2. 有自己的成员属性。
  3. 有自己的构造函数
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 类型函数 ,函数内可以根据类型的不同,执行不同的逻辑。