前端小白必学：JavaScript 中多态的使用

文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 JavaScript 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。

这篇文章瑶琴带大家学习 JavaScript 一个重要的知识点：多态。多态是面向对象编程（OOP）中的一个核心概念，它允许不同类的对象对同一消息做出响应，但具体的行为会根据对象的实际类型而有所不同。

在JavaScript中，多态不像在严格遵循OOP语言中那样明显，因为JavaScript是一种基于原型的脚本语言，它不强制使用类和接口，但仍然可以通过函数重载、鸭子类型和原型链等方式实现多态。

一起来看看 JavaScript 的多态是如何实现的：

1.函数重载

在 JavaScript 中，由于函数参数是动态的，所以可以通过函数重载来实现多态。函数重载指的是同一个函数名，根据不同的参数个数或类型，执行不同的逻辑。

function calculate(a, b) { 
    if (typeof a === 'number' && typeof b === 'number') { 
        return a + b; 
    } else if (typeof a === 'string' && typeof b === 'string') { 
        return a + ' ' + b; 
    } 
    throw new Error('Invalid arguments'); 
 } 
console.log(calculate(5, 3)); // 输出 8 
console.log(calculate('Hello', 'World')); // 输出 'Hello World'

2.鸭子类型

鸭子类型是一种典型的多态实现方式，它不关心对象的真实类型，只关心对象是否有可以执行的方法或属性。

function makeSound(animal) { 
    if (typeof animal.sound === 'function') { 
        animal.sound(); 
    } else { 
        throw new Error('This animal cannot make a sound'); 
    } 
} 
const duck = { 
    sound: function() { 
        console.log('Quack!'); 
    } 
}; 
const dog = { 
    sound: function() { 
        console.log('Woof!'); 
    } 
}; 
makeSound(duck); // 输出 'Quack!' 
makeSound(dog); // 输出 'Woof!'

3.原型链

在JavaScript中，每个对象都有一个内部属性[[Prototype]]（在代码中通常通过__proto__或Object.getPrototypeOf()来访问），这个属性引用了另一个对象，我们称之为该对象的原型。通过原型链，可以实现多态。

function Animal(name) { 
    this.name = name; 
} 
Animal.prototype.speak = function() { 
    console.log(`${this.name} makes a sound`); 
}; 
function Dog(name) { 
    Animal.call(this, name); 
} 
Dog.prototype = Object.create(Animal.prototype); 
Dog.prototype.constructor = Dog; 
Dog.prototype.speak = function() { 
    console.log(`${this.name} barks`); 
}; 
const myDog = new Dog('Buddy'); 
myDog.speak(); // 输出 'Buddy barks'

在这个例子中，Dog继承了Animal的speak方法，但可以重写以实现多态。

4. 使用类（ES6+）

在ES6及以后的版本中，JavaScript支持了类（class），这使得实现多态变得更加直观。

class Animal { 
    speak() { 
        return 'makes a sound'; 
    } 
} 
class Dog extends Animal { 
    speak() { 
        return super.speak() + ', barks'; 
    } 
} 
const myDog = new Dog(); 
console.log(myDog.speak()); // 输出 'makes a sound, barks'

在这个例子中，Dog类重写了Animal类的speak方法，实现了多态。

这些是JavaScript中实现多态的一些基本方法。多态是编程中一个强大的概念，它提高了代码的灵活性和可重用性。

对于初学者来说，掌握多态的用法可能有些困难，希望这些示例能帮助你更好地理解多态，并将其应用到你的前端开发学习中。

最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。