Typescript使用修飾器混合方法到類的實例
Typescript使用修飾器混合方法到類
mixins.ts
//導出混合方法 export function mix(...args){ return function (t){ Object.assign(t.prototype,...args);//添加方法到對象原型 } }
test_mixins.ts
import { mix} from './mixins';//導入混合方法 //聲明要混合入類的方法 let methodToMix = { MixFunc(){console.log('this method use for Mix');} } @mix(methodToMix)//在類聲明中使用了修飾器@mix class MyClass{} let obj = new MyClass();//實例化類,類對象具有修飾器混入的方法MixFunc obj.MixFunc();//調用混入的方法
測試結果 :
Typescript類(class)與修飾符的使用
簡介
通過 class 關鍵字定義一個類,然后通過 new 關鍵字可以方便的生產一個類的實例對象,這個生產對象的過程叫 實例化,類的成員就是類中所有的屬性和方法。
// 定義類 class Person { ? // 名稱 ? name: string ? // 年齡 ? age: number ? // 構造函數 ? constructor(name: string, age: number) { ? ? // 更新熟悉數據 ? ? this.name = name ? ? this.age = age ? } } // 發(fā)送一個人的信息 function sendPerson (person: Person) { ? console.log(`姓名:${person.name},年齡:${person.age}`) } // 實例化對象 const p = new Person('dzm', 20) sendPerson(p) // 名稱:dzm,年齡:20
實例在new出來的時候,它實際是調用了類中的一個方法進行初始化,這個方法被叫做構造器,一般都會在類中顯示地寫上 constructor 方法,如果沒有顯示定義的 constructor,就會調用系統(tǒng)自帶的 constructor 構造函數。
成員修飾符
訪問修飾符的作用就是用于限制別人亂用類中的東西
訪問修飾符
public
:公開的,誰都能用(默認就是 public)private
:私有的,僅類自己能使用,子類與外部都不能使用protected
:受保護的,僅類和類的子類能使用,外部不能使用
// 定義類 class Person { ? // 公開參數 ? name: string ? // 公開參數 ? public age: number ? // 私有參數 ? private num:number = 10 ? // 內部參數 ? protected num1: number = 20 ? // 構造函數 ? constructor(name: string, age: number) { ? ? // 更新熟悉數據 ? ? this.name = name ? ? this.age = age ? } ? // 發(fā)送個人信息 ? public send() { ? ? console.log('發(fā)送成功1') ? } ? // 私有方法 ? private post() { ? ? console.log('發(fā)送成功2') ? } }
只讀修飾符
readonly
:只能讀不能寫
class Person { ? // 聲明賦值 ? readonly name = 'dzm' } let p = new Person() console.log(p.name) // 不能賦值 // p.name = 'xxx'
readonly 只能在 constructor 構造方法初始化時賦值,或者聲明時賦值,之后都不能在修改值。
class Person{ ? readonly name: string ? // 構造初始化賦值 ? constructor(name: string) { ? ? this.name = ?name ? } }
靜態(tài)修飾符
static
:靜態(tài)成員無需實例化,直接通過類名調用
// 定義類 class Person { ? // 公開參數 ? name: string ? // 公開參數 ? public age: number ? // 靜態(tài)參數 ? static num:number = 10 ? // 構造函數 ? constructor(name: string, age: number) { ? ? // 更新熟悉數據 ? ? this.name = name ? ? this.age = age ? } ? // 發(fā)送個人信息 ? static send() { ? ? console.log('發(fā)送成功') ? } } // 不需要實例化對象,通過類名就能進行訪問 console.log(Person.num) Person.send()
總結
1、上面總共分為三種類型修飾符:訪問修飾符、只讀修飾符、靜態(tài)修飾符。
2、修飾符是可選的,在沒有寫任何修飾符的情況下,默認為 public。
3、同類型修飾符只能有一個,也就是上面 三種修飾符 可以組合起來修飾一個成員。
4、三種類型修飾符有先后順序,分別是:訪問、靜態(tài)、只讀,即:public/static/protected、static、readonly
實現(xiàn)(implements)
類可以被多個接口協(xié)議約束,類也可以作為接口使用,也就是 implements 后面可以添加 單個或多個 接口與類。
格式:class 類名 implements 接口名, 接口名, 類名 ... {}
例如:class Person implements Action, Info {}
案例
// 定義行動接口 interface Action { ? // 跑起來 ? run():void } // 定義信息接口 interface Info { ? // 用戶名稱 ? name: string } // 定義一個類,并實現(xiàn)上面的接口 class Person implements Action, Info { ? // 用戶名稱 ? name: string ? // 跑起來 ? run(): void { ? ? console.log(`${this.name} 跑起來了`) ? } } // 定義一個類,并實現(xiàn)上面的類接口 class Person2 implements Person { ? name: string ? run(): void { ? ? console.log(`${this.name} 跑起來了`) ? } } // 實例化 const p = new Person() p.name = 'DZM' p.run() // 實例化 const p2 = new Person2() p2.name = 'XYQ' p2.run()
繼承(extends)
類不能繼承接口協(xié)議(interface),只能通過 implements 關鍵詞進行實現(xiàn),支持實現(xiàn)多個接口協(xié)議。
類不支持多繼承,也就是 extends 后面只能存在一個父類,但是可以通過多個接口協(xié)議來實現(xiàn)多繼承。
- 格式:class 類名 extends 類名 implements 接口名, 接口名, 類名 ... {}
- 例如:class Person3 extends Person implements Action, Info {}
接口支持多繼承。
- 格式:interface 接口名 extends 接口名, 接口名, 類名 ... {}
- 例如:interface Person extends Action, Info {}
案例
// 定義行動接口 interface Action { // 跑起來 run():void } // 定義信息接口 interface Info { // 用戶名稱 name: string } // 定義一個類,并實現(xiàn)上面的接口 class Person implements Action, Info { // 用戶名稱 name: string // 跑起來 run(): void { console.log(`${this.name} 跑起來了`) } } // 定義一個類,并實現(xiàn)上面的類接口 class Person2 extends Person { name: string run(): void { console.log(`${this.name} 跑起來了`) } } // 定義一個類,并實現(xiàn)上面的類接口 class Person3 extends Person implements Action, Info { name: string run(): void { console.log(`${this.name} 跑起來了`) } } // 實例化 const p = new Person() p.name = 'DZM' p.run() // 實例化 const p2 = new Person2() p2.name = 'XYQ' p2.run()
以上為個人經驗,希望能給大家一個參考,也希望大家多多支持腳本之家。
相關文章
使用bootstrap插件實現(xiàn)模態(tài)框效果
今天我們選擇使用著名的 bootstrap 庫的模態(tài)框插件 modal.js 來實現(xiàn)模態(tài)框效果,同時也使大家進一步熟悉 bootstrap 的插件使用,需要的朋友可以參考下2017-05-05淺談es6中export和export default的作用及區(qū)別
下面小編就為大家分享一篇淺談es6中export和export default的作用及區(qū)別,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-02-02