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 異步遍歷的實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
onbeforeunload與onunload事件異同點(diǎn)總結(jié)
本文對(duì)onbeforeunload與onunload事件的異同點(diǎn)、觸發(fā)于、可以用在哪些元素以及解決刷新頁面時(shí)不調(diào)用onbeforeunload等等，感興趣的朋友可以參考下哈2013-06-06
本文主要對(duì)JavaScript常量定義進(jìn)行詳細(xì)介紹，具有一定的參考價(jià)值，下面跟著小編一起來看下吧2017-01-01
JS異步文件分片斷點(diǎn)上傳的實(shí)現(xiàn)思路
在項(xiàng)目中有時(shí)會(huì)遇到大文件上傳，經(jīng)常會(huì)出現(xiàn)鏈接超時(shí)的問題，所以就需要使用文件分片上傳的方式來上傳大文件。下面通過本文給大家介紹js異步文件分片斷點(diǎn)上傳的實(shí)例代碼，需要的的朋友參考下吧2016-12-12
JavaScript做大整數(shù)加法計(jì)算的代碼實(shí)現(xiàn)
這篇文章主要帶大家去了解前端如何做大整數(shù)加法計(jì)算,文中通過代碼示例介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-09-09
JavaScript 學(xué)習(xí)點(diǎn)滴記錄
HTML DOM (Document Object Model文檔對(duì)象模型) DOM是一種與瀏覽器，平臺(tái)，語言的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件. DOM是以層次結(jié)構(gòu)組織的節(jié)點(diǎn)或信息片斷的集合.2009-04-04
JavaScript使用showdown實(shí)現(xiàn)markdown預(yù)覽功能
Showdown.js 是一個(gè)JavaScript庫,用于將Markdown文本轉(zhuǎn)換為HTML,這篇文章將給大家介紹了JavaScript使用showdown實(shí)現(xiàn)markdown預(yù)覽功能,文中通過代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-01-01
理解Javascript的caller,callee,call,apply區(qū)別
理解Javascript的caller,callee,call,apply區(qū)別...2007-03-03
這篇文章主要介紹了按鈕接受回車事件的三種實(shí)現(xiàn)方法,需要的朋友可以參考下2014-06-06
javascript:文字不間斷向左移動(dòng)的實(shí)例代碼
這篇文章介紹了javascript:文字不間斷向左移動(dòng)的實(shí)例代碼，有需要的朋友可以參考一下2013-08-08