知识篇 -- JS对象详解

Ray Shine 2024/2/11 JavaScript基础知识

本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

如有侵权，请联系本博主删除。

在JavaScript中，对象是核心概念之一，它是一种复合数据类型，允许我们存储和组织复杂的数据。对象可以看作是键值对的无序集合，其中键（key）是字符串（或Symbol），值（value）可以是任何数据类型，包括其他对象和函数。理解对象是掌握JavaScript面向对象编程的基础。

# 一、对象的创建方式基础

JavaScript提供了多种创建对象的方式：

# 1. 对象字面量 (Object Literal) 常用

最简单、最常用的创建对象的方式。

const person = {
    name: "Alice",
    age: 30,
    isStudent: false,
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};
console.log(person); // { name: "Alice", age: 30, isStudent: false, greet: [Function: greet] }

# 2. `new Object()` 构造函数

使用内置的 Object 构造函数创建对象。

const car = new Object();
car.brand = "Toyota";
car.model = "Camry";
car.start = function() {
    console.log(`${this.brand} ${this.model} started.`);
};
console.log(car); // { brand: "Toyota", model: "Camry", start: [Function: start] }

# 3. 构造函数 (Constructor Function) 传统

通过定义一个函数作为对象的“蓝图”，然后使用 new 关键字来创建多个具有相同结构的对象实例。

function Dog(name, breed) {
    this.name = name;
    this.breed = breed;
    this.bark = function() {
        console.log(`${this.name} barks!`);
    };
}

const dog1 = new Dog("Buddy", "Golden Retriever");
const dog2 = new Dog("Lucy", "Labrador");

console.log(dog1.name); // Buddy
dog2.bark(); // Lucy barks!

# 4. `Object.create()` 原型继承

使用现有对象作为新创建对象的原型。

const animal = {
    eats: true,
    walk: function() {
        console.log("Animal walks.");
    }
};

const rabbit = Object.create(animal);
rabbit.jumps = true;
console.log(rabbit.eats); // true (继承自animal)
rabbit.walk(); // Animal walks.

# 二、属性的访问与操作基础

对象的属性可以通过两种方式访问：点表示法和方括号表示法。

# 1. 点表示法 (Dot Notation) 简洁

当属性名是合法的JavaScript标识符且已知时使用。

const user = {
    firstName: "John",
    lastName: "Doe"
};
console.log(user.firstName); // John
user.age = 25; // 添加属性
delete user.lastName; // 删除属性

# 2. 方括号表示法 (Bracket Notation) 灵活

当属性名包含特殊字符、空格、是变量或数字时使用。

const settings = {
    "user-name": "Jane",
    "user id": 123,
    1: "first"
};
console.log(settings["user-name"]); // Jane
console.log(settings["user id"]); // 123
console.log(settings[1]); // first

let propName = "user-name";
console.log(settings[propName]); // Jane (使用变量访问属性)

# 三、对象的方法与 `this` 关键字核心

对象中的函数被称为方法。在方法内部，this 关键字扮演着至关重要的角色，它指向调用该方法的对象。

const calculator = {
    operand1: 10,
    operand2: 5,
    add: function() {
        return this.operand1 + this.operand2; // this指向calculator
    },
    subtract: function() {
        return this.operand1 - this.operand2; // this指向calculator
    }
};

console.log(calculator.add());      // 15
console.log(calculator.subtract()); // 5

// 如果将方法赋值给一个变量，this的指向会改变
const addFunc = calculator.add;
// console.log(addFunc()); // NaN (在非严格模式下，this指向全局对象，operand1和operand2为undefined)

注意：箭头函数没有自己的 this，它会捕获其定义时所在上下文的 this。因此，在对象方法中，如果需要访问对象的属性，通常不建议使用箭头函数作为方法。

# 四、遍历对象属性实用

# 1. `for...in` 循环

用于遍历对象的所有可枚举属性（包括原型链上的属性）。

const student = { name: "Bob", grade: "A" };
for (let key in student) {
    console.log(`${key}: ${student[key]}`);
}
// 输出：name: Bob, grade: A

注意：为了避免遍历到原型链上的属性，通常会配合 hasOwnProperty() 方法使用：

for (let key in student) {
    if (student.hasOwnProperty(key)) {
        console.log(`${key}: ${student[key]}`);
    }
}

# 2. `Object.keys()`, `Object.values()`, `Object.entries()` (ES6新增) 推荐

这些方法返回一个数组，包含了对象自身的可枚举属性的键、值或键值对。

Object.keys(obj): 返回一个包含所有属性名的数组。
Object.values(obj): 返回一个包含所有属性值的数组。
Object.entries(obj): 返回一个包含所有 [key, value] 对的数组。

const product = { id: 1, name: "Laptop", price: 1200 };
console.log(Object.keys(product));   // ["id", "name", "price"]
console.log(Object.values(product)); // [1, "Laptop", 1200]
console.log(Object.entries(product)); // [["id", 1], ["name", "Laptop"], ["price", 1200]]

// 结合for...of循环遍历
for (let [key, value] of Object.entries(product)) {
    console.log(`${key}: ${value}`);
}

理解JavaScript对象是构建复杂应用程序的基础。通过掌握对象的创建、属性操作、方法定义以及 this 的指向，你将能够更好地组织和管理数据，实现更强大的功能。

← 变量与数据类型函数 →

一ξひβθ光 i