本篇是SOLID原则的第三部分，建议先阅读前两部分：
JavaScript 中的 SOLID 原则(一)：“S”代表什么
JavaScript 中的 SOLID 原则(二)：“O”代表什么
这是SOLID的第三篇文章(原文一共五篇)，作者是serhiirubets，欢迎持续关注。
里氏替换原则（Liskov Substitution Principle）
L - 里氏替换原则。这个原则是指：如果S是T的子类型，那么程序中的T对象可以被S对象替换，不需要改变程序中任何所需属性。从定义上可能没有办法清晰的理解其含义，我们稍微换一个说法：函数中使用的指针或引用基类必须可以替换为其派生类。
让我们用更简单的方式来描述它，例如：你有一个“Car”类，并且在不同地方进行了使用。这个原则的意思是：每一个使用Car类的地方，都应该可以被Car类的子类替换。如果我们有一个继承自“Car“的“Passenger Car”, 或者有一个“SUV”类也继承自“Car“，如果我们把“Car”类替换成“SUV”类或者“Passenger Car”类，即把父类Car替换成任何一个子类后，我们的系统应该像以前一样正常工作。
举个简单的例子，我们有一个“Rectangle”(矩形)类，因为”正方形“也是“矩形”，我们可以创建一个基本的“Rectangle”类和“Square”类，“Square”继承自“Rectangle”。
class Rectangle {
constructor(width,height) {
this.width = width
this.height = height
}
setWidth(width) {
this.width = width
}
setHeight(height) {
this.height = height
}
getArea() {
return this.width * this.height
}
}
// Square计算面积的方式有点不同，它的高度和宽度一样的,重写setWidth和setHeight方法。
class Square extends Rectangle {
setWidth(width) {
this.width = width;
this.height = width;
}
setHeight(height) {
this.width = height;
this.height = height;
}
}
const rectangleFirst = new Rectangle(10, 15)
const rectangleSecond = new Rectangle(5, 10)
console.log(rectangleFirst.getArea()); // 150
console.log(rectangleSecond.getArea()); // 50
rectangleFirst.setWidth(20)
rectangleSecond.setWidth(15)
console.log(rectangleFirst.getArea()); // 300
console.log(rectangleSecond.getArea()); // 150
我们创建了两个实例，查看了矩形面积，更改宽高并再次检查了面积，我们看到一切正常，代码按预期工作，但是，让我们再看一下里氏替换原则：如果我们更改任何子类的基类，我们的系统应该像以前一样工作。
const rectangleFirst = new Square(10, 15)
const rectangleSecond = new Square(5, 10)
console.log(rectangleFirst.getArea()); // 150
console.log(rectangleSecond.getArea()); // 50
rectangleFirst.setWidth(20)
rectangleSecond.setWidth(15)
console.log(rectangleFirst.getArea()); // 400
console.log(rectangleSecond.getArea()); // 225
我们把new Rectangle() 替换为new Square()后发现，在setWidth之后, getArea返回了和替换之前不同的值，很明显我们打破了里氏替换原则。
那么我们应该怎么解决呢？解决方案是使用继承，但不是从”Rectangle“类，而是准备一个更“正确”的类。比如，我们创建一个“Sharp”类，它只负责计算面积：
class Shape {
getArea() {
return this.width * this.height;
}
}
class Rectangle {
constructor(width,height) {
super();
this.width = width
this.height = height
}
setWidth(width) {
this.width = width
}
setHeight(height) {
this.height = height
}
}
class Square extends Shape {
setWidth(width) {
this.width = width;
this.height = width;
}
setHeight(height) {
this.width = height;
this.height = height;
}
}
我们创建了一个更通用的基类Shape，在使用new Shape()的地方我们都可以把Shape修改为任何它的子类，而不会破坏原有逻辑。
在我们的示例中，Rectangle和Square是不同的对象，它们包含了一些相似的逻辑，但也有不同的逻辑，所以把他们分开而不是用作“父子”类会更正确。
我们再来看一个对理解这个原则有帮助的例子：
我们要创建一个Bird类，我们正在考虑应该添加什么方法，从第一个角度来看，我们可以考虑添加fly方法，因为所有的鸟都会飞。
class Bird{
fly(){}
}
function allFly(birds) {
birds.forEach(bird => bird.fly())
}
allFly([new Bird(), new Bird(), new Bird()])
之后，我们意识到存在不同的鸟类：鸭子、鹦鹉、天鹅。
class Duck extends Bird {
quack(){}
}
class Parrot extends Bird {
repeat(){}
}
class Swan extends Bird{
beBeautiful(){}
}
现在，里氏替换原则说，如果我们把基类更改为子类，系统应该像以前一样工作：
class Duck extends Bird {
quack(){}
}
class Parrot extends Bird {
repeat(){}
}
class Swan extends Bird{
beBeautiful(){}
}
function allFly(birds){
birds.forEach(bird=> bird.fly())
}
allFly([new Duck(), new Parrot(), new Swan()])
我们在调用allFly函数时，改变了参数，我们调用了new Duck(),new Parrot(),new Swan(), 而不是调用new Bird()。一切正常，我们正确的遵循了里氏替换原则。
现在我们想再添加一只企鹅，但是企鹅并不会飞，如果想调用fly方法，我们就抛出一个错误。
class Penguin extends Bird {
fly(){
throw new Error('Sorry, but I cannot fly')
}
swim(){}
}
allFly([new Duck(), new Parrot(), new Swan(), new Penguin()])
但是我们遇到一个问题：fly方法并不期望出现内部错误，allFly方法也只是为会飞的鸟创建的，企鹅不会飞，所以我们违背了里氏替换原则。
怎么解决这个问题？与其创建一个基本的Bird类，不如创建一个FlyingBird类，所有会飞的鸟都只继承自FlyingBird类，allFly方法也只接受Flying Bird。
class Bird{
}
class FlyingBird{
fly(){}
}
class Duck extends FlyingBird {
quack(){}
}
class Parrot extends FlyingBird {
repeat(){}
}
class Swan extends FlyingBird{
beBeautiful(){}
}
class Penguin extends Bird {
swim(){}
}
Penguin继承自Bird类，而不是FlyingBird类，我们也不需要调用会引发错误的fly方法。在任何调用FlyingBird的地方，可以直接换成更具体的鸟类，比如Duck、Parrot、Swan，代码也会正常工作。
希望你可以通过本文能够更好的理解里氏替换原则，了解在JavaScript是如何工作的和如何在项目中使用。下一篇中，我们将继续学习SOLID中的下一个'L'字母
欢迎关注微信公众号”混沌前端“
推荐阅读：
网友评论