《前端之路》- TypeScript (四) class 中各类属性、方法，抽象类、多态

阳光穿透心脏的1/2处 2022-10-11 12:27 147阅读 0赞

### 一、TypeScript 中的类 ###

> 1、先来举个例子：

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Persons { </code> <code>&nbsp;&nbsp;</code><code>name: any;</code> <code>&nbsp;&nbsp;</code><code>age: number | undefined;</code> <code>&nbsp;&nbsp;</code><code>constructor(name: string, age: number) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.age = age;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getName(): void { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`${this.name}今年已经${this.age}岁了`);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>let</code> <code>p11 = new Persons(</code><code>"za"</code><code>, 123);</code> <code>console.log(p11.getName()); </code><code>//</code> <code>za今年已经123岁了</code> </td> 
 </tr> 
 </tbody> 
</table>

*  转换成 ES5 的代码后：

<table> 
 <tbody> 
 <tr> 
 <td> <code>var Persons = /** @class */ (</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;</code><code>function</code> <code>Persons(name, age) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.age = age;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>Persons.prototype.getName = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name + </code><code>"\u4ECA\u5E74\u5DF2\u7ECF"</code> <code>+ this.age + </code><code>"\u5C81\u4E86"</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>);</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>Persons;</code> <code>})();</code> <code>var p11 = new Persons(</code><code>"za"</code><code>, 123);</code> <code>console.log(p11.getName()); </code><code>//</code>&nbsp; <code>za今年已经123岁了</code> </td> 
 </tr> 
 </tbody> 
</table>

> 2、这里和我们使用 Es6 中的 class 有一些差别

<table> 
 <tbody> 
 <tr> 
 <td> <code>//</code> <code>javascript 中 class 的定义</code> <code>class An { </code> <code>&nbsp;&nbsp;</code><code>constructor(name) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>getName() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(this.name);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>var a = new An(</code><code>"zz"</code><code>);</code> <code>a.getName(); </code><code>//</code> <code>zz</code> </td> 
 </tr> 
 </tbody> 
</table>

> 3、差异在于，我们需要去定义 constructor 构造函数中传入的数据参数的类型

### [https://blog.csdn.net/lin123\_00/article/details/106020831][https_blog.csdn.net_lin123_00_article_details_106020831] ###

### 二、TypeScript 中类的继承 ###

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Animal { </code> <code>&nbsp;&nbsp;</code><code>name: string | undefined;</code> <code>&nbsp;&nbsp;</code><code>food: string;</code> <code>&nbsp;&nbsp;</code><code>constructor(name: string, food: string) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.food = food;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>eat() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`${this.name}吃${this.food}`);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class Cat extends Animal { </code> <code>&nbsp;&nbsp;</code><code>constructor(name: string, food: string) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super(name, food);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>jump() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`${this.name}正在跳`);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>let</code> <code>xiaohhua = new Cat(</code><code>"xiaohua"</code><code>, </code><code>"猫粮"</code><code>);</code> <code>console.log(xiaohhua.eat()); </code><code>//</code> <code>xiaohua吃猫粮</code> <code>console.log(xiaohhua.jump()); </code><code>//</code> <code>xiaohua正在跳</code> </td> 
 </tr> 
 </tbody> 
</table>

> 这里和 ES6 中的 class 继承内容基本上没什么出入

### 三、TypeScript 中公共，私有与受保护的修饰符 ###

> 这里的修饰符是对类中对 属性和方法的类型的定义

3-1、属性的 public

> 不定义的类心的话，默认就是 public 类型

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Animals { </code> <code>&nbsp;&nbsp;</code><code>public name: string | undefined;</code> <code>&nbsp;&nbsp;</code><code>constructor(name: string) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>eat() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`${this.name}哇`);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> </td> 
 </tr> 
 </tbody> 
</table>

> 转换成 es5 代码

<table> 
 <tbody> 
 <tr> 
 <td> <code>"use strict"</code><code>;</code> <code>var Animals = /** @class */ (</code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;</code><code>function</code> <code>Animals(name) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>Animals.prototype.eat = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(this.name + </code><code>"\u54C7"</code><code>);</code> <code>&nbsp;&nbsp;</code><code>};</code> <code>&nbsp;&nbsp;</code><code>return</code> <code>Animals;</code> <code>})();</code> <code>//</code> <code>和没定义之前一样</code> </td> 
 </tr> 
 </tbody> 
</table>

3-2、属性的 private

