先看两篇文章关于 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 会优先从最前面的函数定义开始匹配,所以多个函数定义如果有包含关系,需要优先把精确的定义写在前面。