## 4\. 函數
### 4.1 函數的定義
~~~
function hello(name:string):void {
console.log('hello',name);
}
hello('zfpx');
~~~
### 4.2 函數表達式
* 定義函數類型
~~~
type GetUsernameFunction = (x:string,y:string)=>string;
let getUsername:GetUsernameFunction = function(firstName,lastName){
return firstName + lastName;
}
~~~
### 4.3 沒有返回值
~~~
let hello2 = function (name:string):void {
console.log('hello2',name);
}
hello('zfpx');
hello2('zfpx');
~~~
### 4.4 可選參數
在TS中函數的形參和實參必須一樣,不一樣就要配置可選參數,而且必須是最后一個參數
~~~
function print(name:string,age?:number):void {
console.log(name,age);
}
print('zfpx');
~~~
### 4.5 默認參數
~~~
function ajax(url:string,method:string='GET') {
console.log(url,method);
}
ajax('/users');
~~~
### 4.6 剩余參數
~~~
function sum(...numbers:number[]) {
return numbers.reduce((val,item)=>val+=item,0);
}
console.log(sum(1,2,3));
~~~
### 4.7 函數重載
* 在Java中的重載,指的是兩個或者兩個以上的同名函數,參數不一樣
* 在TypeScript中,表現為給同一個函數提供多個函數類型定義
~~~
let obj: any={};
function attr(val: string): void;
function attr(val: number): void;
function attr(val:any):void {
if (typeof val === 'number') {
obj.age=val;
} else {
obj.name=val;
}
}
attr('zfpx');
attr(9);
attr(true);
console.log(obj);
~~~
~~~
//如何定義類
//Property 'name' has no initializer and is not definitely assigned
//in the constructor.ts(2564)
namespace a {
class Person {
name: string = 'zhufeng';
age: number;
constructor() {
this.age = 10;
}
}
let p1 = new Person();
console.log(p1.name);
console.log(p1.age);
}
namespace b {
// 存取器 getter setter
class Person {
myname: string;
constructor(name: string) {
this.myname = name;
}
get name() {
return this.myname;
}
set name(newVal: string) {
this.myname = newVal.toUpperCase();
}
}
let p = new Person('zhufeng');
console.log(p.name);//zhufeng
p.name = 'jiagou';
console.log(p.name);
}
namespace c {
class Person {
constructor(public name: string) {
}
}
let p = new Person('zhufeng');
p.name = 'jiagou';
}
//繼承
/**
* 子類繼承父類后子類的實例上就擁有了父類中的屬性和方法
* 訪問修飾符 public protected private
* public 自己 自己的子類 和其它類都可能訪問
* protected 受保護的 自己和自己的子類能訪問 ,其它 類不能訪問
* private 私有的 只能自己訪問,自己的子類不能訪問,其它更不行了
*/
namespace d {
class Person {
public name: string;
protected age: number;
private amount: number;
constructor(name: string, age: number) {
this.name = name;
this.age = age;
this.amount = 100;
}
getName() {
return this.name;
}
setName(newName: string) {
this.name = newName;
}
}
class Student extends Person {
static type = 'Student'
stuNo: number;
constructor(name: string, age: number, stuNo: number) {
super(name, age);
this.stuNo = stuNo;
}
static getType() {
return Student.type;
}
getStuNo() {
return this.name + this.age + this.amount + this.stuNo;
}
setStuNo(newStuNo: number) {
this.stuNo = newStuNo;
}
}
let s = new Student('zhufeng', 10, 1);
console.log(s.name);
console.log(s.age);
console.log(s.amount);
console.log(Student.type);
Student.getType();
}
~~~
### 5.5 繼承
* 子類繼承父類后子類的實例就擁有了父類中的屬性和方法,可以增強代碼的可復用性
* 將子類公用的方法抽象出來放在父類中,自己的特殊邏輯放在子類中重寫父類的邏輯
* super可以調用父類上的方法和屬性
~~~
class Person {
name: string;//定義實例的屬性,默認省略public修飾符
age: number;
constructor(name:string,age:number) {//構造函數
this.name=name;
this.age=age;
}
getName():string {
return this.name;
}
setName(name:string): void{
this.name=name;
}
}
class Student extends Person{
no: number;
constructor(name:string,age:number,no:number) {
super(name,age);
this.no=no;
}
getNo():number {
return this.no;
}
}
let s1=new Student('zfpx',10,1);
console.log(s1);
~~~
- 文檔簡介
- 基礎面試題【珠峰2019.8】
- P01_call,aplly區別
- P02_綜合面試題講解2-2
- P03_箭頭函數和普通函數區別-綜合面試題講解2-3
- P05_實現indexOf
- P06_綜合面試題講解2-6
- P07_URL解析題
- P08_原型題
- P09_圖片延時加載
- P10_正則-包含數字字母下劃線
- P11_綜合面試題講解2-11
- P12_英文字母加空格
- P13_數組扁平化并去重
- P14_模擬實現new
- P15_合并數組
- P16_定時器,打印012345
- P17_匿名函數輸出值問題
- P18_a在什么情況下打印輸出+1+1+1
- P19_對數組的理解
- P20_冒泡排序
- P21_插入排序
- P22_快速排序
- P23_銷售額存在對象中
- P24_求數組的交集
- P25_旋轉數組
- P26_ [函數柯理化思想]
- P27_ [柯理化函數的遞歸]
- 網絡協議【珠峰2019.6】
- TypeScript+Axios入門+實戰【珠峰2019.11】
- 1.數據結構
- 2.函數和繼承
- 3.裝飾器
- 4.抽象類-接口-泛型
- 05-結構類型系統和類型保護
- 06-類型變換
- AST-抽象語法樹
- React性能優化【珠峰2019.10】
- 1-react性能優化
- 2-react性能優化
- 3.react-immutable
- React Hooks【珠峰2019.12】
- 前端框架及項目面試
- 第07章 React 使用
- 7-1 React使用-考點串講
- 7-2 JSX基本知識點串講
- 7-3 JSX如何判斷條件和渲染列表
- 7-4 React事件為何bind this
- 7-5 React事件和DOM事件的區別
- 7-6 React表單知識點串講
- 7-7 React父子組件通訊
- 7-8 setState為何使用不可變值
- 7-9 setState是同步還是異步
- 7-10 setState合適會合并state
- 7-11 React組件生命周期
- 7-12 React基本使用-知識點總結和復習
- 7-13 React函數組件和class組件有何區別
- 7-14 什么是React非受控組件
- 7-15 什么場景需要用React Portals
- 7-16 是否用過React Context
- 7-17 React如何異步加載組件
- 7-18 React性能優化-SCU的核心問題在哪里
- 7-19 React性能優化-SCU默認返回什么
- 7-20 React性能優化-SCU一定要配合不可變值
- 7-21 React性能優化-PureComponent和memo
- 7-22 React性能優化-了解immutable.js
- 7-23 什么是React高階組件
- 7-24 什么是React Render Props
- 7-25 React高級特性考點總結
- 7-26 Redux考點串講
- 7-27 描述Redux單項數據流
- 7-28 串講react-redux知識點
- 7-29 Redux action如何處理異步
- 7-30 簡述Redux中間件原理
- 7-31 串講react-router知識點
- 7-32 React使用-考點總結
- 第08章 React 原理
- 8-1 React原理-考點串講
- 8-2 再次回顧不可變值
- 8-3 vdom和diff是實現React的核心技術
- 8-4 JSX本質是什么
- 8-5 說一下React的合成事件機制
- 8-6 說一下React的batchUpdate機制
- 8-7 簡述React事務機制
- 8-8 說一下React組件渲染和更新的過程
- 8-9 React-fiber如何優化性能
- 第09章 React 面試真題演練
- 9-1 React真題演練-1-組件之間如何通訊
- 9-2 React真題演練-2-ajax應該放在哪個生命周期
- 9-3 React真題演練-3-組件公共邏輯如何抽離
- 9-4 React真題演練-4-React常見性能優化方式
- 9-5 React真題演練-5-React和Vue的區別
- 第10章 webpack 和 babel
- 10-1 webpack考點梳理
- 10-2 webpack基本配置串講(上)
- 10-3 webpack基本配置串講(下)
- 10-4 webpack如何配置多入口
- 10-5 webpack如何抽離壓縮css文件
- 10-6 webpack如何抽離公共代碼和第三方代碼
- 10-7 webpack如何實現異步加載JS
- 10-8 module chunk bundle 的區別
- 10-9 webpack優化構建速度-知識點串講
- 10-11 happyPack是什么
- 10-12 webpack如何配置熱更新
- 10-13 何時使用DllPlugin
- 10-14 webpack優化構建速度-考點總結和復習
- 10-15 webpack優化產出代碼-考點串講
- 10-16 什么是Tree-Shaking
- 10-17 ES Module 和 Commonjs 的區別
- 10-18 什么是Scope Hostin
- 10-19 babel基本概念串講
- 10-20 babel-polyfill是什么
- 10-21 babel-polyfill如何按需引入
- 10-22 babel-runtime是什么
- 10-23 webpack考點總結和復習
- 10-24 webpack面試真題-前端代碼為何要打包
- 10-25 webpack面試真題-為何Proxy不能被Polyfill
- 10-26 webpack面試真題-常見性能優化方法