建站
咨詢
售后
建站咨詢
新聞中心
函數(shù)與類
前言本
文章是Typescript系列學(xué)習(xí)文章，旨在利用碎片時間快速高效上手學(xué)習(xí)Typescript，也可以對Typescript進行復(fù)習(xí)知識點，溫故知新。
10年積累的成都網(wǎng)站建設(shè)、網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認識你，你也不認識我。但先網(wǎng)站設(shè)計后付款的網(wǎng)站建設(shè)流程，更有鞏義免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。
前文回顧
- 《你好，我叫Typescript 01 ── 數(shù)據(jù)類型》
- 《你好，我叫Typescript 02 ── 變量與接口》
- 《你好，我叫Typescript 03 ── 泛型》
函數(shù)
「蹦蹦」：跳跳，好幾天不見，我最近在學(xué)習(xí)Typescript又遇到了新問題，亟需你的解答。
「跳跳」：啥問題呀，蹦蹦。
「蹦蹦」：什么是快樂星球，什么是...不對不對 什么是函數(shù)?TS的函數(shù)和JS的函數(shù)有啥區(qū)別?
「跳跳」：那就帶你一起研究。
介紹
「跳跳」：函數(shù)是定義行為的語法，其實是為JS添加額外的功能。同樣的可以創(chuàng)建有名稱的函數(shù)和匿名函數(shù)。
- function add(num1:number,num2:number):number{
- return num1 + num2;
- }
- console.log(add(1,2));//3
- let addNum = (num1:number,num2:number):number => num1+num2;
- console.log(addNum(1,2));//3
我們可以給每個參數(shù)添加類型之后再為函數(shù)本身添加返回值類型。 TypeScript能夠根據(jù)返回語句自動推斷出返回值類型，因此我們通常省略它。
簡而言之，函數(shù)類型包含「參數(shù)類型」和「返回值類型」兩個部分，當(dāng)寫出完整類型的時候，兩部分都需要完整書寫。其實，可以以參數(shù)列表的形式寫出參數(shù)類型，為每一個參數(shù)指定一個名字和類型，增加代碼的可讀性。
只要參數(shù)類型是匹配的，那么就認為它是有效的函數(shù)類型，而不在乎參數(shù)名是否正確。
第二部分是返回值類型。如之前提到的，返回值類型是函數(shù)類型的必要部分，如果函數(shù)沒有返回任何值，你也必須指定返回值類型為 void而不能留空。
在賦值語句的一邊指定了類型但是另一邊沒有類型的話，TypeScript編譯器會自動識別出類型。
函數(shù)參數(shù)定義的方式
1.直接聲明函數(shù)參數(shù)
- function add(num1:number,num2:number):number{
- return num1 + num2;
- }
- add(1,2);//3
2.解構(gòu)賦值聲明函數(shù)參數(shù)
- function add({num1,num2}:{num1:number,num2:number}):number{
- return num1 + num2;
- }
- add({x:1,y:2});//3
3.剩余參數(shù)聲明函數(shù)參數(shù)
- function add(...rest:number[]){
- return rest.reduce((pre,cur)=>pre+cur);
- }
- add(2,3,4,5);//14
- add("yichuan",3);//報錯，不能使用字符串
4.命名式聲明函數(shù)參數(shù)
- type add = (num1:number,num2:number)=>number;
- interface add{
- (x:number,y:number):number
- }
調(diào)用方式：
- let addFun:add=>(num1,num2)=>num1+num2;
5.可選參數(shù)和默認參數(shù)
- function add(num1:number,num2:number,num3?:number):number{
- return num1 + num2;
- }
顯而易見：num1和num2是默認參數(shù)，num3是可選參數(shù)。切記，默認參數(shù)放前面，可選參數(shù)放后面。
this
在JS中的this指向問題很惱火，this的指向是在函數(shù)被調(diào)用時進行指定的，但是得整明白函數(shù)調(diào)用的上下文是什么，這是比較困擾的。其實兩者沒多大區(qū)別。
幸運的是，TS能夠通知你錯誤地使用了this的地方。
函數(shù)重載
函數(shù)重載或方法重載是使用相同名稱和不同參數(shù)數(shù)量或類型創(chuàng)建多個方法的一種能力。
- function addFun(num1:number,num2:number):number;
- function addFun(num1:string,num2:string):string;
- function addFun(num1:string,num2:number):string;
- function addFun(num1:number,num2:string):string;
- function addFun(num1:any,num2:any):any{
- if(typeof num1 === "string" || typeof num2 === "string"){
- return num1.toString() + num2.toString();
- }
- return num1 + num2;
- }
- console.log(addFun(1,2));
「蹦蹦」：我們可以看到大多數(shù)的庫源碼都是進行函數(shù)重載的方式，這是為什么?
「跳跳」：這是因為使用函數(shù)重載后，其他人只要看到函數(shù)重載聲明就可以知道函數(shù)的調(diào)用方式。
函數(shù)重載的方式，就是ts會從一開始查找類型，如果匹配就返回函數(shù)類型，如果不匹配就到下一個。 因此，在定義重載的時候，一定要把最精確的定義放在最前面?！竧ips: 維護一個公共組件時, 可使用這種方式讓使用者和后面維護者快速知道函數(shù)的調(diào)用方式.」
類
「蹦蹦」：TS的類和JS有啥不同?
「跳跳」：在es6前，傳統(tǒng)的Javascript需要使用函數(shù)和原型鏈繼承的方式才能實現(xiàn)可重用的組件，但是這種對于不了解JS原型鏈原理的程序員卻顯得困難。而ES6引入了類的思想，使得程序員可以基于類進行面向?qū)ο蟮姆绞骄幊獭?/p>
類的屬性和方法
「蹦蹦」：在面向?qū)ο缶幊痰恼Z言中，類可以創(chuàng)造對象的藍圖，描述所要創(chuàng)建對象的公共屬性和方法。
- class Person{
- //實例屬性
- name: string;
- age: number;
- //私有字段
- #score:number;
- //靜態(tài)屬性
- static height:number = 180;
- //
- readonly weight:number = 130;
- //構(gòu)造函數(shù)
- constructor(name:string,age:number,score:number){
- this.name = name;
- this.age = age;
- this.#score = score;
- }
- //實例方法
- getName(){
- return this.name;
- }
- //靜態(tài)方法
- static getAge(){
- return this.age;
- }
- }
- let person:Person = new Person("wenbo",12);
- console.log(person.getName());
- console.log(Person.height);
- person.name = "zhaoshun";
- console.log(person.getName());
- Person.height = 170;
- console.log(Person.height);
- person.weight = 110;
- console.log(person.weight);
- 實例屬性(成員屬性)：直接在類中定義的屬性就是實例屬性，需要通過對象的實例進行訪問。
- 靜態(tài)屬性(類屬性)：在屬性前使用static關(guān)鍵字可以定義類屬性(靜態(tài)屬性)，可以直接通過類進行訪問。
- 私有字段：在屬性前加上#，即可將屬性變成私有屬性，不能在包含的類之外訪問，甚至不能被檢測到。每個私有屬性都唯一限定了其包含的類，不能在私有屬性上使用ts的可訪問修飾符(public、private)。
- 構(gòu)造函數(shù)(執(zhí)行初始化操作)：構(gòu)造函數(shù)會在對象創(chuàng)建時調(diào)用，在實例方法中，this就表示當(dāng)前的實例.在構(gòu)造函數(shù)中當(dāng)前對象就是當(dāng)前新建的那個對象，可以通過this向新建的對象中添加屬性。
- 實例方法(成員方法)：直接在類中定義的方法就是實例方法，需要通過對象的實例進行調(diào)用。在方法中可以通過this來表示當(dāng)前調(diào)用方法的對象。誰調(diào)用該方法，就指向誰。
- 靜態(tài)方法(類方法)：在方法前使用static關(guān)鍵字可以定義類方法(靜態(tài)方法)，可以直接通過類進行訪問。
繼承
基于類的程序設(shè)計中一種最基本的模式是允許使用繼承來擴展現(xiàn)有的類。
- class Animal {
- move(distanceInMeters: number = 0) {
- console.log(`Animal moved ${distanceInMeters}m.`);
- }
- }
- class Dog extends Animal {
- bark() {
- console.log('Woof! Woof!');
- }
- }
- const dog = new Dog();
- dog.bark();
- dog.move(10);
- dog.bark();
如上所示是最基本的繼承：類從基類中繼承了屬性和方法。這里，Dog是一個派生類，它派生自Animal基類，通過 extends關(guān)鍵字。派生類通常被稱作 子類，基類通常被稱作 超類。
因為Dog繼承了Animal的功能，因此我們可以創(chuàng)建一個Dog的實例，它能夠bark()和move()。
公共，私有與受保護的修飾符
在TS中可以給類的屬性、方法及構(gòu)造器設(shè)置修飾符，來限定它們的作用范圍。默認修飾符是public，因此可以當(dāng)前類和子類自由訪問程序中定義的成員。
「tip: 在寫類時, 要養(yǎng)成隨手添加成員修飾符的習(xí)慣.」
- class Father{
- //公共成員
- public name:string;
- //私有成員
- private age:number;
- //受保護成員
- protected address:string;
- public constructor(name:string,age:number,address:string){
- this.name = name;
- this.age = age;
- this.address = address;
- }
- public eat(meters:number){
- console.log(`${this.name} moved ${meters}`);
- }
- }
- class Son extends Father{
- constructor(){
- super()
- }
- test(){
- console.log(this.name);//可訪問
- console.log(this.age);//屬性“age”為私有屬性，只能在類“Father”中訪問。
- console.log(this.address);//可訪問
- }
- }
- const bigLiu = new Father("bigLiu",32,"四川省成都市");
- console.log(bigLiu.name);//可訪問
- console.log(bigLiu.age);//屬性“age”為私有屬性，只能在類“Father”中訪問。
- console.log(bigLiu.address);//屬性“address”受保護，只能在類“Father”及其子類中訪問。
- const smallLiu = new Son();
- console.log(bigLiu.name);//可訪問
- console.log(bigLiu.age);//屬性“age”為私有屬性，只能在類“Father”中訪問。
- console.log(bigLiu.address);//屬性“address”受保護，只能在類“Father”及其子類中訪問。
訪問器(存取器)
TypeScript支持通過 getters/setters來截取對對象成員的訪問。它能幫助你有效的控制對對象成員的訪問。
- class Greeter {
- constructor(message: string) {
- this.greeting = message;
- }
- greeting: string;
- get hello() {
- return this.greeting;
- }
- set hi(x) {
- this.greeting = x;
- }
- }
- const x = new Greeter('eeee')
- x.hi('22');
- x.hello = '2' // 報錯, 不能修改
實際上就是使用getters/setters來截取對對象成員的訪問。解析出來的源碼如下:
抽象類
使? abstract 關(guān)鍵字聲明的類，我們稱之為抽象類。抽象類不能被實例化，因為它??包含?個或多個抽象?法。所謂的抽象?法，是指不包含具體實現(xiàn)的?法：
- abstract class Person {
- constructor(public name: string){}
- abstract say(words: string) :void;
- }
- // Cannot create an instance of an abstract class.(2511)
- const lolo = new Person(); // Error
抽象類不能被直接實例化，我們只能實例化實現(xiàn)了所有抽象?法的?類。具體如下所示：
- abstract class Person {
- constructor(public name: string){}
- // 抽象?法
- abstract say(words: string) :void;
- }
- class Developer extends Person {
- constructor(name: string) {
- super(name);
- }
- say(words: string): void {
- console.log(`${this.name} says ${words}`);
- }
- }
- const lolo = new Developer("lolo");
- lolo.say("I love ts!"); // lolo says I love ts!
小結(jié)
「跳跳」：其實本篇文章主要介紹了：函數(shù)和類的概念、繼承、各種屬性等等。
參考文章
- 阿寶哥的《重學(xué)TS》
- 《TS中文文檔》
文章標題：前端|你好，我叫TypeScript04──函數(shù)與類
URL分享：http://www.dlmjj.cn/article/dhojhig.html
