本篇是SOLID原則的第三部分周循，建議先閱讀前兩部分：
JavaScript 中的 SOLID 原則(一)：“S”代表什么
JavaScript 中的 SOLID 原則(二)：“O”代表什么
這是SOLID的第三篇文章(原文一共五篇)盖桥，作者是serhiirubets壶唤，歡迎持續(xù)關(guān)注洗鸵。
里氏替換原則（Liskov Substitution Principle）
L - 里氏替換原則军援。這個(gè)原則是指：如果S是T的子類型宠进，那么程序中的T對(duì)象可以被S對(duì)象替換，不需要改變程序中任何所需屬性萝风。從定義上可能沒(méi)有辦法清晰的理解其含義嘀掸，我們稍微換一個(gè)說(shuō)法：函數(shù)中使用的指針或引用基類必須可以替換為其派生類。
讓我們用更簡(jiǎn)單的方式來(lái)描述它闹丐，例如：你有一個(gè)“Car”類横殴，并且在不同地方進(jìn)行了使用被因。這個(gè)原則的意思是：每一個(gè)使用Car類的地方卿拴，都應(yīng)該可以被Car類的子類替換。如果我們有一個(gè)繼承自“Car“的“Passenger Car”, 或者有一個(gè)“SUV”類也繼承自“Car“梨与，如果我們把“Car”類替換成“SUV”類或者“Passenger Car”類堕花，即把父類Car替換成任何一個(gè)子類后，我們的系統(tǒng)應(yīng)該像以前一樣正常工作粥鞋。
舉個(gè)簡(jiǎn)單的例子缘挽，我們有一個(gè)“Rectangle”(矩形)類，因?yàn)椤闭叫巍耙彩恰熬匦巍鄙氪猓覀兛梢詣?chuàng)建一個(gè)基本的“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計(jì)算面積的方式有點(diǎn)不同等浊，它的高度和寬度一樣的,重寫(xiě)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
我們創(chuàng)建了兩個(gè)實(shí)例，查看了矩形面積筹燕，更改寬高并再次檢查了面積轧飞，我們看到一切正常衅鹿，代碼按預(yù)期工作，但是过咬，讓我們?cè)倏匆幌?strong>里氏替換原則：如果我們更改任何子類的基類大渤，我們的系統(tǒng)應(yīng)該像以前一樣工作。
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()后發(fā)現(xiàn)掸绞，在setWidth之后, getArea返回了和替換之前不同的值泵三，很明顯我們打破了里氏替換原則。
那么我們應(yīng)該怎么解決呢衔掸？解決方案是使用繼承切黔，但不是從”Rectangle“類，而是準(zhǔn)備一個(gè)更“正確”的類具篇。比如纬霞，我們創(chuàng)建一個(gè)“Sharp”類，它只負(fù)責(zé)計(jì)算面積：
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;
}
}
我們創(chuàng)建了一個(gè)更通用的基類Shape驱显，在使用new Shape()的地方我們都可以把Shape修改為任何它的子類诗芜，而不會(huì)破壞原有邏輯。
在我們的示例中埃疫，Rectangle和Square是不同的對(duì)象伏恐，它們包含了一些相似的邏輯，但也有不同的邏輯栓霜，所以把他們分開(kāi)而不是用作“父子”類會(huì)更正確翠桦。
我們?cè)賮?lái)看一個(gè)對(duì)理解這個(gè)原則有幫助的例子：
我們要?jiǎng)?chuàng)建一個(gè)Bird類，我們正在考慮應(yīng)該添加什么方法胳蛮，從第一個(gè)角度來(lái)看销凑，我們可以考慮添加fly方法，因?yàn)樗械镍B(niǎo)都會(huì)飛仅炊。
class Bird{
fly(){}
}
function allFly(birds) {
birds.forEach(bird => bird.fly())
}
allFly([new Bird(), new Bird(), new Bird()])
之后斗幼，我們意識(shí)到存在不同的鳥(niǎo)類：鴨子、鸚鵡抚垄、天鵝蜕窿。
class Duck extends Bird {
quack(){}
}
class Parrot extends Bird {
repeat(){}
}
class Swan extends Bird{
beBeautiful(){}
}
現(xiàn)在，里氏替換原則說(shuō)呆馁，如果我們把基類更改為子類桐经，系統(tǒng)應(yīng)該像以前一樣工作：
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()])
我們?cè)谡{(diào)用allFly函數(shù)時(shí)，改變了參數(shù)浙滤，我們調(diào)用了new Duck(),new Parrot(),new Swan(), 而不是調(diào)用new Bird()阴挣。一切正常，我們正確的遵循了里氏替換原則瓷叫。
現(xiàn)在我們想再添加一只企鵝屯吊，但是企鵝并不會(huì)飛送巡，如果想調(diào)用fly方法，我們就拋出一個(gè)錯(cuò)誤盒卸。
class Penguin extends Bird {
fly(){
throw new Error('Sorry, but I cannot fly')
}
swim(){}
}
allFly([new Duck(), new Parrot(), new Swan(), new Penguin()])
但是我們遇到一個(gè)問(wèn)題：fly方法并不期望出現(xiàn)內(nèi)部錯(cuò)誤骗爆，allFly方法也只是為會(huì)飛的鳥(niǎo)創(chuàng)建的，企鵝不會(huì)飛蔽介，所以我們違背了里氏替換原則摘投。
怎么解決這個(gè)問(wèn)題？與其創(chuàng)建一個(gè)基本的Bird類虹蓄，不如創(chuàng)建一個(gè)FlyingBird類犀呼，所有會(huì)飛的鳥(niǎo)都只繼承自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類，我們也不需要調(diào)用會(huì)引發(fā)錯(cuò)誤的fly方法律胀。在任何調(diào)用FlyingBird的地方宋光，可以直接換成更具體的鳥(niǎo)類，比如Duck炭菌、Parrot罪佳、Swan，代碼也會(huì)正常工作黑低。
希望你可以通過(guò)本文能夠更好的理解里氏替換原則赘艳，了解在JavaScript是如何工作的和如何在項(xiàng)目中使用。下一篇中克握，我們將繼續(xù)學(xué)習(xí)SOLID中的下一個(gè)'L'字母
歡迎關(guān)注微信公眾號(hào)”混沌前端“
推薦閱讀：
