对象
2025-02-17
对象基础
对象是 JavaScript 中最基础的数据结构，它具有以下特点：
- 包含相关数据和方法的集合
- 成员之间用逗号分隔
- 支持多种数据类型
- 可以包含属性和方法
对象的组成
| 成员类型 | 说明 | 示例 |
|---|---|---|
| 属性 | 存储数据的变量 | name: "value" |
| 方法 | 对象的操作函数 | method() { } |
对象字面量
// 基本对象结构
const person = {
name:["Bob", "Json"],
age: 32,
bio: function () {
console.log(`${this.name[0]} ${this.name[1]} now ${this.age} ages`);
},
introduceSelf: function() {
console.log(`My name is ${this.name[0]}`);
}
}
// 访问对象成员
person.name
person.name[1]
person.age
person.bio()
person.introduceSelf()点表示法
基本语法
// 访问属性
object.property
// 调用方法
object.method()嵌套对象
对象可以作为另一个对象的属性值：
// 简单对象
const personn = {
name :["Bob","Json"]
}
// 嵌套对象
const person = {
name :{
first: "Bob",
last: "Json"
}
}
// 访问嵌套属性
person.name.first
person.name.last括号表示法
基本语法
// 访问属性
object["property"]
// 调用方法
object["method"]()点表示法通常优于括号表示法，因为它更简洁且更易于阅读
必须使用括号表示法的情况
当属性名是动态的或存储在变量中时：
const person = {
name:["Bob","Json"],
age : 32
}
function logProperty(propertyName) {
console.log(person[propertyName])
}
logProperty("name")[0]
logProperty("age")设置对象成员
更新和添加成员
// 更新现有属性
person.age = 45
person["name"]["last"] = "Smith"
// 添加新属性
person["eyes"] = "hazel"
person.farewall = function() {
console.log("Good bye")
}括号表示法一个技巧：它不仅可以动态的去设置对象成员的值，还可以动态的去设置成员的名字
// 动态设置属性名和值
const myDataName = nameInput.value
const myDataValue = valueInput.value
person[myDataName] = myDataValuethis含义
| 上下文 | this 指向 | 示例 |
|---|---|---|
| 对象方法 | 当前对象 | object.method() |
| 构造函数 | 新创建的实例 | new Constructor() |
| 全局作用域 | window/global | function(){} |
| 箭头函数 | 外层作用域 | () => {} |
构造函数
构造函数的作用
- 创建多个相似对象的模板
- 定义对象的共同属性和方法
- 实现代码复用
构造函数执行过程
- 创建新对象
- 绑定 this
- 执行构造函数代码
- 返回新对象
命名规范
- 首字母大写
- 使用名词
- 表示对象类型
// 定义构造函数
function Person(name) {
this.name = name
this.interest = "coding"
this.bio = function() {
console.log(`My name is ${this.name}`)
}
}
// 创建实例
const salva = new Person("Salva")
salva.name
salva.interest
salva.bio()注意：
- 总是使用 new 关键字
- 不要忘记构造函数首字母大写
- 避免在构造函数中返回值