7.1 对象概述
生活中,对象是一个具体的事物,比如:你的电脑、你的手机、古力娜扎、周杰伦(周董)等都是对象。
程序员都知道:万物皆对象。
这些具体的事物,都有自己的特征和行为:
特征:
你的电脑:尺寸、重量、价格等
你的手机:品牌、屏幕大小、颜色等
古力娜扎:年龄、身高、三围等
行为:
你的电脑:浏览网页、写代码等
你的手机:播放视频、吃鸡等
古力娜扎:演电影、配音等
TypeScript 中的对象,是对生活中具体事物的抽象,使得我们可以通过代码来描述具体的事物。
TS 中的对象,也是由特征和行为组成的,它们有各自专业的名称:属性
(特征)和方法
(行为)。
- 理解 TS 中的对象:
一组相关属性和方法的集合,并且是无序的
。
// 演示对象:
{
name: '周杰伦',
gender: '男',
height: 175,
sing: funtion () {
console.log('故事的小黄花 从出生那年就飘着')
}
}
疑问:为什么要有对象?
需求:使用 TS 代码描述周杰伦。
- 方案一:使用多个变量
let name: string = '周杰伦'
let gender: string = '男'
let height: number = 175
function sing() { ... }
缺点:一个变量只能存储一个数据,多个变量之间没有任何关联(相关性)。
- 方案二:使用数组,一次可以存储多个数据:
['周杰伦', '男', 175, function sing() { ... }]
缺点:不知道数组中的每个元素表示什么。
正确姿势:使用对象,对象在描述事物(一组相关数据)时,结构更加清晰、明了。
{ name: '周杰伦', gender: '男', height: 175, sing: function () { ... }}
总结:
对象:一组相关属性和方法的集合,并且是无序的。
在 TS 中,如果要描述一个事物或一组相关数据,就可以使用对象来实现。
7.2 创建对象
注意:先学习对象的基本使用,再学习对象的类型注解(对象的类型注解类似于对象自身的语法)。
对象的语法
let person = {}
此处的 {}
(花括号、大括号)表示对象。而对象中没有属性或方法时,称为:空对象。
对象中的属性或方法,采用键值对
的形式,键、值之间使用冒号(:
)来配对
键(key)-> 名称 ,值(value)-> 具体的数据。
多个键值对之间,通过逗号(,)来分隔(类比数组)。
现在,对象person具有两个属性:
let person = { name: '刘老师', age: 18 }
属性和方法的区别:值是不是函数,如果是,就称为方法;否则,就是普通属性。
let person = {
sayHi: function () {
console.log('大家好,我是一个方法')
}
}
注意:函数用作方法时可以省略function后面的函数名称,也叫做匿名函数。
函数没有名称,如何调用?
此处的sayHi相当于函数名称,将来通过对象的sayHi就可以调用了。
如果一个函数是单独出现的,没有与对象关联,我们称为函数;否则,称为方法。
7.3 接口
7.3.1 对象的类型注解
TS 中的对象是结构化
的,结构简单来说就是对象有什么属性或方法
。
在使用对象前,就可以根据需求,提前设计好对象的结构。
比如,创建一个对象,包含姓名、年龄两个属性。
思考过程:1 对象的结构包含姓名、年龄两个属性 2 姓名 -> 字符串类型,年龄 -> 数值类型 3 创建对象。
这就是对象的结构化类型(左侧),即:对该对象值(右侧)的结构进行类型约束。
或者说:建立一种契约,约束对象的结构
。
总结:
TS 中的对象是结构化的,在使用对象前,就可以根据需求,提前设计好对象的结构。
对象的结构化类型(类型注解):建立一种契约,约束对象的结构。
注意点:类型注解中键值对的值为类型!
7.3.2 对象方法的类型注解
let person: {
sayHi: () => void
sing: (name: string) => void
sum: (num1: number, num2: number) => number
}
箭头(=>)左边小括号中的内容:表示方法的参数类型。
箭头(=>)右边的内容:表示方法的返回值类型。
方法类型注解的关键点:1 参数 2 返回值。
注意:技巧是辅助,更重要的是理解。
7.3.3 接口的使用
直接在对象名称后面写类型注解的坏处:1 代码结构不简洁 2 无法复用类型注解。
接口:为对象的类型注解命名,并为你的代码建立契约来约束对象的结构。
语法:
interface
表示接口,接口名称约定以I
开头。
推荐:使用接口来作为对象的类型注解。
7.4 取值和存值
7.4.1 取值
取值,即:拿到对象中的属性或方法并使用。
获取对象中的属性,称为:访问属性。
获取对象中的方法并调用,称为:调用方法。
- 访问属性
let jay = { name: '周杰伦', height: 175 }
需求:获取到对象(jay)的name属性。
console.log(jay.name)
说明:通过点语法(.)
就可以访问对象中的属性。
技巧:在输入点语法时,利用VSCode给出来的提示,利用上下键快速选择要访问的属性名称。
- 调用方法
let jay = {
sing: function () {
console.log('故事的小黄花 从出生那年就飘着')
}
}
需求:调用对象(jay)的sing方法,让他唱歌。
jay.sing()
说明:通过点语法(.)就先拿到方法名称,然后,通过小括号调用方法。
7.4.2 存值
存值,即修改(设置)对象中属性的值。
let jay = { name: '周杰伦', height: 175 }
需求:将对象(jay)的name属性的值修改为’周董’。
jay.name = '周董'
解释:先通过点语法获取到name属性,然后,将新值’周董’赋值给该属性。
console.log(jay.name) // 周董
注意:设置的新值,也必须符合该属性的类型要求!
注意:几乎不会修改对象中的方法。
7.5 内置对象
对象的两种来源:1 自己创建 2 其他人创建(编程语言自带或第三方)。
内置对象,是 TS/JS 自带的一些基础对象,提供了TS开发时所需的基础或必要的能力。
已经用过的内置对象:数组。
1.学习内置对象,需要学什么? 常用属性和方法
2.怎么学? 查文档