深入理解JavaScript和TypeScript中的class


Posted in Javascript onApril 22, 2018

前言

对于一个前端开发者来说,很少用到 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}`);
 }
}
American.y = '静态属性y';
Person.x;  // 静态属性x
Person.foo(); // 类 Person 有一个 静态属性x

Chinese.x;  // 静态属性x
Chinese.foo(); // 类 Chinese 有一个 静态属性x
Chinese.bar(); // 类 Chinese 的父类是 Person

American.x;  // 静态属性x
American.y;  // '静态属性y
American.foo(); // 类 American 有一个 静态属性x
American.bar(); // 类 American 有自己的 静态属性y ,还继承了父类 Person 的 静态属性x

const p = new Person('Lucy', 20, '女');
const c = new Chinese('韩梅梅', 18, '女', '咏春拳');
const a = new American('特朗普', 72, '男', 'Donald J. Trump');

c.sayHello(); // 你好我是 韩梅梅女士 ,我 18 岁了
c.martial(); // 韩梅梅 正在修炼 咏春拳 
a.sayHello(); // 你好我是 特朗普先生 ,我 72 岁了
a.sendTwitter('推特治国'); // 特朗普 : 推特治国

ES6 之前的 class

ES5 的继承,实质是先创造子类的实例对象 this,

然后再将父类的方法添加到 this 上面 Parent.apply(this) 。

ES6 的继承机制完全不同,实质是先创造父类的实例对象 this,所以必须先调用 super 方法,

然后再用子类的构造函数修改this。

为了实现继承,我们需要先实现一个 extendsClass 函数,它的作用是让子类继承父类的静态成员和实例成员。

function extendsClass(parent, child) {
 // 防止子类和父类相同名称的成员被父类覆盖
 var flag = false;

 // 继承静态成员
 for (var k in parent) {
  flag = k in child;
  if (!flag) {
   child[k] = parent[k];
  }
 }

 // 继承父类prototype上的成员
 // 用一个新的构造函数切断父类和子类之间的数据共享
 var F = function () { }
 F.prototype = parent.prototype;
 var o = new F();
 for (var k in o) {
  flag = k in child.prototype;
  if (!flag) {
   child.prototype[k] = o[k];
  }
 }
}
function Person(name, age, gender) {
 this.name = name;
 this.age = age;
 this.gender = this.gender;
 // 如果将 getter/setter 写在 prototype 会获取不到
 Object.defineProperty(this, 'fullName', {
  get: function () {
   var suffix = this.gender === '男' ? '先生' : '女士';
   return this.name + suffix;
  },
  set: function () {
   console.log('你已改名为 ' + value + ' ');
  },
 });
}

Person.x = '静态属性x';
Person.foo = function () {
 console.log('类 ' + this.name + ' 有一个 ' + this.x);
}

Person.prototype = {
 constructor: Person,
 // get fullName() { },
 // set fullName(value) { },
 sayHello: function () {
  console.log('你好我是 ' + this.fullName + ' ,我 ' + this.age + ' 了');
 },
};
function Chinese(name, age, gender, kungfu) {
 // 用call改变this指向,实现继承父类的实例属性
 Person.call(this, name, age, gender);
 this.kungfu = kungfu;
}

Chinese.bar = function () {
 console.log('类 ' + this.name + ' 的父类是 ' + Person.name);
 Person.foo();
}

Chinese.prototype = {
 constructor: Chinese,
 martial: function () {
  console.log(this.name + ' 正在修炼 ' + this.kungfu + ' ');
 }
};

extendsClass(Person, Chinese);
function American(name, age, gender, twitter) {
 Person.call(this, name, age, gender);
 this.twitter = twitter;
}

American.y = '静态属性y';
American.bar = function () {
 console.log('类 ' + this.name + ' 有自己的 ' + this.y + ' ,还继承了父类 ' + Person.name + ' 的 ' + Person.x);
}

American.prototype = {
 constructor: American,
 sendTwitter: function (msg) {
  console.log(this.name + ' : ');
  console.log(' ' + msg);
 }
};

extendsClass(Person, American);

TypeScript 中的 class

讲完了 JavaScript 中的类,还是没有用到 抽象类,抽象方法,私有方法这三个概念,由于 JavaScript 语言的局限性,想要实现这三种概念是很困难的,但是在 TypeScript 可以轻松的实现这一特性。

首先我们稍微修改一下例子中的描述,Person 是抽象类,因为一个正常的人肯定是有国籍的,Person 的 sayHello 方法是抽象方法,因为每个国家打招呼的方式不一样。另外一个人的性别是只能读取,不能修改的,且是确定的是,不是男生就是女生,所以还要借助一下枚举。

enum Gender {
 female = 0,
 male = 1
};
abstract class Person {
 private x: string = '私有属性x,子类和实例都无法访问';
 protected y: string = '私有属性y,子类可以访问,实例无法访问';

 name: string;
 public age: number;
 public readonly gender: Gender; // 用关键字 readonly 表明这是一个只读属性

 public static x: string = '静态属性x';
 public static foo() {
  console.log(`类 ${this.name} 有一个 ${this.x}`);
 }

 constructor(name: string, age: number, gender: Gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
 }

 get fullName(): string {
  const suffix = this.gender === 1 ? '先生' : '女士';
  return this.name + suffix;
 }

 set FullName(value: string) {
  console.log(`你已改名为 ${value} `);
 }

 // 抽象方法,具体实现交由子类完成
 abstract sayHello(): void;
}
class Chinese extends Person {
 public kungfu: string;
 public static bar() {
  console.log(`类 ${this.name} 的父类是 ${super.name}`);
  super.foo();
 }

 public constructor(name: string, age: number, gender: Gender, kungfu: string) {
  super(name, age, gender);
  this.kungfu = kungfu;
 }

 public sayHello(): void {
  console.log(`你好我是 ${this.fullName} ,我 ${this.age} 岁了`);
 }

 public martial() {
  console.log(`${this.name} 正在修炼 ${this.kungfu} `);
 }
}
class American extends Person {
 static y = '静态属性y';
 public static bar() {
  console.log(`类 ${this.name} 有自己的 ${this.y} ,还继承了父类 ${super.name} 的 ${super.x}`);
 }

 public twitter: string;

 public constructor(name: string, age: number, gender: Gender, twitter: string) {
  super(name, age, gender);
  this.twitter = twitter;
 }

 public sayHello(): void {
  console.log(`Hello, I am ${this.fullName} , I'm ${this.age} years old`);
 }

 public sendTwitter(msg: string): void {
  console.log(`${this.name} : `);
  console.log(` ${msg}`);
 }
}
Person.x;  // 静态属性x
Person.foo(); // 类 Person 有一个 静态属性x

