IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> TypeScript 中的类 -> 正文阅读

[JavaScript知识库]TypeScript 中的类

目录

一、TypeScript 类

1、类的定义

2、创建实例化对象

?二、类的继承

三、static 关键字

四、类属性权限修饰符

1、public(默认属性)

2、protected(保护属性)

3、private(私有属性)?

4、readonly(只读属性)?


一、TypeScript

TypeScript 是面向对象的 JavaScript。类描述了所创建的对象共同的属性和方法。TypeScript 支持面向对象的所有特性

1、类的定义

class class_name {

??? // 类作用域

}

类可以包含以下几个模块(类的数据成员):

  1. 字段(属性) ? 字段是类里面声明的变量。字段表示对象的有关数据。
  2. 构造函数 ? 类实例化时调用,可以为类的对象分配内存。
  3. 方法 ? 方法为对象要执行的操作

实例:

创建类的数据成员

以下实例我们声明了类 Car,包含字段为 engine,构造函数在类实例化后初始化字段 engine。

this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同,this.engine 表示类的字段。

此外我们也在类中定义了一个方法 disp()。

class Car { 
// 字段 
engine:string; 
color:string;
// 构造函数 
constructor(engine:string,color:string) {
 this.engine = engine 
this.color=color;
//成员函数
    disp():void{  //void:表示函数无返回值(即函数体内部没有return语句)
        console.log("引擎:"+this.engine+",颜色:"+this.color)
    }
}

?【注意】:this 关键字表示当前类实例化的对象。注意构造函数的参数名与字段名相同,this.engine 表示类的字段。

2、创建实例化对象

使用 new 关键字来实例化类的对象,语法格式如下:

?var object_name = new class_name([ arguments ])

类实例化时会调用构造函数,例如:

var obj = new Car("Engine 1")

类中的字段属性和方法可以使用 . 号来访问:

// 访问属性

obj.field_name

// 访问方法

obj.function_name()

????? 示例:

let bm = new Car('V8','红色')  //调用构造方法,构造方法的作用是初始化对象
 bm.disp()

完整代码如下:?

class Car { 

engine:string; 
color:string;

constructor(engine:string,color:string) {
 this.engine = engine 
this.color=color;

    disp():void{  
        console.log("引擎:"+this.engine+",颜色:"+this.color)
    }
}
let bm = new Car('V8','红色')  
 bm.disp()

二、类的继承

TypeScript 支持继承类,即我们可以在创建类的时候继承一个已存在的类,这个已存在的类称为父类,继承它的类称为子类

类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。

TypeScript 一次只能继承一个类,不支持继承多个类,但 TypeScript 支持多重继承(A 继承 B,B 继承 C)。

语法格式如下:

class? 子类名? extends 父类名

类的继承:实例中创建了 Shape 类,Circle 类继承了 Shape 类,Circle 类可以直接使用 Area 属性:?

//定义父类
class Shape {
    circumference: number;
    length: number;
    constructor(r: number, a: number) {
        this.length = r;
        this.circumference = a;
    }
}
//定义子类
class Circle extends Shape {
    disp() {
        console.log("正方形边长是:", this.length);
        console.log("正方形周长是:", this.circumference);
    }
 
}

let t1 = new Circle(5,20);
t1.disp();

?关于类的继承在Ts和Js中都是使用extends关键字,并且在构造函数中使用super方法实现构造继承,这个方法都必须写在字类构造函数内的最前面。

Ts受保护的成员的使用方式就是通过添加到父类构造函数,然后字类构造继承该成员,在子类中就能使用this关键字访问该成员了,子类中不需要再在自生声明该成员了。

三、static 关键字

用于定义类的数据成员(属性和方法)为静态的,静态成员可以直接通过类名调用。

例如:??

class StaticMem {
    static num:number;
    static disp():void {
    console.log("num 值为 "+ StaticMem.num)
    }
}
    StaticMem.num = 12 // 初始化静态变量
    StaticMem.disp() // 调用静态方法

四、类属性权限修饰符

TypeScript 中,可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。

1、public(默认属性)

  • public(默认) : 派生类、类的实例对象都可以访问。
class Person{
??? public name:string;
??? public age:number;
??? constructor(name:strng,age:number){
??????? this.name=name;
??????? this.age=age;
??? }

??? cons(text:string){
????? console.log(`Hi! ${this.name},${text}`);
??? }
}

2、protected(保护属性)

  • protected (保护属性): 派生类可以访问、类的实例对象不可以访问。
class Person{

??? protected name:string;
??? public age:number;
??? constructor(name:strng,age:number){
??????? this.name=name;
??????? this.age=age;
??? }
}
class Man extends Person{
??? sex:string;
??? constructor(name:strng,age:number,sex:string;){
??????? super(name,age)
??????? this.sex=sex
??? }
??? cons(text:string){
???????? console.log(`Hi! ${this.name},${text}`);
??? }
}

new Man("Cat",12).name; // 错误,name是保护属性

3、private(私有属性)?

  • private (私有属性): 派生类、类的实例对象不可以访问。
class Person{
??? private name:string;
??? public age:number;
??? constructor(name:strng,age:number){
??????? this.name=name;
??????? this.age=age;
??? }
??? cons(text:string){
????? console.log(`Hi! ${this.name},${text}`);
??? }
}
new Person("Cat",12).name; // 错误: 'name' 是私有的.

4、readonly(只读属性)?

  • readonly 修饰符:将属性设置为只读的。
class Person{
??? readonly name:string;
??? public age:number;
??? constructor(name:strng,age:number){
??????? this.name=name;
??????? this.age=age;
??? }
}
let dad =new Person("Cat",12);

dad.name = "小明"; // 错误! name 是只读的.

Ts类与Js类的修饰符对比:

  • Ts有公共成员(public)修饰符;Js没有该修饰符,但可以在构造函数constructor内直接使用this定义公共成员,用于生成每个实例对象的属性。
  • Ts有私有成员(private)修饰符;Js的私有成员修饰符是(#),该成员只能在当前类中使用,TS与JS没有区别。
  • Ts有受保护成员(protected)修饰符;Js没有该修饰符,也没有对应的成员语法。在Ts中受保护成员可以被字类访问在子类中使用,但不能被实例对象在外部访问。
  • Ts有静态成员(static)修饰符;Js中也有同样的修饰符,该成员最终被解析到类的自身属性上(解析成ES5的话就是函数的属性),静态属性可以被类名直接在任何地方引用。
  • Ts有只读成员(readonly)修饰符;Js中没有该修饰符,但是可以通过属性访问器get来实现。
  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-01-30 18:50:47  更:2022-01-30 18:51:12 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 13:38:06-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码