javascript对象介绍

1. 什么是对象？

在 JavaScript 中，对象是一个无序的键值对集合，可以用来存储数据和功能。对象可以包含原始值、函数（方法）以及其他对象，是构建复杂数据结构和实现面向对象编程的基础。

2. 创建对象

2.1 字面量方式

最常见的创建对象的方法是使用对象字面量：

const person = {
    name: "Alice",
    age: 25,
    isStudent: true
};

2.2 构造函数方式

使用构造函数可以创建多个相似对象：

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person1 = new Person("Bob", 30);
const person2 = new Person("Charlie", 22);

2.3 Object.create() 方法

通过指定原型对象创建新对象：

const proto = {
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

const person3 = Object.create(proto);
person3.name = "David";
person3.greet(); // 输出: Hello, my name is David

3. 访问对象属性

3.1 点语法

使用点号 (.) 来访问属性：

console.log(person.name); // 输出: Alice

3.2 方括号语法

使用方括号 ([]) 访问属性，适用于动态属性名：

console.log(person['age']); // 输出: 25

4. 修改对象属性

你可以直接修改对象的属性值：

person.age = 26; // 修改属性
console.log(person.age); // 输出: 26

person.isStudent = false; // 添加新属性
console.log(person.isStudent); // 输出: false

5. 删除对象属性

使用 delete 操作符删除属性：

delete person.isStudent; // 删除属性
console.log(person.isStudent); // 输出: undefined

6. 遍历对象属性

6.1 for…in 循环

可以使用 for…in 遍历对象的所有可枚举属性：

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

6.2 Object.keys()

获取对象的所有属性名：

const keys = Object.keys(person);
console.log(keys); // 输出: ["name", "age"]

6.3 Object.values()

获取对象的所有属性值：

const values = Object.values(person);
console.log(values); // 输出: ["Alice", 26]

6.4 Object.entries()

获取对象的所有键值对：

const entries = Object.entries(person);
console.log(entries); // 输出: [["name", "Alice"], ["age", 26]]

7. 对象方法

对象可以包含方法，这是将数据和功能结合的一个重要特点：

const calculator = {
    add: function(x, y) {
        return x + y;
    },
    subtract: function(x, y) {
        return x - y;
    }
};

console.log(calculator.add(5, 3)); // 输出: 8
console.log(calculator.subtract(5, 3)); // 输出: 2

8. 继承与原型链

JavaScript 中的继承通常通过原型链实现：

8.1 创建原型

首先定义一个动物类，然后定义狗类继承自动物类：

function Animal(name) {
    this.name = name;
}

Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

function Dog(name) {
    Animal.call(this, name); // 继承属性
}

// 继承方法
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

const dog = new Dog("Rex");
dog.speak(); // 输出: Rex makes a noise.

8.2 使用 class 语法

ES6 引入了 class 语法，使得继承的定义更加简洁：

class Animal {
    constructor(name) {
        this.name = name;
    }

    speak() {
        console.log(`${this.name} makes a noise.`);
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`);
    }
}

const dog2 = new Dog("Max");
dog2.speak(); // 输出: Max barks.

8.3 原型链

1. 什么是原型链？

在 JavaScript 中，每个对象都有一个内部属性 [[Prototype]]，指向另一个对象（即它的原型）。通过这个原型，对象可以访问其原型对象上的属性和方法。当试图访问一个对象的属性时，JavaScript
首先会查找该对象本身是否有该属性。如果没有，它会查找对象的原型，直到找到该属性或到达原型链的末尾（通常是 null）。

2. 原型链的基本概念
构造函数：通过构造函数创建对象时，所有实例对象都共享构造函数的原型。
prototype 属性：每个函数都有一个 prototype 属性，它指向一个对象，该对象包含所有实例共享的属性和方法。
proto 属性：这是每个对象的一个隐式属性，指向它的原型。
3. 原型链的工作原理
当你访问一个对象的属性时，JavaScript 引擎会按照以下步骤执行：
检查对象本身是否有该属性。
如果没有，检查对象的原型。
如果仍然没有，查找原型的原型（即上一级原型）。
持续查找，直到找到属性或到达原型链的终点（即 null）。
4. 创建原型链的示例
以下示例展示了如何通过原型链来实现继承：

// 定义一个构造函数
function Animal(name) {
    this.name = name;
}

// 在原型上定义方法
Animal.prototype.speak = function() {
    console.log(`${this.name} makes a noise.`);
};

// 定义一个 Dog 构造函数
function Dog(name) {
    Animal.call(this, name); // 继承属性
}

// 设置 Dog 的原型为 Animal 的实例
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

// 重写 Dog 的 speak 方法
Dog.prototype.speak = function() {
    console.log(`${this.name} barks.`);
};

// 创建实例
const dog = new Dog('Rex');
dog.speak(); // 输出: Rex barks.

5. 检查原型链
你可以使用 instanceof 和 isPrototypeOf 来检查对象与原型之间的关系：

console.log(dog instanceof Dog); // 输出: true
console.log(dog instanceof Animal); // 输出: true
console.log(Animal.prototype.isPrototypeOf(dog)); // 输出: true

6. 原型链的优点
代码复用：通过原型链，可以创建共享的方法和属性，减少内存占用。
动态扩展：可以在运行时给原型添加新方法和属性，所有实例都会自动更新。
7. 注意事项
原型链的深度过大可能会导致性能问题，因此要尽量保持原型链的扁平化。
使用 Object.create() 进行原型链的设置可以避免一些常见的陷阱，如共享引用类型的属性（例如数组和对象）。

9. 对象的特殊属性

9.1 this 关键字

在对象方法中，this 关键字指向调用该方法的对象：

const person4 = {
    name: "Eve",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

person4.greet(); // 输出: Hello, my name is Eve

9.2 闭包与对象

对象中的方法可以形成闭包，保持对外部变量的引用：

function createCounter() {
    let count = 0;
    return {
        increment: function() {
            count++;
            console.log(count);
        },
        decrement: function() {
            count--;
            console.log(count);
        }
    };
}

const counter = createCounter();
counter.increment(); // 输出: 1
counter.increment(); // 输出: 2
counter.decrement(); // 输出: 1

10. 小结

JavaScript 对象是非常强大和灵活的数据结构，可以存储各种类型的数据和方法。掌握对象的创建、访问、修改和遍历等基本操作，对于高效使用 JavaScript 至关重要。在现代开发中，对象广泛用于数据模型、API 响应处理以及复杂应用程序的状态管理等场景。