TypeScript（5）类、继承、多态
<h1 id="前言">前言</h1><p>对于传统的 JavaScript 程序我们会使用<code>函数</code>和<code>基于原型的继承</code>来创建可重用的组件，但对于熟悉使用面向对象方式的程序员使用这些语法就有些棘手，因为他们用的是基于类的继承并且对象是由类构建出来的。 从 ECMAScript 2015，也就是 ES6 开始， JavaScript 程序员将能够使用基于类的面向对象的方式。 使用 TypeScript，我们允许开发者现在就使用这些特性，并且编译后的 JavaScript 可以在所有主流浏览器和平台上运行，而不需要等到下个 JavaScript 版本。<br>
</p>
<h1 id="类">类</h1>
<pre><code>// 类
(() => {
class Person {
// 声明属性
name: string
age: number
gender: string
// 构造方法
constructor(name: string='jkc', age:number=18, gender:string='男') {
this.name = name
this.age = age
this.gender = gender
}
// 一般方法
sayHi(str: string){
console.log(`你好，我叫${this.name},今年${this.age}岁，性别${this.gender}, 我想说：`, str)
}
}
// 创建类的实例
const person = new Person()
// 调用实例的方法
person.sayHi('我很帅')
})()
</code></pre>
<p>如果你使用过C#或Java，你会对这种语法非常熟悉。我们声明了一个<code>Person</code>类。这个类有3个属性、一个构造函数和一个<code>sayHi</code>方法。<br>
我们使用<code>new</code>构造了<code>Person</code>类的一个实例。它会调用构造函数，创建一个<code>Person</code>类型的新对象，并执行构造函数初始化它。最后通过<code>person</code>对象调用其<code>sayHi</code>方法<br>
</p>
<h1 id="继承">继承</h1>
<p>在 TypeScript 里，我们可以使用常用的面向对象模式。 基于类的程序设计中一种最基本的模式是允许使用继承来扩展现有的类。</p>
<pre><code>class Animal {
name: string
constructor (name: string) {
this.name = name
}
run (distance: number=0) {
console.log(`${this.name} run ${distance}m`)
}
}
class Snake extends Animal {
constructor (name: string) {
// 调用父类型构造方法
super(name)
}
// 重写父类的方法
run (distance: number=5) {
console.log('sliding...')
super.run(distance)
}
}
class Horse extends Animal {
constructor (name: string) {
// 调用父类型构造方法
super(name)
}
// 重写父类型的方法
run (distance: number=50) {
console.log('dashing...')
// 调用父类型的一般方法
super.run(distance)
}
xxx () {
console.log('xxx()')
}
}
const snake = new Snake('sn')
snake.run()
const horse = new Horse('ho')
horse.run()
</code></pre>
<p>我们定义了一个超类Animal，两个派生类Snake和Horse，并且创建了2个实例对象<code>snake</code>和<code>horse</code>。<br>
通过<code>snake.run()</code>，我们可以看到Snake中有run方法，那么就进行调用，最后结果如下<br>
<img src="https://img2022.cnblogs.com/blog/1868812/202206/1868812-20220620114212232-655669853.png" alt="" loading="lazy"><br>
通过<code>horse.run()</code>，我们可以看到Horse中有run方法，那么进行调用，最后结果如下：<br>
<img src="https://img2022.cnblogs.com/blog/1868812/202206/1868812-20220620114304598-448004847.png" alt="" loading="lazy"><br>
</p>
<h1 id="多态">多态</h1>
<p>定义：不同类型的对象针对相同的方法，产生了不同的的行为<br>
<br>
接着上面的代码</p>
<pre><code>// 父类型引用指向子类型的实例 ==> 多态
const tom: Animal = new Horse('ho22')
tom.run()
/* 如果子类型没有扩展的方法, 可以让子类型引用指向父类型的实例 */
const tom3: Snake = new Animal('tom3')
tom3.run()
/* 如果子类型有扩展的方法, 不能让子类型引用指向父类型的实例 */
const tom2: Horse = new Animal('tom2')
tom2.run()
</code></pre>
<p>这个例子演示了如何在子类里可以重写父类的方法。<code>Snake</code>类和 <code>Horse</code> 类都创建了 <code>run</code> 方法，它们重写了从 <code>Animal</code> 继承来的 <code>run</code> 方法，使得 <code>run</code> 方法根据不同的类而具有不同的功能。注意，即使 <code>tom</code> 被声明为 <code>Animal</code> 类型，但因为它的值是 <code>Horse</code>，调用 <code>tom.run(34) </code>时，它会调用 <code>Horse</code> 里重写的方法。<br>
<img src="https://img2022.cnblogs.com/blog/1868812/202206/1868812-20220620115808222-1998887764.png" alt="" loading="lazy"><br>
</p>
<h1 id="公共私有与受保护的修饰符">公共，私有与受保护的修饰符</h1>
<h2 id="默认为public">默认为public</h2>
<p>在上面的例子里，我们可以自由的访问程序里定义的成员。 如果你对其它语言中的类比较了解，就会注意到我们在之前的代码里并没有使用 <code>public</code>来做修饰；例如，C#要求必须明确地使用 <code>public</code>指定成员是可见的。 在<code>TypeScript</code>里，成员都默认为 <code>public</code>。<br>
<br>
你也可以明确的将一个成员标记成 <code>public</code>。 我们可以用下面的方式来重写上面的 <code>Animal</code>类：</p>
<pre><code>class Animal {
public name: string;
public constructor(theName: string) { this.name = theName; }
public move(distanceInMeters: number) {
console.log(`${this.name} moved ${distanceInMeters}m.`);
}
}
</code></pre>
<p> </p>
<h2 id="理解private">理解private</h2>
<p>当成员被标记成 private时，它就不能在声明它的类的外部访问。比如：</p>
<pre><code>class Animal {
private name: string;
constructor(theName: string) { this.name = theName; }
}
new Animal("Cat").name; // 错误: 'name' 是私有的.
</code></pre>
<p> </p>
<h2 id="理解-protected">理解 protected</h2>
<p><code>protected</code> 修饰符与 <code>private</code> 修饰符的行为很相似，但有一点不同，<code>protected</code>成员在派生类中仍然可以访问。例如</p>
<pre><code>class Animal {
public name: string
public constructor (name: string) {
this.name = name
}
public run (distance: number=0) {
console.log(`${this.name} run ${distance}m`)
}
}
class Person extends Animal {
private age: number = 18
protected sex: string = '男'
run (distance: number=5) {
console.log('Person jumping...')
super.run(distance)
}
}
class Student extends Person {
run (distance: number=6) {
console.log('Student jumping...')
console.log(this.sex) // 子类能看到父类中受保护的成员
// console.log(this.age) //子类看不到父类中私有的成员
super.run(distance)
}
}
console.log(new Person('abc').name) // 公开的可见
// console.log(new Person('abc').sex) // 受保护的不可见
// console.log(new Person('abc').age) //私有的不可见
</code></pre>
<p> </p>
<h1 id="readonly修饰符">readonly修饰符</h1>
<p>你可以使用 <code>readonly</code>关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。</p>
<pre><code>class Person {
readonly name: string = 'abc'
constructor(name: string) {
this.name = name
}
}
let john = new Person('John')
// john.name = 'peter' // error
</code></pre>
<p> </p>
<h1 id="参数属性">参数属性</h1>
<p>在上面的例子中，我们必须在 Person 类里定义一个只读成员 name 和一个参数为 name 的构造函数，并且立刻将 <code>name</code> 的值赋给 <code>this.name</code>，这种情况经常会遇到。 参数属性可以方便地让我们在一个地方定义并初始化一个成员。 下面的例子是对之前 Person 类的修改版，使用了参数属性</p>
<pre><code>class Person2 {
constructor(readonly name: string) {
}
}
const p = new Person2('jack')
console.log(p.name)
</code></pre>
<p>注意看我们是如何舍弃参数 <code>name</code>，仅在构造函数里使用<code> readonly name: string</code> 参数来创建和初始化 <code>name</code> 成员。 我们把声明和赋值合并至一处。<br>
<br>
参数属性通过给构造函数参数前面添加一个访问限定符来声明。使用 <code>private</code> 限定一个参数属性会声明并初始化一个私有成员；对于 <code>public</code> 和 <code>protected</code> 来说也是一样。<br>
</p>
<h1 id="存取器">存取器</h1>
<p><code>TypeScript</code> 支持通过 <code>getters/setters</code> 来截取对对象成员的访问。 它能帮助你有效的控制对对象成员的访问。<br>
<br>
下面来看如何把一个简单的类改写成使用 <code>get</code> 和 <code>set</code>。 首先，我们从一个没有使用存取器的例子开始。</p>
<pre><code>class P{
firstName: string = 'A'
lastName: string = 'B'
get fullName() {
return this.firstName + '_' + this.lastName
}
set fullName(value) {
const names = value.split('_')
this.firstName = names
this.lastName = names
}
}
const p = new P()
console.log(p.fullName)
p.firstName = 'C'
p.lastName = 'D'
console.log(p.fullName)
p.fullName = 'E_F'
console.log(p.firstName, p.lastName)
</code></pre>
<p><img src="https://img2022.cnblogs.com/blog/1868812/202206/1868812-20220620151148095-788947858.png" alt="" loading="lazy"><br>
</p>
<h1 id="静态属性">静态属性</h1>
<p>静态成员：在类中通过<code>static</code>修饰的属性或方法，也就是静态成员或静态方法，静态成员在使用时是通过<code>类名.</code>的这种语法来调用</p>
<pre><code>class People{
static name1: string = 'jkc'
// 构造函数是不能通过static修饰的
constructor() {
}
static sayHi() {
console.log("hello")
}
}
People.name1 = 'jkc2'
console.log(People.name1)
People.sayHi()
</code></pre>
<p> </p>
<h1 id="抽象类">抽象类</h1>
<p>抽象类：包含抽象方法(抽象方法一般没有任何具体的内容的实现)，也可以包含实例方法，抽象类是不能被实例化，为了让子类进行实例化及实现内部的抽象方法。</p>
<pre><code>abstract class P1 {
// 抽象方法不能有具体的实现代码
abstract eat()
sayHi() {
console.log('hello')
}
}
class P2 extends P1 {
eat() {
// 重新实现抽象类中的方法，此时这个方式是P2的实例方法
console.log("吃东西")
}
}
const p2 = new P2()
p2.eat()
</code></pre><br><br>
来源：https://www.cnblogs.com/jiakecong/p/16392796.html
頁:
[1]