Typescripe对象

一、对象概述

一切的操作都要通过对象，就是所谓的面向对象。简而言之，程序之中的所有操作都需要对象来完成。
举例：

• 操作浏览器使用 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属性，将新值”周董“赋值给该属性。