TypeScript基础学习(4): 类

翻江蜃
• 阅读 628

es5的方法

最简单的类

 function Person() {
   this.name = 'zy'
   this.age = 27
      this.run = function () {
     console.log( `${this.name} is run`)  // zy is run
   }
 }
 let person = new Person()
 person.sex = 'female'
 console.log('person.name', person.name) // zy
 console.log('person.sex', person.sex) // female

原型链里面增加属性和方法

   Person.prototype.grade = '一年级'
   Person.prototype.work = function () {
     console.log( `${this.name} is work`)  // zy is work
   }
  console.log('person.grade', person.grade) // 一年级
  person.work()

添加静态方法

  Person.getInfo = function () {
      console.log('person.getInfo') // person.getInfo
    }
  Person.getInfo()

继承


1. 对象冒充继承方式,只能继承【构造函数】里的属性和方法
  function Web () {
    Person.call(this) // 
  }
  let web = new Web()
  console.log('Web.name', web.name) //  zy
  console.log('Web.grade', web.grade) // undefined

2. 原型链继承方式,能继承【构造函数】和【原型链】上的属性和方法
   不能传参调用
  function Web () {
  }
  Web.prototype =  new Person()
  let web = new Web()
  console.log('Web.name', web.name) // zy
  console.log('Web.grade', web.grade) // 一年级
3. 对象冒充 + 原型链继承方式
 function Person(name, age) {
      this.name = name
      this.age = age
      this.run = function () {
      console.log( `${this.name} is run`)  // zy is run
      }
    }
    function Web(name, age) { 
      Person.call(this, name, age) // 继承构造函数的属性和方法
    }
    Web.prototype = Person.prototype // 继承原型链的属性和方法
    let web = new Web('zy', 27)
    web.run()

es6的方法

最基础的类

class Person {
    name: string; // 属性,前面省略了public关键字
    constructor (n:string) { // 构造函数,实例化类的时候触发的函数
        this.name = n
    } 
    run ():void {
        console.log(`${this.name} is run`) // zy is run
    }
} 
let person = new Person('zy')
person.run()

继承

class Person {
    name: string; // 属性,前面省略了public关键字
    constructor (name:string) { // 构造函数,实例化类的时候触发的函数
        this.name = name
    } 
    run ():void {
        console.log(`${this.name} is run`) // ying is run
    }
} 


class Web extends  Person{
    constructor (name:string) {
        super(name) // 初始化父类的构造函数
    }
}
let web = new Web('ying')
web.run()

类里面的修饰符

public 公有 在类里面、子类、类外面都可以访问
protected 保护类型 在类里面、子类里面可以访问,在类外部没法访问
privated 私有 在类里面可以访问 子类、类外面不可以访问

静态属性、静态方法

class Web extends  Person{ 
    static age:number = 20;
    constructor (name:string) {
        super(name) // 实例化父类的时候触发的函数
    }
    static print () { // 静态方法 里面没法直接调用类里面的属性,只能调用静态属性
        console.log(`${this.age} is print`)
    }

}
Web.print() // 类名直接调用

多态

个人理解:重写父类方法,父类方法不写具体的实现,由子类来实现具体功能,不同的子类有不同的表现

抽象类

提供其他类继承的基类,不能直接被实例化
用abstract关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体实现并且必须在派生类中实现
abstract抽象方法只能放在抽象类中
抽象类和抽象方法用来定义标准 标准:Animal这个类要求它的子类必须包含eat方法

abstract class Animal {
    public name:string;
    constructor (name:string) {
        this.name = name
    }
    abstract eat():any;
}

class Cat extends Animal {
    constructor (name:string) {
        super(name)
    }
    // 抽象类的子类必须实现抽象类中的抽象方法
    eat() {
        console.log(`${this.name} is cat`) // ying is cat
    }
}
let cat = new Cat('ying')
cat.eat()
点赞
收藏
评论区
推荐文章
Easter79 Easter79
3年前
typescript 简版跳一跳
typescript简版跳一跳学习typescript,第一步应该是学习官方文档,理解最基础的语法。第二步开始用typescript实现一些jscss或者canvas类型的游行。现在开始我们用ts写跳一跳核心点:1.场景的随机创建    2.旗子的跳动    3.落脚点的判断,重点要提及的是射线判断法
Easter79 Easter79
3年前
typescript类 继承 修饰符
//1、ts中类的定义/es5:functionPerson(name){this.namename;this.runfunction(){
Easter79 Easter79
3年前
typescript类与继承
1/21、vscode配置自动编译341.第一步tscinti生成tsconfig.json改"outDir":"./js",5672、第二步任务运行任务监视tsconfig.json
Wesley13 Wesley13
3年前
java基础常见面试题,这是一篇超长的随笔!!!
1\.Java基础部分.......................................................41、一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制?..42、Java有没有goto?.................................................4
Jacquelyn38 Jacquelyn38
4年前
零基础学习TypeScript(源码开源)
今天,这篇文章篇幅很短,主要开放我最近学习整理TypeScript源码。|文件夹|作用|||||demo1|TypeScript的定义||demo2|基础环境搭建||demo3|基础类型和对象类型||demo4|类型注解和类型推断||demo5|函数相关类型||demo6|数组与元组||dem
Wesley13 Wesley13
3年前
Java日期时间API系列31
  时间戳是指格林威治时间1970年01月01日00时00分00秒起至现在的总毫秒数,是所有时间的基础,其他时间可以通过时间戳转换得到。Java中本来已经有相关获取时间戳的方法,Java8后增加新的类Instant等专用于处理时间戳问题。 1获取时间戳的方法和性能对比1.1获取时间戳方法Java8以前
Easter79 Easter79
3年前
TypeScript 中的类和接口
在面向对象(OOP)编程中,经常会使用到class(类)和interface(接口)。在TypeScript(以下简称TS)中也引入了类和接口的概念,使得TS强大的类型检测机制更加完善。就像我们所知道的,一个类是一堆抽象概念的集合,我们可以从类的构造方法中创建出享有共同属性和方法的对象。一个接口所描述的是一个对象相关的属性和方法,但并不提供具体创建此对象实例
Stella981 Stella981
3年前
OpenJDK11与Spring Cloud Finchley的不兼容问题与解决
本文的环境:OpenJDK11.0.4,SpringCloudfinchleySR4,SpringBoot2.0.3最近遇到了一个问题,在feign调用的时候,时常会出现这样一个奇怪的错误:2019100708:00:00.620ERRORxxx,e1ba4c7540954aa3,871b99c4576d42e3
Stella981 Stella981
3年前
Linux基础(day42)
11.14/11.15Apache和PHP结合配置httpd支持php目录概要httpd主配置文件/usr/local/apache2.4/conf/httpd.confvim/usr/local/apache2.4/conf/httpd.con
Stella981 Stella981
3年前
JavaScript中的类定义和继承实现
ES5中因为没有class关键字,所以创建类的方式是通过构造函数来定义的。我将一步步的用代码演示如何慢慢用原生的语法实现JS的类的定义和继承。希望大家喜欢。废话不多说,我们来看原生JavaScript定义类的方法。1\.最简单的类//类的构造函数functionPerson(){this.nam
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(