TypeScript面向?qū)ο蟪敿?xì)分析
1 面向?qū)ο笤瓌t
- 單一原則：一個(gè)類只負(fù)責(zé)一個(gè)職責(zé)。
- 里氏替換原則：子類可以在任何地方替換它的父類。
- 依賴倒置原則：代碼要依賴于抽象的類，而不要依賴于具體的類；要針對(duì)接口或抽象類編程，而不是針對(duì)具體類編程。
- 接口隔離原則：提供盡可能小的單獨(dú)接口，而不要提供大的總接口。暴露行為讓后面的實(shí)現(xiàn)類知道的越少越好。
- 迪米特法則：盡量降低類與類之間的耦合。
- 開閉原則：面向擴(kuò)展開放，面向修改關(guān)閉。
- 組合/聚合復(fù)用原則：盡量使用合成/聚合達(dá)到復(fù)用，盡量少用繼承。原則： 一個(gè)類中有另一個(gè)類的對(duì)象。
2 TypeScript類
TypeScript 是面向?qū)ο蟮?JavaScript。類描述了所創(chuàng)建的對(duì)象共同的屬性和方法。TypeScript 支持面向?qū)ο蟮乃刑匦浴?/p>
2.1 類的定義
TypeScript使用class關(guān)鍵字定義類。
class 類名 {
// 具體代碼
}
類可以包含以下幾個(gè)模塊（類的數(shù)據(jù)成員）：
- 字段（屬性）：字段是類里面聲明的變量。字段表示對(duì)象的有關(guān)數(shù)據(jù)。
- 構(gòu)造函數(shù)：類實(shí)例化時(shí)調(diào)用，可以為類的對(duì)象分配內(nèi)存。
- 方法：方法為對(duì)象要執(zhí)行的操作。
那么一個(gè)類的結(jié)構(gòu)大致如下：
class 類名 {
// 字段
屬性名: 類型;// 構(gòu)造函數(shù)
constructor(參數(shù): 類型) {
this.屬性名 = 參數(shù);
}// 方法
方法名() {
// 具體方法
}
}
示例代碼：創(chuàng)建一個(gè)Car類
class Car {
// 字段
engine: string;
// 構(gòu)造函數(shù)
constructor(engine: string) {
this.engine = engine;
}
// 方法
disp(): void {
console.log("發(fā)動(dòng)機(jī)為：" + this.engine);
}
}2.2 創(chuàng)建實(shí)例對(duì)象
在類中使用new關(guān)鍵字來實(shí)例化類的對(duì)象，語法格式如下：
var 對(duì)象名 = new 類名([參數(shù)]);
類中的字段和方法可以使用.來訪問：
// 訪問屬性
對(duì)象名.字段名;// 訪問方法
對(duì)象名.方法名();
示例代碼：為Car類創(chuàng)建一個(gè)實(shí)例對(duì)象，并訪問字段和方法
class Car {
engine: string;
constructor(engine: string) {
this.engine = engine;
}
disp(): void {
console.log("發(fā)動(dòng)機(jī)為：" + this.engine);
}
}
let bc = new Car("引擎1");
console.log(bc.engine); // 引擎1
bc.disp(); // 發(fā)動(dòng)機(jī)為：引擎13 類的繼承
TypeScript 支持繼承類，即我們可以在創(chuàng)建類的時(shí)候繼承一個(gè)已存在的類，這個(gè)已存在的類稱為父類，繼承它的類稱為子類。
類繼承使用關(guān)鍵字extends，子類除了不能繼承父類的私有成員（方法和屬性）和構(gòu)造函數(shù)，其他的都可以繼承。TypeScript 一次只能繼承一個(gè)類，不支持繼承多個(gè)類，但 TypeScript 支持多重繼承（A 繼承 B，B 繼承 C）。
示例代碼：
// 定義一個(gè)動(dòng)物類Animal作為父類
class Animal {
name: string; // 字段
constructor(name: string) { // 構(gòu)造函數(shù)
this.name = name;
}
eat(): void {
console.log(this.name + "在吃");
}
}
// 定義一個(gè)Cat類作為子類，繼承父類Animal
class Cat extends Animal {
// 定義自己獨(dú)有的方法叫
say() {
console.log("喵喵喵");
}
}
// 創(chuàng)建Cat類的實(shí)例對(duì)象
let cat1 = new Cat("橘貓");
// 訪問父類的eat()方法
cat1.eat(); // 橘貓?jiān)诔?
// 訪問自己的say()方法
cat1.say(); // 喵喵喵繼承類的方法重寫（overwrite）：又稱為方法覆蓋。類繼承后，子類可以對(duì)父類的方法重新定義，這個(gè)過程稱之為方法的重寫。示例代碼如下：
// 定義一個(gè)動(dòng)物類Animal作為父類
class Animal {
eat(): void {
console.log("在吃飯");
}
}
// 定義一個(gè)Cat類作為子類，繼承父類Animal
class Cat extends Animal {
// 對(duì)父類的方法進(jìn)行重寫
eat(): void {
console.log("貓貓?jiān)诔贼~");
}
}
// 創(chuàng)建Cat類的實(shí)例對(duì)象
let cat1 = new Cat();
cat1.eat(); // 貓貓?jiān)诔贼~在類中，使用super關(guān)鍵字可以引用父類的屬性和方法，super就表示父類。例如，使用super調(diào)用父類的普通方法：
// 定義一個(gè)動(dòng)物類Animal作為父類
class Animal {
eat(): void {
console.log("在吃飯");
}
}
// 定義一個(gè)Cat類作為子類，繼承父類Animal
class Cat extends Animal {
eat(): void {
super.eat(); // 調(diào)用父類的eat()方法
}
}
// 創(chuàng)建Cat類的實(shí)例對(duì)象
let cat1 = new Cat();
cat1.eat(); // 在吃飯使用super調(diào)用父類的構(gòu)造方法時(shí)，super必須寫在子類構(gòu)造函數(shù)的第一條語句，如果父類的構(gòu)造函數(shù)中有參數(shù)，那么在super中也要將該參數(shù)傳遞進(jìn)去。示例代碼如下：
// 定義一個(gè)動(dòng)物類Animal作為父類
class Animal {
name: string;
constructor(name: string) {
this.name = name;
}
eat(): void {
console.log("在吃飯");
}
}
// 定義一個(gè)Cat類作為子類，繼承父類Animal
class Cat extends Animal {
age: number;
constructor(name: string, age: number) {
super(name); // 必須寫在第一條語句
this.age = age;
}
}4 static關(guān)鍵字
static關(guān)鍵字用于定義類的數(shù)據(jù)成員（屬性和方法）為靜態(tài)的，靜態(tài)成員可以直接通過類名調(diào)用。
示例代碼：
class StaticMem {
static num: number;
static disp(): void {
console.log("num值為：" + StaticMem.num);
}
}
StaticMem.num = 100; // 初始化靜態(tài)變量
StaticMem.disp(); // 調(diào)用靜態(tài)方法
// num值為：1005 抽象類和抽象方法
用abstract關(guān)鍵字定義抽象類和抽象方法，抽象類中的抽象方法不包含具體實(shí)現(xiàn)并且必須在派生類中實(shí)現(xiàn)。abstract抽象方法只能放在抽象類里面。抽象類和抽象方法用來定義標(biāo)準(zhǔn)。
抽象類不能用來創(chuàng)建對(duì)象，是專門用來被繼承的類。
示例：定義一個(gè)抽象類和抽象方法
abstract class Animal { // 定義一個(gè)抽象類
name: string;
constructor(name: string) {
this.name = name;
}
abstract eat(): void; // 定義一個(gè)抽象方法
}
如果對(duì)抽象方法進(jìn)行了具體的實(shí)現(xiàn)，那么就會(huì)報(bào)錯(cuò)：Method ‘eat’ Cannot have an implementation because it is marked abstract。
并且抽象類并不能被實(shí)例化，否則也會(huì)報(bào)錯(cuò)：Cannot create an instance of an abstract class。
如果某個(gè)類要繼承抽象類，那么這個(gè)類要實(shí)現(xiàn)抽象類中定義的所有方法，否則也會(huì)報(bào)錯(cuò)。
例如，設(shè)計(jì)一個(gè)Cat繼承Animal抽象類，如下所示，如果Cat類中什么方法都沒有，就會(huì)出現(xiàn)提示，Cat類并沒有實(shí)現(xiàn)抽象類中的抽象方法eat。
因此在繼承時(shí)，在Cat類中必須實(shí)現(xiàn)eat方法：
abstract class Animal { // 定義一個(gè)抽象類
name: string;
constructor(name: string) {
this.name = name;
}
abstract eat(): void;
}
class Cat extends Animal {
eat(): void {
console.log(this.name + "吃魚");
}
}6 類屬性權(quán)限修飾符
6.1 public（公有的）
public表示公有的、公開的，公有成員可以被任何地方訪問，默認(rèn)可見性
class Animal {
public move() { // 使用public修飾符表示公開的成員
console.log("走");
}
}
var p = new Animal();
p.move(); // 走
class Cat extends Animal {
bark() {
console.log("喵喵喵");
}
}
var c = new Cat();
c.move(); // 走
c.bark(); // 喵喵喵在類屬性或方法前面添加public關(guān)鍵字，來修飾該屬性或方法是公有的。因?yàn)?code>public是默認(rèn)可見性，所以可以直接省略。
6.2 protected（受保護(hù)的）
protected表示受保護(hù)的，僅對(duì)其聲明所在類和子類中（非實(shí)例對(duì)象）可見。在類屬性或方法前面添加protected關(guān)鍵字，可以修飾屬性或方法是受保護(hù)的。在子類的方法內(nèi)部可以通過this來訪問父類中受保護(hù)的成員，但是對(duì)實(shí)例不可見。
例如，在下面的代碼中，move方法被protected修飾了，對(duì)Animal類創(chuàng)建實(shí)例，該實(shí)例并不能訪問到move方法。
class Animal {
protected move() {
console.log("走");
}
}
var p = new Animal();
p.move(); // 不能訪問到move方法
如果設(shè)計(jì)一個(gè)Cat類繼承了Animal類，那么在Cat類的內(nèi)部可以通過this訪問到move方法。
class Animal {
protected move() {
console.log("走");
}
}
class Cat extends Animal {
bark() {
this.move();
}
}
var c = new Cat();
c.bark(); // 走6.3 private（受保護(hù)的）
private表示私有的，只在當(dāng)前類中可見，對(duì)實(shí)例對(duì)象和子類都是不可見的。在類屬性或方法前面添加private關(guān)鍵字，來修飾該屬性或方法是私有的。
例如，在Animal類中，move方法被private修飾，因此實(shí)例對(duì)象a無法對(duì)move方法進(jìn)行調(diào)用
class Animal {
private move() {
console.log("走");
}
}
var a = new Animal();
a.move(); // 報(bào)錯(cuò)
但是它可以在自己類內(nèi)部的方法中進(jìn)行調(diào)用：
class Animal {
private move() {
console.log("走");
}
eat() {
this.move(); // 使用正確不報(bào)錯(cuò)
}
}move方法同樣也不能被子類所調(diào)用，對(duì)子類不可見：
class Animal {
private move() {
console.log("走");
}
}
class Cat extends Animal {
bark() {
this.move(); // 無法調(diào)用，報(bào)錯(cuò)
}
}
6.4 readonly（只讀）
readonly表示只讀，用來防止在構(gòu)造函數(shù)之外對(duì)屬性進(jìn)行賦值。使用readonly關(guān)鍵字只能修飾屬性不能修飾方法。接口或者{}表示的對(duì)象類型，也可以使用readonly。
例如，在下面的代碼中，age被readonly修飾，是只讀屬性，因此在實(shí)例化時(shí)再對(duì)age進(jìn)行修改就會(huì)報(bào)錯(cuò)。
class Person {
readonly age: number = 18;
}
var p = new Person();
p.age = 19; // 報(bào)錯(cuò)，只讀屬性不能修改
如果不加readonly就可以修改：
class Person {
age: number = 18;
}
var p = new Person();
p.age = 19;
console.log(p.age); // 197 存取器
TypeScript支持通過getters/setters來截取對(duì)對(duì)象成員的訪問。
在類中設(shè)置某個(gè)屬性語法為：
set 屬性名(參數(shù)): [類型]{
this.屬性 = 參數(shù);
}
獲取某個(gè)屬性語法為：
get 屬性名(): [類型]{
return this.屬性;
}
示例代碼：
class Person {
// 將tall屬性設(shè)置為私有的，這樣無法通過實(shí)例來修改
// 私有變量約定用下劃線開頭
private _tall: number;
constructor(tall: number) {
this._tall = tall;
}
// 獲取tall的值
get height(): number {
return this._tall;
}
// 設(shè)置tall的值
set height(tall: number) {
this._tall = tall;
}
}
var p = new Person(160);
p.height = 180;
console.log(p.height); // 180到此這篇關(guān)于TypeScript面向?qū)ο蟪敿?xì)分析的文章就介紹到這了,更多相關(guān)TypeScript面向?qū)ο髢?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
js項(xiàng)目中前端如何實(shí)現(xiàn)無感刷新token
本文主要介紹了js項(xiàng)目中前端如何實(shí)現(xiàn)無感刷新token，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
關(guān)于JavaScript中高階函數(shù)的魅力詳解
高階函數(shù)：英文叫Higher-order function。JavaScript的函數(shù)其實(shí)都指向某個(gè)變量。下面這篇文章主要給大家介紹了關(guān)于JavaScript中高階函數(shù)的魅力，文中通過示例代碼介紹的非常詳細(xì)，需要的朋友可以參考下2018-09-09
這篇文章主要給大家介紹了關(guān)于webgl實(shí)現(xiàn)物體描邊效果的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用webgl具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
JS中判斷某個(gè)字符串是否包含另一個(gè)字符串的五種方法
本文給大家?guī)鞪S中判斷某個(gè)字符串是否包含另一個(gè)字符串的五種方法，有string對(duì)象的方法，match() 方法，RegExp對(duì)象的方法，test() 方法，exec() 方法，具體內(nèi)容詳情大家參考下本文2018-05-05
使用Three.js?實(shí)現(xiàn)虎年春節(jié)3D創(chuàng)意頁面
虎年春節(jié)將至，本文使用?React?+?Three.js技術(shù)棧，實(shí)現(xiàn)趣味?3D創(chuàng)意頁面，主要包括：ShadowMaterial、?MeshPhongMaterial等基本材質(zhì)的使用、使用?LoadingManager展示模型加載進(jìn)度、OrbitControls`的緩動(dòng)動(dòng)畫、TWEEN簡(jiǎn)單補(bǔ)間動(dòng)畫效果等，感興趣的朋友一起看看吧2022-01-01
這篇文章主要介紹了JS獲取及驗(yàn)證開始結(jié)束日期的方法.涉及javascript針對(duì)日期的獲取、比較及判斷等技巧,需要的朋友可以參考下2016-08-08
contenteditable可編輯區(qū)域設(shè)置換行實(shí)現(xiàn)技巧實(shí)例
這篇文章主要為大家介紹了contenteditable可編輯區(qū)域設(shè)置換行實(shí)現(xiàn)技巧實(shí)例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2024-01-01
這篇文章主要介紹了JS設(shè)計(jì)模式之策略模式概念與用法,簡(jiǎn)單分析了策略模式的基本概念、原理并結(jié)合實(shí)例形式分析了javascript實(shí)現(xiàn)與使用策略模式的相關(guān)操作技巧,需要的朋友可以參考下2018-02-02
javascript排序函數(shù)實(shí)現(xiàn)數(shù)字排序
這篇文章主要介紹了javascript排序函數(shù)實(shí)現(xiàn)數(shù)字排序的相關(guān)資料,附上示例，需要的朋友可以參考下2015-06-06
本文主要介紹了js多維數(shù)組降維的5種方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04