TypeScript学习4-类

2019-07-16 admin

类-面向对象的基础

面向对象编程,应该是目前使用最广泛的编程模式。

JavaScript是基于原型的语言,自从广泛使用之后,面向对象的改造一直没停过,不少第三方库都使用原型实现了JavaScript下面的类,如:MooTools,Backbone。再到ES6标准,直接原生支持了类定义,不过只能算语法糖级的支持。

TypeScript对面向对象支持的更彻底,非常接近Java、C#语言,支持接口、类、抽象、继承、可见性等面向对象特性。

面向对象三大特征

抽象

即同一类事物,我们可以把它抽象成一个描述,就是类。对外,我们看到的就是这个类描述,它有什么属性,它能干嘛,取决于它对外公开的属性和方法。它的内部如何运作,我们无需关注。

比如我们要用面向对象语言描述动物:动物有一个名字,动物能移动。它怎么做到移动呢,外部是不用关心的。

继承

如果抽象是基础,那么继承就是面向对象的高峰。抽象给了编程语言描述世界的画笔,那么继承就给了它色彩。

继承类拥有父类公开的、保护的属性和方法,同时还可以添加自己的属性和方法。

一般分为实现继承、接口继承。

再拿动物来说,鸟类是动物的一种,它不光继承了动物的特性,它还有自己的专属特性:它有翅膀,它能飞。

多态

多态简单来说,就是同一个类的对象,表现出不同的特性,是继承延伸出来的表现结果。

常见多态有覆盖、重载两类。

TypeScript中的类方法不支持真正意义上的重载,可以通过增加可选参数来达到重载的目的。 具体的原因,是因为重载在编译之后,是以多个不同名的函数存在的,调用哪个也是编译的时候确定的。而TypeScript需要支持JavaScript来调用它,JavaScript不知道编译之后的函数名。 后面会拿一篇文章来分析。

还是拿动物为例,继承并覆盖move方法之后,鸟类实现了飞、鱼类实现了游。

TypeScript中类使用的常见场景

// 知识点:抽象类
abstract class Animal {
    // 知识点:私有成员
    private _name: string;

    // 知识点:存取器
    get name(): string {
      return this._name;
    }

    constructor(name: string) {
      this._name = name;
    }

    // 知识点:抽象方法
    abstract move(distance: number): void;
}
// 知识点:实现抽象类的子类
class Bird extends Animal {
  // 知识点:只读成员
  // 知识点:静态成员
  static readonly classification = 'bird';

  // 知识点:super()
  constructor(name: string) {
      super(name);
  }

  // 知识点:抽象方法实现
  move(distance: number): void {
      console.log(`moved ${distance}.`)
  }
}

const enum MoveMode {
  WALK,
  FLY
}

// 知识点:子类
class Owl extends Bird {

  private _mode: MoveMode;

  get mode(): MoveMode {
      console.log('read move mode.');
      return this._mode;
  }

  set mode(mode: MoveMode) {
      console.log('changed move mode.');
      this._mode = mode;
  }

  // 知识点:super()
  constructor(name: string) {
      super(name);
      this._mode = MoveMode.FLY;
  }

  // 知识点:方法覆盖
  move(distance: number): void {
    switch (this._mode) {
      case MoveMode.FLY:
          console.log(`fly ${distance}.`);
          break;
      case MoveMode.WALK:
          console.log(`walked ${distance}.`);
          break;
      default:;
    }
  }

}

类相关的知识点总结

从上述示例中,整理出以下知识点,请结合示例回顾,加强一下理解。

抽象类不能实例化,抽象方法不能实现,需要在子类中实现。

继承了父类的类,是相对的。

  • 类成员可见性

    • public,公开,默认的可见性
    • protected,保护,子类可见
    • private,私有,本类可见
  • 静态成员

静态成员属于类

只读,即初始化后不可修改,只能在声明和构造函数里初始化。

可以像成员一样来访问,一般用来做一些处理,比如校验,格式化等。

覆盖父类方法,实现自己的特性。

[转载]原文链接:https://segmentfault.com/a/1190000019780378

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-69913.html

文章标题:TypeScript学习4-类

相关文章
Windows Server 2003将于7月14日停服
腾讯数码讯(文心)据PCWorld网站报道,微软的Windows Server 2003操作系统将很快重蹈Windows XP停服的覆辙,对于迟迟没有升级到新版本服务器操作系统的IT主管来说,这确实是个坏消息。 微软将于7月14日叫停对W...
2015-11-12
2014年,你是不是被这5个HTML5技术刷屏了?
如今,几乎每天都有HTML5页面的推广以及小游戏、小测试在微信上传播,用户也逐渐习惯被各种HTML5轰炸。那么在刚刚过去的一年究竟有哪些HTML5技术堪称火爆,让人们的微信频频被刷屏呢? 1、2048 2048 在4x4的棋盘上,用方向键选...
2015-11-12
2014年十大编程语言
近日,IEEE Spectrum推出了一个最流行的编程语言排行榜。排行榜筛选了12项指标,综合了10个来源(含 IEEE Xplore、Google、GitHub)的数据,最终评选出了下面这个排行榜(满分100,得分越高排名越靠前),其中的...
2015-11-11
Webpack(含 4)配置详解——从 0 配置一套开发模板
前言 源代码 熟悉 webpack 与 webpack4 配置。 webpack4 相对于 3 的最主要的区别是所谓的零配置,但是为了满足我们的项目需求还是要自己进行配置,不过我们可以使用一些 webpack 的预设值。同时 webpack...
2018-05-02
2015年4月TIOBE编程语言排行榜 JavaScript排第六位
IOBE近日发布2015年4月编程语言排行榜,前三名终于发生变化,Objective-C退出前三掉落第四位,C++势头勇猛上升4位冲进前三,Java更是一举大力夺得第一,而最让人兴奋的是JavaScript连冲9位,雄踞第六位! ...
2015-11-12
数据类型和结构
ECMAScript标准定义了七种数据类型 1)布尔值(true 和 false) 2)null,一个特殊的关键字表示空,要注意,javascrip是区分大小写的,所以Null和null是不一样的 3)undefined 表示未定义 4)N...
2015-11-12
4种方法帮你的网站创建更丰富的Web体验
现在的网站已经从一个简单的文本页面开始进化了很多,我们可以制作出丰富的视觉效果来增加用户在桌面浏览器和移动浏览器的体验。 今天这篇文字就给大家分享4个实用的方法,来帮助你创建更好的Web体验。 对于那些还在用IE6的朋友,我只想说一句:go...
2016-01-13
vue2 如何实现div contenteditable=“true”(类似于v-model)的效果
发现问题 在 vue2 中对表单控件有着良好的双向数据绑定机制,但是对于要特定实现某些功能的输入时,我们就不得不使用到 contenteditable=“true” 的 div ,而在这个 div 上是使用 v-model 是没有效果的。那...
2017-03-20
JS常见创建类的方法小结【工厂方式,构造器方式,原型方式,联合方式等】
本文实例讲述了JS常见创建类的方法。分享给大家供大家参考,具体如下: Javascript是一种基于对象的语言,你遇到的所有东西几乎都是对象。但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有Class。(不过,ES6引...
2017-04-05
JavaScript深入之类数组对象与
类数组对象 所谓的类数组对象: 拥有一个 length 属性和若干索引属性的对象 举个例子: var array = ['name', 'age', 'sex']; var ...
2017-05-27
回到顶部