R / Richie全部文章 ↑

前端 · 2 分钟阅读

对象

目录

对象基础

对象是 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/global function(){}
箭头函数 外层作用域 () => {}

构造函数

构造函数用来创建多个相似对象的模板，把共同属性和方法封装起来，避免重复代码。

构造函数执行过程

  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 关键字，函数名首字母大写，构造函数里不要写 return。