一、对象概述
一切的操作都要通过对象,就是所谓的面向对象。简而言之,程序之中的所有操作都需要对象来完成。
举例:
- 操作浏览器使用 window 对象
- 操作网页使用 document 对象
- 操作控制台使用 console 对象
那么对象是什么?就需要先了解程序是什么?计算机程序的本质就是对现实事物的抽象,比如:照片是对一个具体的人的抽象,汽车模型是对具体汽车的抽象。程序也是对事物的抽象,在程序中可以表示一个人,一颗子弹等等所有的事物,一个事物到了程序中就变成了一个对象。在程序中所有对象被分成了两个部分:数据和功能。数据在对象中被称为属性,而功能就被称为方法,所以说,在程序中一切皆对象。
在Typescript中的对象,是对生活具体事物的抽象,使得我们可以通过代码来描述具体的事物,TS中的对象,也是由特征和行为组成的,他们由各自专业的名称:属性(特征)和方法(行为)
理解TS中的对象:一组相关属性和方法的集合,并且是无序的。
看一个示例:
{
name:'周杰伦',
gender:'男',
height:175,
sing:function(){
console.log('故事的小黄花 从出生那年就飘着')
}
}
二、创建对象
想要面向对象,操作对象,首先便要拥有对象,下面就来看看怎么创建对象吧!
对象的语法:
let person = {}
此处{} (花括号,大括号)表示对象,而对象中没有属性或方法时,称为:空对象。
对象中的属性或方法,采用键值对的形式,键,值之间使用冒号(:)来配对。
let person = {
键1:值1,
键2:值2
}
三、类
1、类的概念
要创建对象,必须要先定义类,所谓的类可以理解为对象的模型,程序中可以根据类创建指定类型的对象,比如说通过Person类来创建人的对象,通过Car来创建汽车的对象,不同的类可以用来创建不同的对象。下来我们看看如何定义类:
class 类名 {
属性名:类型;
constructor(参数:类型){
this.属性名 = 参数;
}
方法名(){
...
}
}
定义类的关键字为 class,后面紧跟类名,类可以包含以下几个模块(类的数据成员):
- 字段 − 字段是类里面声明的变量。字段表示对象的有关数据。
- 构造函数 − 类实例化时调用,可以为类的对象分配内存。
- 方法 − 方法为对象要执行的操作。
实例
创建一个Car 类,并创建类的数据成员
class Car {
// 字段
engine:string;
// 构造函数
constructor(engine:string) {
this.engine = engine
}
// 方法
disp():void {
console.log("发动机为 : "+this.engine)
}
}
创建实例化对象
类实例化时会调用构造函数
var obj = new Car("Engine 1")
2、完整实例
以下实例创建来一个 Car 类,然后通过关键字 new 来创建一个对象并访问属性和方法:
class Car {
// 字段
engine:string;
// 构造函数
constructor(engine:string) {
this.engine = engine
}
// 方法
disp():void {
console.log("函数中显示发动机型号 : "+this.engine)
}
}
// 创建一个对象
var obj = new Car("V8")
// 访问字段
console.log("读取发动机型号 : "+obj.engine)
// 访问方法
obj.disp()
输出结果为:
3、类的继承
类继承使用关键字 extends,子类除了不能继承父类的私有成员(方法和属性)和构造函数,其他的都可以继承。
TypeScript 一次只能继承一个类,不支持继承多个类,但 TypeScript 支持多重继承(A 继承 B,B 继承 C)。
实例
类的继承:实例中创建了 Shape 类,Circle 类继承了 Shape 类,Circle 类可以直接使用 Area 属性:
class Shape {
Area:number
constructor(a:number) {
this.Area = a
}
}
class Circle extends Shape {
disp():void {
console.log("圆的面积: "+this.Area) //打印结果为:圆的面积:223
}
}
var obj = new Circle(223);
obj.disp()
通过继承可以将多个类中共有的代码写在一个父类中,这样只需要写一次就可以让所有的子类都同时拥有父类的属性。并且可以在不修改原来类的基础上添加新方法。
需要注意的是子类只能继承一个父类,TypeScript 不支持继承多个类,但支持多重继承,如下实例:
class Root {
str:string;
}
class Child extends Root {}
class Leaf extends Child {} // 多重继承,继承了 Child 和 Root 类
var obj = new Leaf();
obj.str ="hello"
console.log(obj.str) //输出结果:hello
4、继承类的方法重写
类继承后,子类可以对父类的方法重新定义,这个过程称之为方法的重写。
其中 super 关键字是对父类的直接引用,该关键字可以引用父类的属性和方法。
class Shape{
area:number;
constructor(a:number){
this.area = a;
}
print():void{
console.log("输出父类的信息");
}
}
class Circle extends Shape{
disp(){
console.log("圆的面积:",this.area);
}
print():void{ //子类的方法和父类的方法同名
super.print(); //调用的是父类的print方法
console.log("输出子类的信息");
}
}
let c1 = new Circle(233);
c1.print();
四、接口
1、对象的类型注解
TS中的对象时结构化
的,在使用对象前,就可以根据需求,提前设计好对象的结构。
类型注解简单理解是建立一种契约,从而约束对象的结构。
//此处的{}表示对象的类型注解
let person:{
name:string;
age:number;
}
//此处的{}表示ts中的对象
person = {
name:'刘老师',
age:18
}
类型注解中键值对的值为
类型
!
类型注解的分号是可以省略的。
2、对象方法的类型注解
let p1:{
sayhi:() => void
}
p1={
sayhi:function(){
console.log('哎呦,不错呀~');
}
}
let p2:{
sing:(name:string)=>void
}
p2={
sing:function(name:string){
console.log('歌曲名称:'+name);
}
}
如果在P1的方法中添加属性值(name),将会报错,如图所示:
注意:
箭头(=>) 左边小括号中的内容:表示方法的参数类型。
箭头(=>)右边的内容:表示方法的返回值类型。
方法类型注解的关键点:1 参数,2 返回值
3、接口的使用
直接在对象名称后面写类型注解的坏处:
1.代码结构不简洁
2.无法复用类型注解
接口的出现就是为了解决上述问题,接口为对象的类型注解命名,并为代码建立契约来约束对象的结构。
//语法
interface IUser { let p1:IUser {
name:string name:'jack'
age:number age:18
} }
创建好接口之后,通过接口名称作为变量的类型,这样写的好处就是通过声明变量P1,直接用创建好的接口作为当前变量的接口,相当于直接把IUser接口的内容引用起来,使内容清晰,日后可以通过接口名称直接引用。
//创建一个接口
interface IUser {
name:string
age:numbe=
sayHi:()=>void
}
//使用接口
let p1:IUser={
name:'jack',
age:18,
sayHi:function(){
console.log('再见杰克')
}
}
let p2:IUser={
name:'rose',
age:16,
sayHi:function(){
console.log('再见肉丝')
}
}
interface表示接口,接口名称约定以I
开头。
五、取值和存值
1、取值
即拿到对象的属性或方法并使用。
获取对象中的属性,称为:访问属性。
获取对象中的方法并调用,称为:调用方法。
需求:获取到对象(j)的name属性。通过点语法(.)就可以访问对象中的属性
- 访问属性及调用方法
interface IUser{
name:string
height:number
sing:()=>void
}
let j:IUser = {
name:'周杰伦',
height:175,
sing:function(){
console.log('故事的小黄花...');
}
}
//访问属性
console.log(j.name)
console.log(j.height)
// 调用方法
j.sing()
2、存值
存值,即修改(设置)对象中属性的值
需求:将对象(j)的name属性的值修改为”周董“。
j.name = "周董"
解释:先通过点语法获取到name属性,将新值”周董“赋值
给该属性。