TypeScript基础TypeScript扫盲Learning Typescript

TypeScript学习(二)- 函数

2019-05-22  本文已影响14人  JsForLife

函数类型

类型定义

函数类型定义分为两部分: 入参定义和出参定义。
按定义的时机分就近定义和前置定义两种。

// 就近定义
const add = (a:number, b:number) : number => a + b;

/**
 * 前置定义,即先定义接口,再赋给函数。
 * 推荐前置定义,复用性高
* */
interface Add {
  (a:number, b:number) : number;
}

// 只要入参和出参的类型以及个数与接口相符即可,参数名可以不一致
const add:Add = (x, y) => x + y;
类型推断

有些情况下,编译器会根据我们的代码上下文自动推断类型。

// 隐藏累出参类型,但编译器推断出函数返回值的类型是number
const add = (a:number, b:number) => a + b;

// 自动推断出a的类型是string
const a = '' + 1;
可选参数和默认参数
// b为可选参数
interface Add {
  (a:number, b?:number) : number;
}

const add:Add = (a, b) => {
  if (!b) {
    return 2 * a;
  }

  return a + b;
};
add(1);  // 2

// 为可选参数b设置一个默认值
const add:Add = (a, b = 2) => a + b;
add(1,1);  // 2
add(1);  // 3,在不传可选参时,是用来默认值
剩余参数

在es5,我们都可以通过arguments来访问函数的所有参数。
在es6和ts中我们可以剩余参数(rest参数)获得函数的不定长参。

// rest参数是一个数组,长度不定,且只能作为最后一个参数,参数名不一定非得叫rest
function calculate (a:number, ...rest_parameters:number[]) {
  const total = rest_parameters.reduce((sum, current) => sum += current);
  return a * total;
}
calculate(2, 1, 2)  // 6
calculate(3, 1, 2, 3)  // 18
this

传统function函数的this由执行上下文决定,指向最后调用它的一方。
箭头函数没有绑定this,而是在定义时通过作用域链向上查找,直到最近一层非箭头函数,若找不到则指向全局。

window.name = 'window';

function get_name () {
    const name = 'inside';
    return this.name;
}

// 在全局下调用,this指向window,严格模式下指向undefined
get_name();  // 'window'或报错

// 在全局下声明,this指向window,严格模式下指向undefined
const get_name2 = () => {
    const name = 'inside';
    return this.name;
}

get_name2();  // 'window'或报错

// 注意,外层是对象,而不是函数
const function_builder = {
  name: 'builder',
  get_name3: () => {
    const name = 'inside';
    console.log(this.name);
  }, 
};

get_name3();  // 'window'或报错

再看看另一个例子

window.name = 'window';

const function_builder = {
  name: 'builder',
  get_name() {
    const name = 'name1';
    return function () {
      return this.name;
    };
  }, 
  get_name2() {
    const name = 'name2';
    // 注意这里用的是箭头函数
    return () => this.name;
  },
};

// 注意,这里只是赋引用还没调用
const get_name_3 = function_builder.get_name2;
// 注意,这里执行了get_name2,并返回了一个箭头函数
const get_name_4 = function_builder.get_name2();

function_builder.get_name()();   // 'window'或报错
function_builder.get_name2()();  // 'builder'
get_name_3()();                  // 'window'或报错
get_name_4()                     // 'builder'

上面一个例子基本可以作为面试题了,有点绕,我们拆开来讲解下:

window.name = 'window';

const function_builder = {
  name: 'builder',
  get_name() {
    const name = 'name1';
    console.log(this.name);
    return function () {
      return this.name;
    };
  }, 
};

// 打印'builder' 并返回了一个非箭头函数,这说明get_name在调用时指向了function_builder
function_builder.get_name(); 

// 这句代码等价于它随后两句
function_builder.get_name()();

// 所返回的非箭头函数暴露在全局环境下
const get_name_fun = function_builder.get_name();
// 调用时指向了全局而非function_builder,故打印的不是'builder'
get_name_fun();

而箭头函数内包非箭头函数的例子:

window.name = 'window';

const function_builder = {
  name: 'builder',
  get_name2() {
    const name = 'name2';
    console.log(this.name);
    // 注意这里用的是箭头函数
    return () => this.name;
  },
};

// 与上例相同,get_name2指向了调用方function_builder,但不同的是返回的是箭头函数
function_builder.get_name2();

// 这句代码等价于它随后两句
function_builder.get_name2()();

// 此时get_name4被定义,通过作用域链查找,继承了最近一层非箭头函数get_name2的this
const get_name_4 = function_builder.get_name2();
// 和get_name2一样指向function_builder,故打印的是 'builder'
get_name_4();

// 赋引用
const get_name_3 = function_builder.get_name2;

// 在全局下调用,无论是get_name3还是所返回的函数都指向全局,故打出的不是'builder'
get_name_3()();  
函数重载

ts通过为同一个函数提供多个函数类型定义来实现函数重载。

// 两次定义
function add (a:number, b:number) : number;
function add(a:number[], b: number[]) : number[];

// 一次实现
function add(a, b) { 
  if (typeof a === 'number') {
    return a + b;
  }

  if (a instanceof Array) { 
    return a.concat(b);
  }
};  

add(1, 2);  // 3
add([1], [2]);  // [1,2]
上一篇下一篇

猜你喜欢

热点阅读