对象

对象基础

对象是 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] = myDataValue

this含义

上下文this 指向示例
对象方法当前对象object.method()
构造函数新创建的实例new Constructor()
全局作用域window/globalfunction(){}
箭头函数外层作用域() => {}

构造函数

构造函数的作用

  • 创建多个相似对象的模板
  • 定义对象的共同属性和方法
  • 实现代码复用

构造函数执行过程

  1. 创建新对象
  2. 绑定 this
  3. 执行构造函数代码
  4. 返回新对象

命名规范

  • 首字母大写
  • 使用名词
  • 表示对象类型
// 定义构造函数
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 关键字
  • 不要忘记构造函数首字母大写
  • 避免在构造函数中返回值