深入理解JavaScript和TypeScript中的class

对于一个前端开发者来说,很少用到 class ,因为在 JavaScript 中更多的是 函数式 编程,抬手就是一个 function,几乎不见 class 或 new 的踪影。所以 设计模式 也是大多数前端开发者的一个短板。

最近在学习 Angular 的过程中发现其大量的运用了 class,不得不佩服,Angular 确实是一个优秀的、值得深入研究的 框架。

本文将简单的介绍一下 JavaScript 和 TypeScript 中的 class。

基本概念

在介绍 class 之前,要先介绍一些基本的概念。

1、静态成员

类自身的成员,可以继承,但实例无法访问,一般多见于工具类,比如在jQuery时代最常见的 $.ajax ,ajax 便是 $ 的静态方法,使用方便,不需要再通过 new 或者函数调用的得到一个新实例。

2、私有成员

类内部的成员,一般是不能继承的,只能在内部使用,实例无法访问,有一点点像闭包内部的变量,但是还是一定的差别,目前 JavaScript 无法直接定义私有成员,只能通过其它方式辅助实现。

3、getter/setter

存取器属性,当我们访问或者修改一个实例的属性的时候,我们可通过存取器属性拦截这两个操作,从而做一些其它的事情,vue正是通过这个api来实现对数据变化的追踪。

4、实例成员

指 new 出来的实例所具有的成员,可以被继承,也是通过这个特性实现了代码的复用。

5、抽象类,抽象方法

抽象类指不可以被实例化的类,通过 new 关键字调用会报错,一般都被设计成父类。

抽象方法,只提供方法的名称,参数和返回值,不负责实现,具体的实现由子类去完成,如果一个子类继承于抽象类,那么这个子类必须实现父类所有的抽象方法,否则会报错。

这两个概念在 JavaScript 都无法直接实现,但在 TypeScript 或 其它面向对象语言中可以轻松实现,另外这个特性也是用于实现 多态 的重要手段。

案例介绍

为了更好的介绍 class,本文将采用三个 类 来做例子,分别是 Person、Chinese、American。从字面上可以很快的知道: Person 是 父类(基类) ,Chinese 和 American 是 子类(派生类) 。

Person 有 name、age、gender 三个属性,sayHello 方法和 fullName 存取器属性。同时 Person 还有一些 静态成员 和 私有成员 ,由于实在太难想例子了,所以就用 foo、bar、x、y、z 这些来代替吧。

作为子类的 Chinese 和 American 继承了 Person 的实例成员和静态成员。同时它们自身也有一些自己的方法和属性:

Chinese 有 kungfu 属性,会习武 martial。

American 有 twitter,还可以 sendTwitter。

接下来我们就分别使用 JavaScript 和 TypeScript 来实现这个案例。

JavaScript 中的 class

JavaScript 中的 class 要分开说,在 ES6 中提供了两个关键字 class 和 extends ,虽然它们只是语法糖,底层还是再利用 prototype 实现继承的,但是不能否认,这中写法确实让代码更清晰,更易读。

ES6 中的 class

class Person { // #x = '私有属性x'; // static x = '静态属性x'; // name; // age; // gender; // 上面的写法还在提案中,并没有成为正式标准,不过变化的可能性已经不大了。 // 顺便吐槽一下,用 # 表示私有成员,真的是很无语. /** * Person的静态方法,可以被子类继承 * 可以通过 this 访问静态成员 */ static foo() { console.log(`类 ${this.name} 有一个 ${this.x}`); } constructor(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } /** * 数据存储器,可以访问实例成员,子类的实例可以继承 * 以通过 this 访问实例成员 */ get fullName() { const suffix = this.gender === '男' ? '先生' : '女士'; return this.name + suffix; } set fullName(value) { console.log(`你已改名为 ${value} `); } /** * Person的实例方法,可以被子类的实例继承 * 可以通过 this 访问实例成员 */ sayHello() { console.log(`你好我是 ${this.fullName} ,我 ${this.age} 岁了`); } } Person.x = '静态属性x';

class Chinese extends Person { static bar() { console.log(`类 ${this.name} 的父类是 ${super.name}`); super.foo(); } constructor(name, age, gender, kungfu) { super(name, age, gender); this.kungfu = kungfu; } martial() { console.log(`${this.name} 正在修炼 ${this.kungfu} `); } }

class American extends Person { // static y = '静态属性y'; static bar() { console.log(`类 ${this.name} 有自己的 ${this.y} ,还继承了父类 ${super.name} 的 ${super.x}`); } constructor(name, age, gender, twitter) { super(name, age, gender); this.twitter = twitter; } sendTwitter(msg) { console.log(`${this.name} : `); console.log(` ${msg}`); } }

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/69fabfd111774aeee871f4d6a8a73811.html