函数

函数的关键点：参数、返回值、函数的作用、函数在什么地方调用
es5 定义的函数

function fn() {}
const fn1 = function() {}

ts 定义的函数

function fn():void {}
const fn1 = function():void {}

函数传参


function fn(name:string, age:number):string {
  // console.log('我是 void ');
  return `${name}-${age}`;
}
// console.log('我是 void ');
// const fn1 = function(name, age):void {}
console.log(fn('胡图图', 18));

可传参数（age?:number）

function fn(name:string, age?:number):string {
  // console.log('我是 void ');
  return `${name}-${age}`;
}
// console.log('我是 void ');
// const fn1 = function(name, age):void {}
console.log(fn('胡图图'));

默认参数

// age = 18
function fn(name:string, age:number = 18, ...reset:any):string {
  console.log(reset);
  // console.log('我是 void ');
  return `${name}-${age}`;
}
// console.log('我是 void ');
// const fn1 = function(name, age):void {}
console.log(fn('胡图图'));
// console.log(fn('胡图图', 18, [1, 2, 3]));

剩余参数

// reset
function fn(name:string, ...reset:any):string {
  console.log(reset);
  // console.log('我是 void ');
  return `${name}-${reset}`;
}
// console.log('我是 void ');
// const fn1 = function(name, age):void {}
// console.log(fn('胡图图'));
console.log(fn('胡图图', 18, [1, 2, 3]));

重载


function fn(msg: number): number;
function fn(msg: string): string;
function fn(msg: boolean): boolean;
function fn(msg: any): any { // 具体的执行函数，
  if(typeof msg == 'string') {
    return msg.split('').reverse().join('');
  } else if(typeof msg == 'number') {
    return Number(String(msg).split('').reverse().join(''));
  } else {
    return '错误';
  }
}
// 注意，function pickCard(x): any并不是重载列表的一部分，因此这里只有两个重载：一个是接收对象另一个接收数字。 以其它参数调用 pickCard会产生错误。
console.log(fn(123));
console.log(fn('abc'));

类

继承
- 组合继承对象冒充+原型链
  - 对象冒充，只能继承构造函数里面的属性和方法。不能够继承到原型上的。 ```javascript // 类的三大特性：封装继承多态 // 在 es5 中函数首字母大写，我们称之为这是一个构造函数 function Person() { this.name = ‘张三’; this.age = 18;
  this.say = function() { console.log(this.name + ‘说’); } }
// 原型 Person.prototype.eat = function() { console.log(‘我的名字是’ + this.name); }

// call改变 this 指向 bind, apply // 这三个什么区别 // bind 默认执行 // call（this, c1, c2, c3）， apply(this, [c1, c2, c3]) 他们两个进行传参方式不一样 // 子类 function Son() { // 使用 call 进行继承 Person.call(this); // 对象冒充 }

// 实例话一个子类 const s = new Son(); s.say(); // 张三说 s.eat(); // eat is a function
```
- 原型继承
```javascript
// 类的三大特性： 封装 继承 多态
// 在 es5 中函数首字母大写，我们称之为这是一个构造函数
function Person() {
 this.name = '张三';
 this.age = 18;
 this.say = function() {
   console.log(this.name + '说');
 }
}
// 原型
Person.prototype.eat = function() {
 console.log('我的名字是' + this.name);
}
// call改变 this 指向 bind, apply
// 这三个什么区别
// bind 默认执行
// call（this, c1, c2, c3）， apply(this, [c1, c2, c3]) 他们两个进行传参方式不一样
// 子类
function Son() {
 // 使用 call 进行继承
 Person.call(this); // 对象冒充
}
// 原型继承
Son.prototype = new Person();
// 实例话一个子类
const s = new Son();
s.say(); // 张三说
s.eat();  // 我的名字是张三
```
静态属性和方法
- 静态方法，在构造函数后面直接添加，调用的时候，构造函数可以直接调用。 ```javascript // 类的三大特性：封装继承多态 // 在 es5 中函数首字母大写，我们称之为这是一个构造函数 function Person() { this.name = ‘张三’; this.age = 18;
  
  this.say = function() { console.log(this.name + ‘说’); } }
// 原型 Person.prototype.eat = function() { console.log(‘我的名字是’ + this.name); }

// call改变 this 指向 bind, apply // 这三个什么区别 // bind 默认执行 // call（this, c1, c2, c3）， apply(this, [c1, c2, c3]) 他们两个进行传参方式不一样 // 子类 function Son() { // 使用 call 进行继承 Person.call(this); // 对象冒充 }

// 原型继承 Son.prototype = new Person();

// 实例话一个子类 const s = new Son(); s.say(); s.eat();

// 添加静态属性 s.sex = ‘男’; s.staticFn = function() { console.log(‘我是静态方法’); }

// 调用静态属性和方法 console.log(s.sex); s.staticFn();


-  es6的创建方式 
   - es6类的继承方式
```javascript
  class Person{
    constructor(name, age) {
      // super(name, age); // 继承
      this.name = name;
      this.age = age;
    }
    say() {
      console.log(this.name+ '说');
    }
    eat() {
      console.log('我的名字是' + this.name);
    }
  }
  // const p = new Person();
  // p.say();
  // p.eat();
  // es6 的类如何实现继承
  class Son extends Person{
    constructor(name, age) {
      super(name, age);
    }
  }
  const s = new Son('张三', 18);
  s.say();
  s.eat();

ts 中类的继承和属性及方法的定义 ```javascript // es6 定义类的方式 class Person{ // name: string == this.name = name; name: string; age: number; constructor(name: string, age: number) { // super(name, age); // 继承

// = 赋值曹植 this.name = name; this.age = age; }

say(): void { console.log(this.name+ ‘说’); } eat(): void { console.log(‘我的名字是’ + this.name); } }

// const p = new Person(); // p.say(); // p.eat();

// es6 的类如何实现继承 class Son extends Person{ constructor(name: string, age: number) { super(name, age); } }

const s = new Son(‘张三’, 18); s.say(); s.eat();


<a name="fad060bd-1"></a>
# 类
- 类的 4 大修饰符
- public(公共的)（在TypeScript里，成员都默认为 public。）
```php
  public say():void {
    console.log(this.name + '说');
  }

private（私有的）(当成员被标记成 private时，它就不能在声明它的类的外部访问。)


  private eat(): void {
    console.log(this.name + '吃');
  }

protected(protected修饰符与 private修饰符的行为很相似，但有一点不同， protected成员在派生类中仍然可以访问。例)


  protected go(): void {
    console.log(this.name + '走开了');
  }

readonly（只读的）（你可以使用 readonly关键字将属性设置为只读的。只读属性必须在声明时或构造函数里被初始化。）


  readonly name: string;

static（静态属性）(到目前为止，我们只讨论了类的实例成员，那些仅当类被实例化的时候才会被初始化的属性。我们也可以创建类的静态成员，这些属性存在于类本身上面而不是类的实例上。)

  class Grid {
      static origin = {x: 0, y: 0};
      calculateDistanceFromOrigin(point: {x: number; y: number;}) {
          // ...好多代码
      }
      constructor (public scale: number) { }
  }
  let grid1 = new Grid(1.0);  // 1x scale
  let grid2 = new Grid(5.0);  // 5x scale
  // 静态属性的调用
  console.log(grid1.calculateDistanceFromOrigin({x: 10, y: 10}));
  console.log(grid2.calculateDistanceFromOrigin({x: 10, y: 10}));

技术学习笔记

JS函数和TS的区别

函数

类