Chinese.x;  // 静态属性x
Chinese.foo(); // 类 Chinese 有一个 静态属性x
Chinese.bar(); // 类 Chinese 的父类是 Person

American.x;  // 静态属性x
American.y;  // '静态属性y
American.foo(); // 类 American 有一个 静态属性x
American.bar(); // 类 American 有自己的 静态属性y ,还继承了父类 Person 的 静态属性x

const c: Chinese = new Chinese('韩梅梅', 18, Gender.female, '咏春拳');
const a: American = new American('特朗普', 72, Gender.male, 'Donald J. Trump');

c.sayHello(); // 你好我是 韩梅梅女士 ,我 18 岁了
c.martial(); // 韩梅梅 正在修炼 咏春拳 
a.sayHello(); // Hello, I am 特朗普先生 , I'm 72 years old
a.sendTwitter('推特治国'); // 特朗普 : 推特治国

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
avalon js实现仿微博拖动图片排序
Aug 14 Javascript
AngularJS基础 ng-mouseover 指令简单示例
Aug 02 Javascript
JS实现的数字格式化功能示例
Feb 10 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
原生js封装运动框架的示例讲解
Oct 01 Javascript
微信小程序 页面滑动事件的实例详解
Oct 12 Javascript
javascript中的replace函数(带注释demo)
Jan 07 Javascript
vuex的简单使用教程
Feb 02 Javascript
Bootstrap4 gulp 配置详解
Jan 06 Javascript
jQuery使用ajax传递json对象到服务端及contentType的用法示例
Mar 12 jQuery
原生JS进行前后端同构
Apr 22 #Javascript
如何以Angular的姿势打开Font-Awesome详解
Apr 22 #Javascript
vue移动端实现下拉刷新
Apr 22 #Javascript
实例讲解Vue.js中router传参
Apr 22 #Javascript
用Vue写一个分页器的示例代码
Apr 22 #Javascript
vue-cli3.0 特性解读
Apr 22 #Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
Apr 22 #Javascript
You might like
浅析php与数据库代码开发规范
2013/08/08 PHP
typecho插件编写教程(六):调用接口
2015/05/28 PHP
php实现分页显示
2015/11/03 PHP
PHP中常用的魔术方法
2017/04/28 PHP
php源码的安装方法和实例
2019/09/26 PHP
javascript学习笔记(六) Date 日期类型
2012/06/19 Javascript
Javascript异步编程模型Promise模式详细介绍
2014/05/08 Javascript
使用jquery.validate自定义方法实现"手机号码或者固话至少填写一个"的逻辑验证
2014/09/01 Javascript
详谈jQuery操纵DOM元素属性 attr()和removeAtrr()方法
2015/01/22 Javascript
JavaScript中的Math.atan2()方法使用详解
2015/06/15 Javascript
JavaScript严格模式详解
2015/11/18 Javascript
Bootstrap实现响应式导航栏效果
2015/12/28 Javascript
Javascript基础_嵌入图像的简单实现
2016/06/14 Javascript
JS简单去除数组中重复项的方法
2016/09/13 Javascript
JS中检测数据类型的几种方式及优缺点小结
2016/12/12 Javascript
Bootstrap 轮播(Carousel)插件
2016/12/26 Javascript
js删除对象/数组中null、undefined、空对象及空数组方法示例
2018/11/14 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
解决layer 动态加载select 失效的问题
2019/09/18 Javascript
JavaScript实现飞舞的泡泡效果
2020/02/07 Javascript
[50:11]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第三场
2018/04/09 DOTA
Flask入门教程实例:搭建一个静态博客
2015/03/27 Python
Python抓取淘宝下拉框关键词的方法
2015/07/08 Python
Python的Django框架中消息通知的计数器实现教程
2016/06/13 Python
Python 3.x读写csv文件中数字的方法示例
2017/08/29 Python
PyQt5+Caffe+Opencv搭建人脸识别登录界面
2019/08/28 Python
Django项目uwsgi+Nginx保姆级部署教程实现
2020/04/19 Python
施华洛世奇巴西官网:SWAROVSKI巴西
2019/12/03 全球购物
AssertionError 跟一下那个类是 “is – a”的关系
2012/02/21 面试题
工程监理应届生求职信
2013/11/09 职场文书
专业求职信撰写要诀
2014/02/18 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
学校运动会报道稿
2014/09/23 职场文书
党员对照检查材料整改措施思想汇报
2014/09/26 职场文书
地道战观后感500字
2015/06/04 职场文书
转学证明范本
2015/06/19 职场文书