資料結構
網路
關係型資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究TypeScript 中的方法覆蓋？
**方法覆蓋**是指在繼承類中編寫方法的新定義，同時保持方法名稱、引數和返回型別不變。在本教程中，我們將學習 TypeScript 中的方法覆蓋。
**繼承**是**面向物件程式設計**的四大支柱之一。**OOPs** 的方法覆蓋特性對繼承很有幫助。例如，我們可以在父類中定義方法，並在基類中使用相同名稱、引數和返回型別重新定義該方法，但使用不同的程式碼執行，這就是方法覆蓋出現的原因。
語法
使用者可以按照以下語法學習方法覆蓋。
class Vehicle {
// Info method in parent class
info(): void {
console.log("The object is the vehicle.");
}
}
class car extends Vehicle {
// Same info method overriden in base class
info(): void {
console.log("The object is a car.");
}
}
let new_vehicle = new car();
new_vehicle.info();
在上述語法中，使用者可以看到我們在父類中定義了 info() 方法。此外，我們在基類中也定義了同名 info 方法。此外，我們建立了基類的物件並呼叫了 info() 方法，這將呼叫基類的 info() 方法。
步驟
**步驟 1** - 使用 class 關鍵字建立車輛類。
**步驟 2** - 在車輛類中定義 info() 方法，該方法列印訊息“該物件是一輛車輛”。
**步驟 3** - 建立汽車類，該類擴充套件車輛類。此外，在汽車類中定義一些變數。
**步驟 4** - 此外，在汽車類中覆蓋車輛類的 info() 方法，該方法提供有關汽車的資訊，而不是一般車輛的資訊。
**步驟 5** - 在汽車類中建立 get_size() 方法。
**步驟 6** - 最後，建立汽車類的物件並透過獲取物件作為引用來呼叫 info() 和 get_size() 方法。
示例 1
在下面的示例中，汽車類由車輛類繼承，該類覆蓋了車輛類的 info() 方法。
class Vehicle {
info(): void {
console.log("The object is the vehicle.");
}
}
class car extends Vehicle {
name: string = "car";
color: string = "Black";
size: number = 6;
info(): void {
console.log("The object is a " + this.name);
console.log("The color of the car is " + this.color);
}
get_size(): void {
console.log("The length of the car in the feet is " + this.size);
}
}
let new_vehicle = new car();
// Call the info method of the car class
new_vehicle.info();
// call the get_size() method of the car class
new_vehicle.get_size();
編譯後，它將生成以下 JavaScript 程式碼：
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var Vehicle = /** @class */ (function () {
function Vehicle() {
}
Vehicle.prototype.info = function () {
console.log("The object is the vehicle.");
};
return Vehicle;
}());
var car = /** @class */ (function (_super) {
__extends(car, _super);
function car() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.name = "car";
_this.color = "Black";
_this.size = 6;
return _this;
}
car.prototype.info = function () {
console.log("The object is a " + this.name);
console.log("The color of the car is " + this.color);
};
car.prototype.get_size = function () {
console.log("The length of the car in the feet is " + this.size);
};
return car;
}(Vehicle));
var new_vehicle = new car();
// Call the info method of the car class
new_vehicle.info();
// call the get_size() method of the car class
new_vehicle.get_size();
輸出
以上程式碼將產生以下輸出：
The object is a car The color of the car is Black The length of the car in the feet is 6
示例 2
在下面的示例中，我們建立了員工類，並透過員工類擴充套件了男性類。員工類的 about() 方法告訴我們有關一般員工的資訊。
男性類的 about 方法透過向 about() 方法新增一些額外資訊來覆蓋員工類的 about() 方法。此外，我們還使用 super 關鍵字在男性類的 about() 方法內部呼叫了員工類的 about() 方法。
// Creating the employee class containing the about method
class Employee {
about(): void {
console.log("Inside the employee class.");
}
}
// Men calss overriding the about method of employee class
class men extends Employee {
gender: string = "Male";
about(): void {
// calling the about method of the employee class
super.about();
console.log("The gender of the Employee is " + this.gender);
}
}
// Invoking the about method of men class
let new_men = new men();
new_men.about();
編譯後，它將生成以下 JavaScript 程式碼：
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
// Creating the employee class containing the about method
var Employee = /** @class */ (function () {
function Employee() {
}
Employee.prototype.about = function () {
console.log("Inside the employee class.");
};
return Employee;
}());
// Men calss overriding the about method of employee class
var men = /** @class */ (function (_super) {
__extends(men, _super);
function men() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.gender = "Male";
return _this;
}
men.prototype.about = function () {
// calling the about method of the employee class
_super.prototype.about.call(this);
console.log("The gender of the Employee is " + this.gender);
};
return men;
}(Employee));
// Invoking the about method of men class
var new_men = new men();
new_men.about();
輸出
以上程式碼將產生以下輸出：
Inside the employee class. The gender of the Employee is Male
示例 3
在下面的示例中，我們使用相同的引數和返回型別在乘法類中覆蓋了求和類的 operation() 方法。
class sum {
operation(a: number, b: number): number {
return a + b;
}
}
class multiply extends sum {
// Override the operation method by keeping parameters and return type same
operation(a: number, b: number): number {
return a * b;
}
}
let multi = new multiply();
let result = multi.operation(10, 20);
console.log(
"Result after performing calling the operation method is " + result
);
編譯後，它將生成以下 JavaScript 程式碼：
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var sum = /** @class */ (function () {
function sum() {
}
sum.prototype.operation = function (a, b) {
return a + b;
};
return sum;
}());
var multiply = /** @class */ (function (_super) {
__extends(multiply, _super);
function multiply() {
return _super !== null && _super.apply(this, arguments) || this;
}
// Override the operation method by keeping parameters and return type same
multiply.prototype.operation = function (a, b) {
return a * b;
};
return multiply;
}(sum));
var multi = new multiply();
var result = multi.operation(10, 20);
console.log("Result after performing calling the operation method is " + result);
輸出
以上程式碼將產生以下輸出：
Result after performing calling the operation method is 200
使用者學習瞭如何在 TypeScript 中覆蓋方法。在第一個示例中，使用者學習瞭如何在基類中簡單地覆蓋父類方法。在第二個示例中，使用者學習瞭如何在覆蓋方法時呼叫超類的方法。在第三個示例中，使用者學習瞭如何覆蓋引數化方法。
更新於： 2022-12-19
13K+ 閱讀量
廣告