> 当成员被标记成 private 时，它就不能在声明它的类的外部访问

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Animal2 { </code> <code>&nbsp;&nbsp;</code><code>private name: string | undefined;</code> <code>&nbsp;&nbsp;</code><code>constructor(name: string) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>eat() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`${this.name}哇`);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>var a = new Animal2(</code><code>"private"</code><code>);</code> <code>a.name = </code><code>"123"</code><code>; </code><code>//</code> <code>报错，name 属性只能在 Animal2 内部使用</code> <code>new Animal2(</code><code>"private"</code><code>).name = </code><code>"432"</code><code>; </code><code>//</code> <code>报错： 属性“name”为私有属性，只能在类“Animal2”中访问。</code> </td> 
 </tr> 
 </tbody> 
</table>

3-3、属性的 protected

> 当成员被标记成 protected 时，它就不能在声明它的类的外部访问，但是该类的子类可以访问

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Person2 { </code> <code>&nbsp;&nbsp;</code><code>protected name: string;</code> <code>&nbsp;&nbsp;</code><code>constructor(name: string) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class exPerson extends Person2 { </code> <code>&nbsp;&nbsp;</code><code>public age: number;</code> <code>&nbsp;&nbsp;</code><code>constructor(age: number, name: string) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super(name);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.age = age;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>public getInfo() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`${this.name}哈哈哈哈${this.age}`);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>let</code> <code>ps</code> <code>= new exPerson(123, </code><code>"za"</code><code>); </code><code>//</code> <code>派生类可以继承 protected 属性，但是</code> <code>ps</code><code>.name = </code><code>"zz"</code><code>; </code><code>//</code> <code>报错 外部无法直接访问</code> <code>console.log(</code><code>ps</code><code>); </code><code>//</code> <code>{ name: </code><code>'za'</code><code>, age: 123 }</code> </td> 
 </tr> 
 </tbody> 
</table>

> 构造函数也能够被 设置成 protected 属性

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Person22 { </code> <code>&nbsp;&nbsp;</code><code>protected name: string;</code> <code>&nbsp;&nbsp;</code><code>protected constructor(name: string) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class exPerson2 extends Person2 { </code> <code>&nbsp;&nbsp;</code><code>public age: number;</code> <code>&nbsp;&nbsp;</code><code>constructor(age: number, name: string) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super(name);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.age = age;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>public getInfo() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`${this.name}哈哈哈哈${this.age}`);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>let</code> <code>exp = new exPerson2(21, </code><code>"exp-name"</code><code>);</code> <code>let</code> <code>per22 = new Person22(</code><code>"zs"</code><code>); </code><code>//</code> <code>报错 类“Person22”的构造函数是受保护的，仅可在类声明中访问</code> </td> 
 </tr> 
 </tbody> 
</table>

3-4、readonly 修饰符

> 使用 readonly 关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化

<table> 
 <tbody> 
 <tr> 
 <td> <code>class octPers { </code> <code>&nbsp;&nbsp;</code><code>readonly</code> <code>name: string;</code> <code>&nbsp;&nbsp;</code><code>readonly</code> <code>age: number = 8;</code> <code>&nbsp;&nbsp;</code><code>constructor(name: string, age: number) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.age = age;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>let</code> <code>ns = new octPers(</code><code>"zz"</code><code>, 123);</code> <code>console.log(</code><code>"---1"</code><code>, ns);</code> <code>ns.age = 456; </code><code>//</code> <code>报错 Cannot assign to </code><code>'age'</code> <code>because it is a </code><code>read</code><code>-only property.</code> <code>console.log(</code><code>"---2"</code><code>, ns); </code><code>//</code> <code>这里会执行什么内容呢？</code> </td> 
 </tr> 
 </tbody> 
</table>

### 四、TypeScript 中 静态方法 ###

> 这里所谓的静态方法，其实就是将方法直接定义在了 构造函数对象上，只有构造函数本身才能去使用它，任何其他都无法使用（包括它的 派生类）

<table> 
 <tbody> 
 <tr> 
 <td> <code>class staticPerson { </code> <code>&nbsp;&nbsp;</code><code>public name: string;</code> <code>&nbsp;&nbsp;</code><code>public age: number = 8;</code> <code>&nbsp;&nbsp;</code><code>constructor(name: string, age: number) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.age = age;</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>static getName1() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"---static-getName---"</code><code>, this);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;</code><code>protected getName(): void { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>"---protected-getName---"</code><code>, this);</code> <code>&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>let</code> <code>ress = new staticPerson(</code><code>"zzs"</code><code>, 123);</code> <code>console.log(</code><code>"---instancing getName"</code><code>, staticPerson.getName1()); </code><code>//</code> <code>属性“getName”受保护，只能在类“staticPerson”及其子类中访问。</code> </td> 
 </tr> 
 </tbody> 
</table>

### 五、TypeScript 中 继承与多态 ###

> 这里面其实更多的是 JS 的继承与多态，我们以 ES5 和 ES6 分别对继承和多态进行对比

5-1 ES5 中是如何实现 继承的？

> 这里我们想想继承，到底是继承什么？如何继承？为什么要继承？

5-1-1 通过类式继承

> 类的方式，其核心在于将 子类的 prototype 指向了 父类的实例，这样的话，子类的实例的 `__proto__` 指向子类的 `prototype`, 然而 子类的 `prototype` 被赋予了 父类的实例。我们制作一个简单的图，来说明一下这里如何实现的继承。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70][]

<table> 
 <tbody> 
 <tr> 
 <td> <code>var SuperClass = </code><code>function</code><code>(name) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var </code><code>id</code> <code>= 1;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.work = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(this.name + </code><code>'in SuperClass'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>};</code> <code>SuperClass.prototype.getSuperName = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this.name;</code> <code>};</code> <code>var SubClass = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.getSubName = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'this is subname'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>};</code> <code>SubClass.prototype = new SuperClass(</code><code>'superClass'</code><code>);</code> <code>var sub = new SubClass();</code> <code>//</code> <code>这样有缺点么？ 当然有，下面我们来通过例子来说明一下</code> </td> 
 </tr> 
 </tbody> 
