TypeScript從入門到實(shí)踐專欄是博主在學(xué)習(xí)和工作過程中的總結(jié)，實(shí)用性非常強(qiáng)，歡迎訂閱哦，學(xué)會(huì)TS不迷路。
函數(shù)默認(rèn)參數(shù)/可選參數(shù)
對(duì)于同一個(gè)函數(shù)我們?cè)诓煌瑘?chǎng)景下傳參，參數(shù)有時(shí)候全部需要，有時(shí)候部分需要，定義多個(gè)同名函數(shù)就會(huì)報(bào)錯(cuò)，那么該怎么實(shí)現(xiàn)這個(gè)操作呢？我們可以為函數(shù)設(shè)置默認(rèn)參數(shù)和可選參數(shù)。
給每個(gè)參數(shù)添加類型之后，可以不用給函數(shù)本身添加返回值類型，因?yàn)門S能根據(jù)返回語句自動(dòng)推斷出返回值類型
function start(name:string,age:number,phone?:number,sex?:string):string{ if(phone&&sex){ return `name:${name},age:${age},phone:${phone},sex:${sex}` }else{ return `name:${name},age:${age}` } } start('zhangsan','14') start('zhangsan','14',15678777777,'男')
另外我們看它編譯后的樣子，其中返回值使用了concat來連接字符串，也讓我們學(xué)習(xí)到模版字符串的實(shí)現(xiàn)原理。
function start(name, age, phone, sex) { if (phone && sex) { return "name:".concat(name, ",age:").concat(age, ",phone:").concat(phone, ",sex:").concat(sex); } else { return "name:".concat(name, ",age:").concat(age); } } start('zhangsan', 14); start('zhangsan', 14, 15678777777, '男');
但是我們要是有很多場(chǎng)景，參數(shù)類型也都不一致，我們這樣寫很難維護(hù)，并且定義的規(guī)范很難適用于實(shí)際多個(gè)場(chǎng)景，那么我們可以使用函數(shù)重載來處理。
函數(shù)重載
什么事函數(shù)重載呢？當(dāng)我們多次調(diào)用函數(shù)時(shí)傳遞不同參數(shù)數(shù)量或者類型，函數(shù)會(huì)做出不同處理。
1、函數(shù)簽名
這里介紹個(gè)名次「函數(shù)簽名」，顧名思義，函數(shù)簽名主要定義了參數(shù)及參數(shù)類型，返回值及返回值類型。函數(shù)簽名不同，函數(shù)會(huì)做出不同的處理，這是我對(duì)函數(shù)重載的理解。
2、構(gòu)造器重載
舉個(gè)例子，聲明一個(gè)類Course，里面寫一個(gè)start的方法，我們調(diào)用 start時(shí)傳入不同參數(shù)類型已經(jīng)參數(shù)個(gè)數(shù)，start方法會(huì)做出不同處理，那么怎么實(shí)現(xiàn)呢？具體如下：
type Combinable = number | string; class Course { begin(name: number, score: number): string; begin(name: string, score: string): string; begin(name: string, score: number): string; begin(name: number, score: string): string; begin(name: Combinable, score: Combinable) { if (typeof name === 'string' || typeof score === 'string') { return 'student:' + name + ':' + score; } } } const course = new Course(); course.begin(111, 5); course.begin('zhangsan', 5); course.begin(5, 'zhangsan');
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
-
17
-
18
-
19
以上代碼中定義了4個(gè)重載前面和1個(gè)實(shí)現(xiàn)簽名。
3、聯(lián)合類型函數(shù)重載
聲明一個(gè)函數(shù)arithmetic，參數(shù)類型為聯(lián)合類型，返回值也是聯(lián)合類型，但是如下代碼卻報(bào)錯(cuò)了。
function arithmetic(x: number | string): number | string { if (typeof x === 'number') { return x; } else { return x+'是字符串'; } } arithmetic(1).length;
原因是沒有明確函數(shù)string類型沒有toFixed屬性`，那么怎么用函數(shù)重載解決這個(gè)報(bào)錯(cuò)問題呢？
我們可以可以根據(jù)傳參的類型和函數(shù)返回值聲明多個(gè)同名的函數(shù)，只是類型和返回值不同而已。
function arithmetic(x: number): number; function arithmetic(x: string): string; function arithmetic(x: number | string): number | string { if (typeof x === 'number') { return x; } else { return x+'是字符串'; } } arithmetic(1).toFixed(1);
這樣就不會(huì)報(bào)錯(cuò)啦，因?yàn)橐呀?jīng)識(shí)別到arithmetic(1)的返回值是number類型。
拓展JS中函數(shù)重載
JS中函數(shù)重載怎么實(shí)現(xiàn)呢？
1、利用arguments參數(shù)
var arr = [1,2,3,4,5]; Array.prototype.search = function() { var len = arguments.length; switch(len){ case 0: return this; case 1: return `${arguments[0]}`; case 2: return `${arguments[0]},${arguments[1]}`; } } console.log(arr.search()) console.log(arr.search(1)) console.log(arr.search(1,2))
-
1
-
2
-
3
-
4
-
5
-
6
-
7
-
8
-
9
-
10
-
11
-
12
-
13
-
14
-
15
-
16
2、利用閉包和arguments
function addMethod (obj, name, fn) { var old = obj[name]; obj[name] = function () { if (fn.length === arguments.length) { return fn.apply(this, arguments) } else if (typeof old === 'function') { return old.apply(this, arguments) } } } var person = {name: 'zhangsan'} addMethod(person, 'getName', function () { console.log(this.name + '---->' + 'getName1') }) addMethod(person, 'getName', function (str) { console.log(this.name + '---->' + str) }) addMethod(person, 'getName', function (a, b) { console.log(this.name + '---->' + (a + b)) }) person.getName() person.getName('zhangsan') person.getName(10, 20)
