如果你是一個(gè)前端開(kāi)發(fā)工程師,你一定會(huì)接觸到JavaScript。在JavaScript中,繼承是一個(gè)非常常見(jiàn)的話題,它與面向?qū)ο缶幊痰母拍蠲芮邢嚓P(guān)。繼承可以讓你創(chuàng)建一個(gè)新類,在其中復(fù)用一個(gè)已存在的類的方法和屬性。
我們先看一個(gè)例子,假設(shè)我們要?jiǎng)?chuàng)建一個(gè)形狀類,它有一個(gè)計(jì)算面積的方法:
class Shape { constructor(color) { this.color = color; } calculateArea() { console.log('I am calculating area!'); } }
該類會(huì)為每個(gè)形狀保存一個(gè)顏色值,并在需要時(shí)允許計(jì)算面積?,F(xiàn)在我們需要?jiǎng)?chuàng)建一個(gè)矩形類,它也需要計(jì)算面積,而且希望從形狀類繼承顏色信息:
class Rectangle extends Shape { constructor(color, width, height) { super(color); this.width = width; this.height = height; } calculateArea() { console.log('Calculating rectangle area!'); return this.width * this.height; } }
矩形類與形狀類非常相似,但它們有不同的高度和寬度,并且它們的計(jì)算面積方法返回不同的值。由于矩形類有不同的構(gòu)造函數(shù)參數(shù),因此我們需要在該類的構(gòu)造函數(shù)中調(diào)用 super() 函數(shù),該函數(shù)將 color 參數(shù)傳遞給基類 Shape 構(gòu)造函數(shù)。
現(xiàn)在,我們創(chuàng)建了矩形類,但是如果我們希望創(chuàng)建一個(gè)正方形類,該如何處理呢?由于正方形是矩形,因此它應(yīng)該從 Rectangle 類繼承?,F(xiàn)在,我們需要一個(gè)新類 Square,該類應(yīng)該在Rectangle類的基礎(chǔ)上進(jìn)行擴(kuò)展,它需要使用矩形的width屬性來(lái)計(jì)算面積。
class Square extends Rectangle { constructor(color, height) { super(color, height, height); } }
在此類中,我們簡(jiǎn)單地將 rectangle 類的二個(gè)構(gòu)造函數(shù)參數(shù)固定為相同的值,從而創(chuàng)建了一個(gè)正方形。
這就是繼承的基本概念,它允許您創(chuàng)建更具體和特定的類,使其可以在現(xiàn)有類方法和屬性的基礎(chǔ)上進(jìn)行擴(kuò)展。
如果您想深入了解JavaScript 中的繼承,那么下面是一些有用的代碼示例。
首先,讓我們看一下如何使用 Object.assign 方法來(lái)創(chuàng)建簡(jiǎn)單的對(duì)象繼承:
const foo = {a: 1, b: 2}; const bar = Object.create(foo); console.log(bar.a); // 1 console.log(bar.b); // 2 bar.c = 3; console.log(foo.c); // undefined
在此示例中,我們創(chuàng)建了一個(gè)名為foo的對(duì)象,并將其賦值為a和b屬性,接下來(lái)我們將這個(gè)對(duì)象傳遞給Object.create 函數(shù),該函數(shù)會(huì)將foo 對(duì)象作為原型。創(chuàng)建的bar 對(duì)象將從原型對(duì)象(foo) 借鑒a和b屬性,我們還添加了一個(gè)c 屬性,以便演示僅在 bar 對(duì)象上設(shè)置屬性的方法。
我們可以使用prototype屬性來(lái)實(shí)現(xiàn)函數(shù)的繼承。在此示例中,我們將創(chuàng)建一個(gè)基本Car 類,它有減速和加速的方法,接著我們將創(chuàng)建一個(gè)SportsCar 子類,它需要一個(gè)更快的加速函數(shù):
function Car() {} Car.prototype.slowDown = function() { console.log('Slowing down!'); }; Car.prototype.accelerate = function() { console.log('Accelerating!'); }; function SportsCar() {} SportsCar.prototype = Object.create(Car.prototype); SportsCar.prototype.accelerate= function() { console.log('Accelerating faster!'); };
在此示例中,我們首先創(chuàng)建一個(gè)名為Car的類,并將其兩個(gè)方法放入Car.prototype中。然后,我們定義了SportsCar 類并將其構(gòu)造函數(shù)的原型對(duì)象設(shè)置為 Car.prototype。我們覆蓋原始Car類的加速函數(shù),并添加了一些額外的代碼。
通過(guò)使用Object.assign 或更詳細(xì)的prototype繼承技術(shù),我們可以構(gòu)建可以實(shí)現(xiàn)繼承的對(duì)象模型,這樣我們就可以快速輕松地創(chuàng)建最適合我們需求的特定類。