</table>

> 这种继承的方式的缺点、

<table> 
 <tbody> 
 <tr> 
 <td> <code>var SuperClass = </code><code>function</code><code>(name) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>var </code><code>id</code> <code>= 1;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.todo = [1, 2, 3, 4];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.work = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(this.name + </code><code>'in SuperClass'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>};</code> <code>SuperClass.prototype.getSuperName = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>return</code> <code>this.name;</code> <code>};</code> <code>var SubClass = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.getSubName = </code><code>function</code><code>() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'this is subname'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>};</code> <code>};</code> <code>SubClass.prototype = new SuperClass(</code><code>'superClass'</code><code>);</code> <code>var sub = new SubClass();</code> <code>sub.todo.push(</code><code>'subClass name'</code><code>);</code> <code>var sub2 = new SubClass();</code> <code>console.log(sub2.todo); </code><code>//</code> <code>[ 1, 2, 3, 4, </code><code>'subClass name'</code><code>]</code> <code>//</code> <code>这里是缺陷一，父类属性会被实例子类修改、污染</code> <code>console.log(sub.name); </code><code>//superClass</code> <code>console.log(sub2.name); </code><code>//superClass</code> <code>//</code> <code>子类的实例只能有一个name，这很显然也是不够灵活的，这里就是缺陷二</code> </td> 
 </tr> 
 </tbody> 
</table>

> 这里因为子类实例对象1，对于父类共有属性进行了修改，导致子类实例对象2 的对应属性受到了污染。那有没有什么办法可以避免这种污染呢？当然是有的，后面我们会介绍到的。

5-1-2 通过构造函数继承

<table> 
 <tbody> 
 <tr> 
 <td> <code>//</code> <code>声明父类</code> <code>function</code> <code>Animal(color) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = </code><code>'animal'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.</code><code>type</code> <code>= [</code><code>'pig'</code><code>, </code><code>'cat'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.color = color;</code> <code>}</code> <code>//</code> <code>添加原型方法</code> <code>Animal.prototype.eat = </code><code>function</code><code>(food) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(food);</code> <code>};</code> <code>//</code> <code>声明子类</code> <code>function</code> <code>Dog() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Animal.apply(this, arguments);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//</code> <code>这一步的操作就是改变 Animal 方法的上下文，然后让 Dog 也具备了 父类构造函数内的属性和方法</code> <code>}</code> <code>var dog1 = new Dog(</code><code>'blue'</code><code>); </code><code>//</code> <code>dog1.color -&gt; blue</code> <code>var dog2 = new Dog(</code><code>'red'</code><code>); </code><code>//</code> <code>dog2.color -&gt; red</code> <code>dog1.</code><code>type</code><code>.push(</code><code>'haha'</code><code>);</code> <code>console.log(dog2.</code><code>type</code><code>); </code><code>//</code> <code>[ </code><code>'pig'</code><code>, </code><code>'cat'</code> <code>]</code> </td> 
 </tr> 
 </tbody> 
