先看两篇文章关于 ES5 原型链的，写的特别好，图画的就更好了，参考资料：
帮你彻底搞懂JS中的prototype、proto与constructor（图解）
详解JavaScript中的new操作符
忍不住盗图一张：
原型链：f1.__proto__.__proto__.__proto__ === null;
一、TypeScript 类
1.1 介绍
TypeScript 的 class 和 ES2015 的 class 并不是完全一样的概念，ES6 的 class 仅仅是一种语法糖，但是这种语法糖已经成为标准，并且（新）浏览器内核基本支持，而平时使用的时候，基本都是通过 webpack 或者 gulp 这种进行兼容或者打包。
而 TypeScript 的 class 可以使得开发者在不依赖 ES5 的环境下直接使用，不需要等到下个 JS 版本。类的形式在 JavaScript 中有两种写法，ES5 的类和 ES6 的类，决定 TypeScript 翻译成哪种在 tsconfig.json 里面配置：
"target": "ESNEXT", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019' or 'ESNEXT'. */
1.2 TypeScript 类与 ES6 类的不同。
ES6 的类有 extends 和 static 这点和 TypeScript 没啥不同，不同的是 ES6 的属性修饰符只有默认公开属性和一个私有属性(还是在提案中)。私有属性还和 TypeScript 不同，使用 # 来定义的，官方还给出了理由。
之所以要引入一个新的前缀#表示私有属性，而没有采用private关键字，是因为 JavaScript 是一门动态语言，没有类型声明，使用独立的符号似乎是唯一的比较方便可靠的方法，能够准确地区分一种属性是否为私有属性。另外，Ruby 语言使用@表示私有属性，ES6 没有用这个符号而使用#，是因为@已经被留给了 Decorator
ES 和 TS 比除了属性修饰符不同，没有抽象类之外，其他的都差不多。
1.3 属性修饰符
1、public 默认
一些语言的默认属性修饰符是 protected，而 TypeScript 中成员属性默认都是 public，除了默认之外，也可以强制手动指定。
特点是：可以被继承、外部实例和内部 this 可以访问
2、private 私有属性
特点是：只能内部访问
3、protected
构造函数如果使用 protected 声明，说明这个类不能被实例化，只能被继承。
特点是：外部实例不能访问
4、readonly 修饰符
readonly 修饰符用于将属性设置为只读，如果要设置值，则只能在声明或者是在构造函数中初始化内容。
5、参数属性
定义的属性可以赋值默认值，不在构造函数进行初始化。
1.4 抽象类
抽象类作为其他子类的基类，一般不进行直接实例化，特别的像接口，但和接口不同的是，抽象类可以去实现成员属性或者是方法，然后子类再去覆写成员属性或者方法。
abstract class Person {
abstract talk(): void;
walk(): void {
console.log('...')
}
}
和其他高级语言的面向对象抽象类一样，如果一个方法被定义为 abstract(抽象方法)，则这个方法可以不在基类中实现，但是它的子类必须去实现这个方法。抽象方法必须在抽象类里面。
abstract class Person {
abstract talk(): void;
walk(): void {
console.log('...')
}
}
new Person();//不允许，直接报错
class Male extends Person{
talk(){}//必须有这个
}
1.5 TypeScript 类的其他知识
去参考：http://es6.ruanyifeng.com/#docs/class
二、函数
TypeScript 的函数主要增加了强类型判断和一个函数重载知识点。
2.1 函数类型
下面两个函数声明了参数的类型以及函数返回值的类型,上面是具名函数，下面是匿名函数
function add(x: number , y: number ): number {
return x + y;
}
let myAdd = function(x: number, y: number) :number {
return x + y;
}
虽然上面已经定义了函数的类型，但是匿名函数并没有定义完整的函数类型，完整的函数类型：
let myAdd: (x: number, y: number) => number = function (x: number, y: number) : number {
return x + y;
}
完整的函数类型包括：参数类型 和 返回值类型
首先声明了参数类型 :(x: number, y: number) ，然后声明了返回值类型 => number =。
而参数的名字实际上可以不一致，上面示例中虽然写了相同的名字，但是可以写成两个不同的参数名称：
let myAdd: (x1: number, y1: number) => number = function (x: number, y: number) : number {
return x + y;
}
返回值类型通过 => 进行表示，如果一个函数返回值是 void ，也必须声明是 void，不能省略因为完整的函数类型包含参数类型和返回值类型两个部分，一个也不能省略。
let myAdd: (x1: number, y1: number) => void = function (x: number, y: number) : number {
return x + y;
}
函数的类型只是由参数类型和返回值组成的。
函数中使用的捕获变量不会体现在类型里。 实际上，这些变量是函数的隐藏状态并不是组成API的一部分。
所谓的捕获变量，与函数本身是无关的，因为这个是由函数作用域外（父级作用域或更高级作用域）声明的变量，只是在函数中使用了而已。
const a:number = 1;
let add:(x: number) => number = function(x: number) :number {
return a + x;
}
推断类型
完整的函数类型中，需要我们明确标示参数的类型是什么，但是如果两边的参数中只有一边的参数声明了类型，typescript 会尝试去识别类型：
let myAdd: (baseValue: number, increment: number) => number =
function(x, y) { return x + y; };
上面代码中，因为 baseValue 和 increment 已经声明了类型是 number，所以 x 和 y 会推断出类型是 number。
2.2 可选参数和默认参数
TypeScript 里的每个函数参数都是必须的，这不是指不能传递 null 或 undefined 作为参数，而是说编译器检查用户是否为每个参数都传入了值。
编译器还会假设只有这些参数会被传递进函数。
简短地说，传递给一个函数的参数个数必须与函数期望的参数个数一致。
function add(x: number, y: number) :number {
return x + y;
}
add(1,2);
add(1); // 错误
add(1,2,3); // 错误
上面 add 方法的使用中，后面两种都是错误的，因为传入的参数个数与期望的个数不相符合
如果需要声明某个参数是可选参数，则可以通过 ? 来标示：
function add(x:number, y:number, z?: number): number {
z = z || 0;
return x + y + z;
}
上面代码中通过 z? 声明 z 可选参数，因此传入 2 个或者3个参数都是可以的。
然而上面代码为了兼容 z 没有值得时候，写了个默认值处理 z = z || 0，而 ES6 有了函数参数默认值特性之后，这种写法基本都是被废弃的，在 TypeScript 中，可以使用同样的方式声明函数参数的默认值：
function add(x:number, y:number, z:number = 0): number {
return x + y + z;
}
add(1, 3);
add(1,2,3);
add(1,2,3,4)
而一旦声明了默认值之后，就表示这个值可有可无，类似于已经加了 z? 声明。
需要注意的是，可选参数必须接在必需参数后面。换句话说，可选参数后面不允许再出现必需参数了
2.3 剩余参数
ES6 同样拥有 rest 参数，也就是剩余参数。它可以表示任意剩下的参数，本质是一个数组。
typescript 中同样通过省略号来表示剩下的多个参数：
function add(x: number, ...otherNum:number[]): number {
otherNum && otherNum.forEach((item) => {
x += item;
});
return x;
}
add(1, 3, 4, 54, 5, 6);
2.4 重载
重载：允许一个函数接受不同数量或类型的参数时，作出不同的处理。比如，我们需要实现一个函数 reverse，输入数字 123 的时候，输出反转的数字 321，输入字符串 'hello' 的时候，输出反转的字符串 'olleh'。
利用联合类型，我们可以这么实现：
function reverse(x: number | string): number | string {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
然而这样有一个缺点，就是不能够精确的表达，输入为数字的时候，输出也应该为数字，输入为字符串的时候，输出也应该为字符串。
这时，我们可以使用重载定义多个 reverse 的函数类型：
function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
if (typeof x === 'number') {
return Number(x.toString().split('').reverse().join(''));
} else if (typeof x === 'string') {
return x.split('').reverse().join('');
}
}
上例中，我们重复定义了多次函数 reverse，前几次都是函数定义，最后一次是函数实现。在编辑器的代码提示中，可以正确的看到前两个提示。
但是需要注意的是重载函数只是两个函数声明，并没有函数体。所以上面虽然有三个函数但是只有两个重载函数。
TypeScript 会优先从最前面的函数定义开始匹配，所以多个函数定义如果有包含关系，需要优先把精确的定义写在前面。
网友评论