各位观众老爷，大家好！今天咱们来聊聊 JavaScript 里两个听起来高大上，但其实也没那么玄乎的概念：Subtyping（子类型）和 Polymorphism（多态）。放心，保证用最接地气的方式，让大家听得懂，记得住，还能用得上。
开场白：JavaScript 的“假面舞会”
JavaScript 这门语言，有时候就像一场“假面舞会”。表面上看起来都是 Object，但面具下面藏着各种各样的“类型”。而 Subtyping 和 Polymorphism，就是这场舞会上最精彩的两个舞蹈。
第一幕：Subtyping，类型关系的“家谱”
Subtyping，说白了，就是类型之间的关系。就像家族的“家谱”一样，有父辈，有子辈。在 JavaScript 里，这种关系主要体现在接口的兼容性上。
-
什么叫“兼容性”？
想象一下，你是个餐厅老板，需要一个“厨师”来做菜。只要这个人能做菜，你才不管他是川菜厨师还是粤菜厨师，对吧？这就是“兼容性”：只要能满足你的需求（接口），类型就兼容。
-
JavaScript 的 Subtyping 体现在哪里？
JavaScript 是动态类型语言，没有像 Java 或 TypeScript 那样明确的
class和implements关键字来定义类型关系。但它仍然存在 Subtyping 的概念，主要体现在对象是否“看起来像”预期的类型。举个栗子：
function cook(chef) { chef.cookDish(); // 假设厨师必须有 cookDish 方法 } const chineseChef = { name: '张师傅', cookDish: function() { console.log('麻婆豆腐，香！'); } }; const frenchChef = { name: '皮埃尔', cookDish: function() { console.log('法式蜗牛，优雅！'); }, speakFrench: function() { console.log("Bonjour!"); } }; cook(chineseChef); // 输出: 麻婆豆腐，香！ cook(frenchChef); // 输出: 法式蜗牛，优雅！在这个例子里，
chineseChef和frenchChef都是cook函数的“子类型”，因为它们都实现了cookDish方法，满足了cook函数的需求。即使frenchChef还有额外的speakFrench方法，也不影响它作为cook函数的“厨师”。 -
鸭子类型（Duck Typing）
这种“只要走起来像鸭子，叫起来像鸭子，那就是鸭子”的哲学，就是著名的“鸭子类型”。JavaScript 很大程度上依赖于鸭子类型来实现 Subtyping。
总结一下：
特征 说明 核心概念 类型之间的“兼容性”，只要对象“看起来像”预期的类型，就可以被当作那个类型使用。 实现方式 主要通过鸭子类型实现。 优点 灵活性高，代码复用性强。 缺点 类型检查弱，容易出现运行时错误。 适用场景 适用于需要高度灵活性的场景，例如处理用户输入、动态数据等。
第二幕：Polymorphism，一个接口，多种实现
Polymorphism，也就是“多态”，指的是用同一个接口，实现不同的功能。就像同样是“交通工具”，可以是汽车，可以是飞机，可以是轮船，但它们都有“移动”这个共同的接口。
-
多态的几种形式
在 JavaScript 里，多态主要体现在以下几种形式：
-
函数重载（Function Overloading）
虽然 JavaScript 本身不支持真正的函数重载（因为同名函数会覆盖），但我们可以通过判断参数类型或数量来实现类似的效果。
function add(x, y) { if (typeof x === 'number' && typeof y === 'number') { return x + y; } else if (typeof x === 'string' && typeof y === 'string') { return x + y; } else { throw new Error('参数类型错误'); } } console.log(add(1, 2)); // 输出: 3 console.log(add('hello', ' world')); // 输出: hello world //console.log(add(1, 'world')); // 抛出异常在这个例子里，
add函数根据参数类型，实现了不同的功能（数值相加或字符串拼接）。 -
运算符重载（Operator Overloading）
JavaScript 的运算符重载比较有限，主要体现在一些内置运算符上，例如
+运算符可以用于数值相加和字符串拼接。 -
子类型多态（Subtype Polymorphism）
这是最常见的形式。子类型多态指的是，子类型可以替换父类型，并且表现出不同的行为。这通常与继承和接口相关。
function Animal(name) { this.name = name; } Animal.prototype.makeSound = function() { console.log('动物叫'); }; function Dog(name) { Animal.call(this, name); // 调用父类构造函数 } Dog.prototype = Object.create(Animal.prototype); // 继承父类原型 Dog.prototype.constructor = Dog; // 修正 constructor Dog.prototype.makeSound = function() { console.log('汪汪汪'); // 重写父类方法 }; function Cat(name) { Animal.call(this, name); } Cat.prototype = Object.create(Animal.prototype); Cat.prototype.constructor = Cat; Cat.prototype.makeSound = function() { console.log('喵喵喵'); }; function makeSound(animal) { animal.makeSound(); } const dog = new Dog('旺财'); const cat = new Cat('咪咪'); makeSound(dog); // 输出: 汪汪汪 makeSound(cat); // 输出: 喵喵喵在这个例子里，
Dog和Cat都是Animal的子类型，它们都实现了makeSound方法，但表现出不同的行为。makeSound函数可以接受任何Animal类型的对象，并根据对象的实际类型调用相应的makeSound方法，这就是子类型多态。 -
参数化多态 (Parametric Polymorphism)
这通常与泛型相关，允许函数或类处理多种类型的数据，而无需为每种类型编写不同的代码。在JavaScript中，虽然没有像TypeScript那样的泛型，但可以通过一些技巧来模拟参数化多态。
function identity(arg) { return arg; } let myString = identity("hello"); // 类型推断为 string let myNumber = identity(123); // 类型推断为 number let myBoolean = identity(true); // 类型推断为 boolean这个简单的
identity函数接受任何类型的参数并返回它。虽然没有显式的类型声明，但JavaScript的动态类型允许这个函数处理多种类型的数据。
-
-
多态的好处
- 代码复用性： 减少重复代码，提高代码的维护性。
- 可扩展性： 更容易添加新的类型和功能，而无需修改现有代码。
- 灵活性： 可以根据不同的场景选择不同的实现，提高代码的灵活性。
第三幕：Subtyping 和 Polymorphism 的关系
Subtyping 和 Polymorphism 就像一对好基友，经常一起出现。Subtyping 提供了类型之间的关系，而 Polymorphism 则利用这种关系来实现不同的功能。
-
Subtyping 是 Polymorphism 的基础
没有 Subtyping，就没有 Polymorphism。因为 Polymorphism 需要子类型来替换父类型，并表现出不同的行为。
-
Polymorphism 是 Subtyping 的应用
Polymorphism 是 Subtyping 的一种应用，它利用 Subtyping 提供的类型关系，来实现代码的复用和扩展。
总结一下：
| 特征 | Subtyping | Polymorphism |
|---|---|---|
| 核心概念 | 类型之间的关系，表示一个类型是另一个类型的“子类型”。 | 用同一个接口，实现不同的功能。 |
| 目的 | 建立类型之间的层次结构，提高代码的灵活性和可复用性。 | 提高代码的复用性、可扩展性和灵活性。 |
| 实现方式 | 主要通过鸭子类型、继承等方式实现。 | 主要通过函数重载、运算符重载、子类型多态等方式实现。 |
| 关系 | Subtyping 是 Polymorphism 的基础，Polymorphism 是 Subtyping 的应用。 | |
| 示例代码 | 厨师的例子，只要有cookDish 方法就可以被认为是厨师 |
动物叫声的例子，Dog 和 Cat 都是 Animal 的子类型，都实现了 makeSound 方法，但表现出不同的行为。 |
| 应用场景 | 用于定义类型之间的关系，例如，定义一个接口，然后让多个类实现这个接口。 | 用于实现代码的复用和扩展，例如，编写一个函数，可以处理多种类型的参数，并根据参数的类型执行不同的操作。 |
第四幕：JavaScript 中的应用场景
Subtyping 和 Polymorphism 在 JavaScript 中有着广泛的应用，例如：
-
DOM 操作： 不同的 DOM 元素（例如
<div>、<p>、<a>）都继承自HTMLElement，它们都具有一些共同的属性和方法（例如addEventListener、setAttribute），但表现出不同的行为。 -
事件处理： 不同的事件类型（例如
click、mouseover、keydown）都继承自Event，它们都具有一些共同的属性（例如type、target），但触发时机和处理方式不同。 -
框架和库： 许多 JavaScript 框架和库都使用了 Subtyping 和 Polymorphism 来实现代码的复用和扩展，例如 React、Vue、Angular 等。
第五幕： TypeScript 的加持
虽然 JavaScript 本身是动态类型语言，但 TypeScript 提供了静态类型检查，可以更好地利用 Subtyping 和 Polymorphism。
-
接口（Interface）： 可以用来定义类型之间的关系，强制类型实现某些方法。
-
类（Class）： 可以使用
extends关键字来实现继承，从而实现 Subtyping 和 Polymorphism。 -
泛型（Generics）： 可以用来实现参数化多态，提高代码的复用性。
TypeScript 示例：
interface Animal {
name: string;
makeSound(): void;
}
class Dog implements Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log('汪汪汪');
}
}
class Cat implements Animal {
name: string;
constructor(name: string) {
this.name = name;
}
makeSound() {
console.log('喵喵喵');
}
}
function makeSound(animal: Animal) {
animal.makeSound();
}
const dog = new Dog('旺财');
const cat = new Cat('咪咪');
makeSound(dog); // 输出: 汪汪汪
makeSound(cat); // 输出: 喵喵喵在这个例子里，Animal 是一个接口，Dog 和 Cat 都实现了 Animal 接口，从而实现了 Subtyping 和 Polymorphism。TypeScript 的类型检查可以确保 makeSound 函数只能接受 Animal 类型的对象，从而避免运行时错误。
落幕：总结与展望
今天咱们聊了 JavaScript 的 Subtyping 和 Polymorphism，希望大家对这两个概念有了更深入的理解。虽然 JavaScript 是动态类型语言，但 Subtyping 和 Polymorphism 仍然在其中发挥着重要的作用。而 TypeScript 的出现，则让我们可以更好地利用这两个概念，编写更健壮、更可维护的代码。
记住，编程就像一场舞会，Subtyping 和 Polymorphism 就是舞会上最精彩的舞蹈。掌握了它们，你就能在 JavaScript 的世界里跳出更优美的舞步！
感谢各位的观看！下次再见！