</table>

> 我没看到 dog1 修改了继承自父类的属性 type ，但是 dog2 的 type 属性并为被影响到。原因就是我们实例化的时候，创建的实例对象的指针指向的位置是不同的，所以对应的 `__proto__` 指向的是 不同的子类构造函数的 `prototype`。可能会比较绕口，但是本质就是 new 操作生成了2个不同的对象，各自有各自的原型属性，互不干扰。

`但是上面也有一个缺陷就是，子类没办法继承到父类原型上的方法和属性`

> 那聪明的前端开发者们，就想到了 集合前2者的优势，进行了 组合式继承。

5-1-3 组合式继承

<table> 
 <tbody> 
 <tr> 
 <td> <code>//</code> <code>声明父类</code> <code>function</code> <code>Animal(color) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = </code><code>'animal'</code><code>;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.</code><code>type</code> <code>= [</code><code>'pig'</code><code>, </code><code>'cat'</code><code>];</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.color = color;</code> <code>}</code> <code>//</code> <code>添加原型方法</code> <code>Animal.prototype.eat = </code><code>function</code><code>(food) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(food);</code> <code>};</code> <code>//</code> <code>声明子类</code> <code>function</code> <code>Dog() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>Animal.apply(this, arguments);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//</code> <code>这一步的操作就是改变 Animal 方法的上下文，然后让 Dog 也具备了</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>//</code> <code>父类构造函数内的属性和方法</code> <code>}</code> <code>Dog.prototype = new Animal(</code><code>'Animal Color'</code><code>);</code> <code>var dog1 = new Dog();</code> <code>console.log((dog1.color = </code><code>'dog1.name'</code><code>));</code> <code>var dog2 = new Dog();</code> <code>console.log(dog2.color); </code><code>//</code> <code>undefined</code> <code>这里为什么 dog2.color 是 undefined 而不是 </code><code>'dog1.name'</code> <code>呢？</code> <code>因为，我们子类的构造函数，已经继承了 父类的构造函数内部的属性和方法，然后，在实例我们 子类的时候，子类的实例对象就会有先从本身的对象中去寻找 color 属性。</code> <code>当找到对应属性的时候，无论是否有值，都会优先返回 实例化对象本身的属性，而不再需要从原型链中查找对应属性。</code> </td> 
 </tr> 
 </tbody> 
</table>

5-2 ES6 中是如何实现 继承的？

> 这里我们想想继承，到底是继承什么？如何继承？为什么要继承？

5-2-1 ES6 的继承方式

<table> 
 <tbody> 
 <tr> 
 <td> <code>class Animal { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>constructor(name) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>eat(food) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(`${this.name}吃${food}`);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>class Dog extends Animal { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>constructor(name) { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>super(name);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>this.name = name;</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>run() { </code> <code>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</code><code>console.log(</code><code>'小狗泡泡跑'</code><code>);</code> <code>&nbsp;&nbsp;&nbsp;&nbsp;</code><code>}</code> <code>}</code> <code>let</code> <code>dog1 = new Dog(</code><code>'小狗'</code><code>);</code> <code>let</code> <code>dog2 = new Dog(</code><code>'小花'</code><code>);</code> <code>console.log(dog1.name); </code><code>//</code> <code>小狗</code> <code>console.log(dog2.name); </code><code>//</code> <code>小花</code> <code>dog1.__proto__ === Dog.prototype&nbsp;&nbsp;&nbsp; </code><code>//</code> <code>true</code> <code>Dog.__proto__ === Animal&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </code><code>//</code> <code>true</code> <code>这里 Dog 的 __proto__ 指向的是 Animal 这个类</code> <code>因为 Animal 这个类中的 constructor 就是原来的构造函数， 其中剩下的方法、属性都是 prototype 上的公共方法与属性。是可以被子类继承</code> </td> 
 </tr> 
 </tbody> 
</table>

### 六、总结 ###

> 这里全篇文章又总结了下 JS 中继承的原理以及一些我们平时可能忽略的问题，这里就相当于在 学习 ts 之前，带着大家再一起复习一下。好了，本篇文章就先到这里了。

[https_blog.csdn.net_lin123_00_article_details_106020831]: https://blog.csdn.net/lin123_00/article/details/106020831
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xpbjEyM18wMA_size_16_color_FFFFFF_t_70]: /images/20221005/0848c3aaff5b412e9b1b15bf4aec09e6.png