TypeScript 类的介绍与使用.

本文深入介绍了TypeScript的面向对象特性,包括类的定义与使用,类的继承,静态与实例成员,访问修饰符,存取器,抽象类以及类的初始化顺序。示例代码详细解释了每个概念,帮助读者理解如何在实际开发中应用这些概念。
摘要由CSDN通过智能技术生成

类的使用

        TypeScript是面向对象的JavaScript

        类描述了所创建的对象共同的属性和方法

        TypeScript支持面向对象的所有特性,比如类、接口等

        类名首字母建议大写

//语法格式
class class_name{
    //类作用域
}

定义类的关键字为class,后面紧跟类名,类可以包括以下几个模块(类的数据成员):

        字段 — 字段是类里面声明的变量,字段表示对象的有关数据

        构造函数 — 类实例化时调用,可以为类的对象分配内存 构造函数中的this指向该类

        方法 — 方法为对象执行的操作,
 

export default {};
//创建一个类
class Person {
  //字段 属性:属性值
  name: string;
  age: number;
  //构造函数   参数可以与属性不一致 此参数可理解为形参
  constructor(name: string, age: number) {
    //this指向的是该Person类
    this.name = name;
    this.age = age;
  }
  //函数(方法)
  say(): void {
    console.log(`我的名字叫${this.name},今年${this.age}岁`);
  }
}
// 实例化
let stu1 = new Person("赵六", 10);
// 调用函数
stu1.say(); //我的名字叫赵六,今年10岁

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

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

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

export default {};
//语法格式
//class son_class_name extends fa_class_name
//super()  子类构造中使用super()  表示调用父类的构造函数
//super.方法名()   表示调用父类中的方法
​
// 创建一个类
class Person {
  // 属性
  name: string;
  age: number;
  //   构造函数
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  //   方法
  say(): void {
    console.log(`我叫${this.name},我是父类`);
  }
}
// 子类继承父类
class Son extends Person {
  // 子类属性
  score: number;
  //   构造函数
  constructor(name: string, age: number, score: number) {
    // 调用父类属性 super()
    super(name, age);
    this.score = score;
  }
  //   子类方法
  say(): void {
    // 调用父方法
    super.say(); //我叫赵六, 我是父类;
    // 重写父类方法
    console.log(`我叫${this.name},我是子类`); //我叫赵六, 我是子类;
  }
}
// 实例化
let stu1 = new Son("张三", 20, 99);
// 调用实例化的对象
stu1.say();

static与instanceof

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

        instanceof运算符用于判断对象是否是指定的类型,如果是返回true,否则返回false;

// instaceof 判断对象是否是某个指定类型 格式:对象名 instaceof 类名 返回布尔值
// 创建一个类
class Student {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
}
let stu1 = new Student("李四", 14);
console.log(stu1 instanceof Student);   //true

类中的修饰符
        public(默认):共有,可以在任何地方被访问

        protected:受保护,可以被其自身及其子类访问

        private:私有,只能被其定义所在的类访问

        readonly:可以使用readonly关键字将属性设置为可读的,只读属性必须在声明时或构造函数里被初始化
 

export default {};
class Person {
  protected sName: string; //受保护属性,可以被其自身及其子类访问
  private age: number; //私有属性,只能被其定义所在的类访问
  readonly sex: string; //只读属性,只可读取,不可赋值修改
  constructor(name: string, age: number, sex: string) {
    this.sName = name;
    this.age = age;
    this.sex = sex;
  }
}
let p1 = new Person("赵六", 20, "男");
// console.log(p1.name); //报错 类中的name为受保护属性 只可以被本身及其子类访问
// console.log(p1.age); //报错 类中的age为私有属性 只能被其定义所在的类访问
console.log(p1.sex); //男
// p1.sex = "李四"  //报错 类中的sex为只读属性

getter与setter
        官方的另一个名字:存取器

        通过getters/setters来截取对对象成员的访问

注意:

        如果存在get,但没有set,则该属性自动是只读的

        如果没有指定setter参数的类型,他将从getter的返回类型中推断出来

        访问器和设置其必须有相同的成员可见性
 

export default {};
// 声明一个类
class Person {
  // 私有属性
  private name: string = "赵六";
  // 取值
  get getName() {
    console.log("get被触发");
    return this.name;
  }
  //   设置值   传入值
  set setName(name: string) {
    console.log("set被触发");
    this.name = name;
  }
}
// 实例化一个对象
let p1 = new Person();
console.log(p1);
// 查看当前的name值
console.log(p1.getName); //get被触发    赵六
// 设置name值
p1.setName = "李四"; //set被触发
// 查看修改后的name值
console.log(p1.getName); //get被触发    李四

抽象类
        抽象类作为其他派生类的基类使用,他们一般不会直接被实例化

        抽象类是专门用于定义那些不希望被外界直接创建的类

        抽象类和接口一样用于约束子类

抽象类和接口的区别:

        抽象方法必须包含abstract关键字并且可以包含访问修饰符

        接口中只能定义约束,不能定义具体实现,而抽象类中即可以定义约束,又可以定义具体实现

export default {};
// 声明一个抽象类
abstract class Person {
  abstract name: string;
  abstract age: number;
  show() {}
}
// 声明一个类继承
class Student extends Person {
  name: string = "张三";
  age: number = 20;
}
let stu1 = new Student();
console.log(stu1); //Student { name: '张三', age: 20 }

类的初始化顺序

  1. 基类的字段被初始化

  2. 基类构造函数运行

  3. 子类的字段被初始化

  4. 子类构造函数运行

    export default {};
    // 父类
    class Old {
      name: string = "张三";
      constructor() {
        console.log(`我的名字是:${this.name}`);
      }
    }
    // 子类
    class Young extends Old {
      name: string = "李四";
      constructor() {
        super();
      }
    }
    let y = new Young();
    console.log(y);
    //1、我的名字是:张三     Old类
    //2、Young { name: '李四' }       Young类

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值