编程笔记 html5&css&js 087 JavaScript 自定义对象

在JavaScript中，对象是键值对的集合，可以包含属性（数据）和方法（函数）。

一、Javascript对象分类

根据创建方式和用途，对象可以大致分为以下几种类型：

1. 原生对象：由JavaScript引擎提供的内置对象，如String、Number、Array、Date、Function、RegExp等。

2. 宿主对象：由运行环境（浏览器或Node.js等）提供的对象，例如浏览器中的window、Document、XMLHttpRequest等。

3. 自定义对象：开发者按照自己的需求创建的对象，包括使用构造函数、对象字面量、原型继承机制以及ES6 Class语法创建的对象。

二、Javascript自定义对象的常用创建方法：

1. 对象字面量

let myObject = {
    property1: 'value1',
    property2: function() { /* ... */ },
};
1
2
3
4

这种方式简单直接地创建了一个带有属性和方法的对象。

2. 构造函数

function MyObject(param1, param2) {
    this.property1 = param1;
    this.property2 = param2;
    this.method = function() { /* ... */ };
}

let instance = new MyObject('value1', 'value2');
1
2
3
4
5
6
7

通过构造函数可以定义一种对象类型的模板，并通过new关键字实例化出多个具有相同结构的对象。

3. 原型链（Prototype）

function MyObject() {}
MyObject.prototype.property = 'sharedValue';
MyObject.prototype.method = function() { /* ... */ };

let instance = new MyObject();
1
2
3
4
5

通过原型，可以在所有实例之间共享属性和方法，节省内存。

4. Object.create()

let prototype = {
    method: function() { /* ... */ }
};

let myObject = Object.create(prototype);
myObject.property1 = 'value1';
1
2
3
4
5
6

使用Object.create()可以基于指定的原型创建新对象。

5. ES6 Class

class MyObject {
    constructor(param1, param2) {
        this.property1 = param1;
        this.property2 = param2;
    }

    method() { /* ... */ }
}

let instance = new MyObject('value1', 'value2');
1
2
3
4
5
6
7
8
9
10

从ECMAScript 6开始，Class语法提供了更接近传统面向对象语言的类定义方式。尽管在底层仍然是基于原型的机制，但Class为开发者提供了一种更清晰简洁的接口。

三、访问对象的属性和方法：

• 直接访问：

let obj = {name: "Alice"};
console.log(obj.name); // 输出 "Alice"
1
2

• 通过点标记法或方括号标记法访问动态属性：

obj['name']; // 等同于 obj.name
obj[propName]; // propName 是变量名，存储属性名称
1
2

• 调用对象的方法：

obj.sayHello = function() { console.log("Hello!"); };
obj.sayHello(); // 输出 "Hello!"
1
2

以上就是JavaScript中关于对象分类、自定义对象的创建方法以及如何访问对象属性和方法的关键概念解释。

四、自定义对象在JavaScript中的用途

自定义对象在JavaScript中用途广泛，是实现面向对象编程和数据结构化的重要手段。以下是自定义对象的一些主要用途：

1. 数据封装：自定义对象可以用来封装具有特定意义的数据和操作这些数据的方法，提高代码的可读性和可维护性。例如，创建一个Person对象，它包含姓名、年龄等属性以及获取个人信息的方法。

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

    getDetails() {
        return `${this.name} is ${this.age} years old.`;
    }
}

let person = new Person("Alice", 25);
console.log(person.getDetails()); // 输出 "Alice is 25 years old."
1
2
3
4
5
6
7
8
9
10
11
12
13

2. 模拟现实世界实体：自定义对象可以用来模拟现实世界的实体或概念，如汽车、订单、书籍、用户账户等。每个对象都代表一个实体，并通过属性和方法描述其状态和行为。

3. 复用代码和逻辑：通过构造函数或者类创建的对象实例，可以共享原型链上的方法，避免了重复代码。例如，多个Car对象实例可以共享同一个getInfo方法。

4. 实现继承与多态：通过原型继承或者ES6 Class语法，可以创建基于已有对象类型的子类型，实现面向对象设计中的继承和多态特性，从而扩展功能或定制特定行为。

5. 模块化编程：自定义对象可以作为一个模块，对外提供有限的接口，隐藏内部实现细节，有利于代码组织和团队协作。

6. 数据结构表示：自定义对象可以用来实现复杂的数据结构，如栈、队列、树、图等，便于进行算法设计和数据处理。

7. 事件驱动编程：在JavaScript中，自定义对象可以作为事件发布者或监听者，用于实现事件驱动编程模型，比如DOM元素的事件处理就是基于此机制。

总之，自定义对象是JavaScript编程中非常核心且灵活的工具，几乎无处不在，对于构建复杂的软件系统具有重要作用。

综合示例

下面是一个综合示例，创建一个自定义对象BankAccount表示银行账户，包含存款、取款、查询余额以及计算利息的方法：

// 使用ES6 Class语法创建自定义对象
class BankAccount {
    constructor(accountNumber, initialBalance, annualInterestRate) {
        this.accountNumber = accountNumber;
        this.balance = initialBalance;
        this.annualInterestRate = annualInterestRate;
    }

    // 存款方法
    deposit(amount) {
        if (amount > 0) {
            this.balance += amount;
        } else {
            console.log("Invalid deposit amount!");
        }
    }

    // 取款方法
    withdraw(amount) {
        if (amount > 0 && this.balance >= amount) {
            this.balance -= amount;
        } else {
            console.log("Insufficient balance or invalid withdrawal amount!");
        }
    }

    // 查询余额方法
    getBalance() {
        return this.balance;
    }

    // 计算年利息方法
    calculateYearlyInterest() {
        const monthlyInterestRate = this.annualInterestRate / 1200; // 将年利率转换为月利率
        const interest = this.balance * monthlyInterestRate;
        return interest.toFixed(2); // 返回两位小数的利息值
    }
}

// 创建银行账户实例
const myAccount = new BankAccount('1234567890', 1000, 0.04);

// 操作账户
myAccount.deposit(500);
console.log(myAccount.getBalance()); // 输出：1500

myAccount.withdraw(200);
console.log(myAccount.getBalance()); // 输出：1300

// 计算并打印年利息
console.log(myAccount.calculateYearlyInterest()); // 输出：52.00
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

在上述示例中，BankAccount类是一个自定义对象，它封装了银行账户的核心属性和行为。通过实例化这个类，我们可以创建多个具有相同接口的不同账户，并独立操作它们。