TS入门006函数上

函数

1
2
3
4
5
6
7
8
9
10
11
function hi(){ // hi == address 100
    console.log('hi')
}

let hi2 = function (){ // hi == address 390
    console.log('hi')
}

let hi3 = ()=>{    // hi3 == address 401
    console.log('hi')
}

函数参数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 带参数
function hi(name: string,age: number){
    console.log(`hi,${name},${age}`)

}

// 可选参数
function hi2(name: string,age?: number){
    console.log(`hi,${name},${age}`)
}

// 默认值
// 为什么不声明 age的类型 因为这个类型可以推断
// age = 18 等价于 age: number = 18
function hi3(name: string,age = 18){
    console.log(`hi,${name},${age}`)
}

hi('hjx',18) // hi,hjx,18
hi2('hjx') // hi,hjx,undefined
hi3('hjx') // hi,hjx,18

函数返回值

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// 什么都不返回
function hi4(name: string,age?: number):void {
    console.log(`hi,${name},${age}`)
}

// 返回string
function hi4(name: string,age?: number):string {
    if (age>18){
        return 'hi'
    }else{
        // return 404 //报错 因为你指定了返回 string
        return '404'
    }
}

// 或者这样写
// 返回string 或 number
function hi5(name: string,age?: number):string | number{
    if (age>18){
        return 'hi'
    }else{
        return 404
    }
}

函数内置的 this 和 argument

  • arguments
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function add(a: number,b: number): number{
    //let a = arguments[0]
    //let b = arguments[1]
    // a,b是形式参数
    return a + b;
    // 可以这样
    // return arguments[0] + arguments[1]
}

add(100,200) //实际参数
/*
调用add(100,200)时 会构建这样一个对象
arguments = {
    0:100,
    1:200,
    length:2
}
*/
  • this

很难的一个东西,根源就是你不用call

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
function add(a: number,b: number): number{
    return arguments[0] + arguments[1]
}

add(100,200) //小白调用法
/*
调用add(100,200)时 会构建这样一个对象
this = ?
arguments = {
    0:100,
    1:200,
    length:2
}
*/

add.call('fuck',100,200) //大师调用法
/*
调用add(100,200)时 会构建这样一个对象
this = 'fuck' //call的第一个参数
arguments = {
    0:100,
    1:200,
    length:2
}
*/

this 问题

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function printThis(){
    'use strict'
    console.log(this);
    console.log(arguments);
}

printThis.call('fuck',100,200)
/*
this = 'fuck'
arguments = {
    0:100,
    1:200,
    length:2
}
*/

printThis(1,2); 
/*
this = ?
如果是浏览器 this => window
如果是浏览器,并开启严格模式 this => undefined
如果是node是 global

arguments = {
    0:100,
    1:200,
    length:2
}
*/

为啥this这么难？ 因为 js设计错误

第二个情况

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let obj = {
    fn(){
        'use strict'
        console.log(this);
    },
    obj2:{
        fn2(){
            console.log(this);
        }
    }
}

obj.fn(); 
// this是  .fn前面的东西 obj
obj.obj2.fn2();
// this是  .fn2 前面的东西 obj.obj2
obj.fn.call('fuck')
// this => 'fuck'

第三个情况

1
2
3
4
5
6
7
8
9
10
let obj = {
    fn(){
        'use strict'
        console.log(this);
    }
}
// 第三个情况
let fn3 = obj.fn;
console.log('---');
fn3(); // this => ? undefined

箭头函数

  • 干掉了 this,arguments 因为认为这是js的错误不该在 es6里出现
1
2
3
4
5
let fn = (a: number,b :number): number=>{
    console.log(this) //外面的this
    // 箭头函数内外 this 一致
    return a + b; // 没有 this,arguments
}