共计 3361 个字符，预计需要花费 9 分钟才能阅读完成。
编程笔记 html5&css&js 087 JavaScript 自定义对象
- 一、Javascript 对象分类
- 二、Javascript 自定义对象的常用创建方法：
-
- 1. 对象字面量
- 2. 构造函数
- 3. 原型链（Prototype）
- 4. Object.create()
- 5. ES6 Class
- 三、访问对象的属性和方法：
- 四、自定义对象在 JavaScript 中的用途
- 综合示例
在 JavaScript 中，对象是键值对的集合，可以包含属性（数据）和方法（函数）。
一、Javascript 对象分类
根据创建方式和用途，对象可以大致分为以下几种类型：
-
原生对象 ：由 JavaScript 引擎提供的内置对象，如
String、Number、Array、Date、Function、RegExp等。 -
宿主对象 ：由运行环境（浏览器或 Node.js 等）提供的对象，例如浏览器中的
window、Document、XMLHttpRequest等。 -
自定义对象：开发者按照自己的需求创建的对象，包括使用构造函数、对象字面量、原型继承机制以及 ES6 Class 语法创建的对象。
二、Javascript 自定义对象的常用创建方法：
1. 对象字面量
let myObject = {
property1: 'value1',
property2: function() { },
};
这种方式简单直接地创建了一个带有属性和方法的对象。
2. 构造函数
function MyObject(param1, param2) {
this.property1 = param1;
this.property2 = param2;
this.method = function() { };
}
let instance = new MyObject('value1', 'value2');
通过构造函数可以定义一种对象类型的模板，并通过 new 关键字实例化出多个具有相同结构的对象。
3. 原型链（Prototype）
function MyObject() {}
MyObject.prototype.property = 'sharedValue';
MyObject.prototype.method = function() { };
let instance = new MyObject();
通过原型，可以在所有实例之间共享属性和方法，节省内存。
4. Object.create()
let prototype = {
method: function() { }
};
let myObject = Object.create(prototype);
myObject.property1 = 'value1';
使用 Object.create() 可以基于指定的原型创建新对象。
5. ES6 Class
class MyObject {
constructor(param1, param2) {
this.property1 = param1;
this.property2 = param2;
}
method() { }
}
let instance = new MyObject('value1', 'value2');
从 ECMAScript 6 开始，Class 语法提供了更接近传统面向对象语言的类定义方式。尽管在底层仍然是基于原型的机制，但 Class 为开发者提供了一种更清晰简洁的接口。
三、访问对象的属性和方法：
let obj = {name: "Alice"};
console.log(obj.name);
- 通过点标记法或方括号标记法访问动态属性：
obj['name'];
obj[propName];
obj.sayHello = function() { console.log("Hello!"); };
obj.sayHello();
以上就是 JavaScript 中关于对象分类、自定义对象的创建方法以及如何访问对象属性和方法的关键概念解释。
四、自定义对象在 JavaScript 中的用途
自定义对象在 JavaScript 中用途广泛，是实现面向对象编程和数据结构化的重要手段。以下是自定义对象的一些主要用途：
- 数据封装 ：自定义对象可以用来封装具有特定意义的数据和操作这些数据的方法，提高代码的可读性和可维护性。例如，创建一个
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());
-
模拟现实世界实体：自定义对象可以用来模拟现实世界的实体或概念，如汽车、订单、书籍、用户账户等。每个对象都代表一个实体，并通过属性和方法描述其状态和行为。
-
复用代码和逻辑 ：通过构造函数或者类创建的对象实例，可以共享原型链上的方法，避免了重复代码。例如，多个
Car对象实例可以共享同一个getInfo方法。 -
实现继承与多态：通过原型继承或者 ES6 Class 语法，可以创建基于已有对象类型的子类型，实现面向对象设计中的继承和多态特性，从而扩展功能或定制特定行为。
-
模块化编程：自定义对象可以作为一个模块，对外提供有限的接口，隐藏内部实现细节，有利于代码组织和团队协作。
-
数据结构表示：自定义对象可以用来实现复杂的数据结构，如栈、队列、树、图等，便于进行算法设计和数据处理。
-
事件驱动编程：在 JavaScript 中，自定义对象可以作为事件发布者或监听者，用于实现事件驱动编程模型，比如 DOM 元素的事件处理就是基于此机制。
总之，自定义对象是 JavaScript 编程中非常核心且灵活的工具，几乎无处不在，对于构建复杂的软件系统具有重要作用。
综合示例
下面是一个综合示例，创建一个自定义对象 BankAccount 表示银行账户，包含存款、取款、查询余额以及计算利息的方法：
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());
myAccount.withdraw(200);
console.log(myAccount.getBalance());
console.log(myAccount.calculateYearlyInterest());
在上述示例中，BankAccount类是一个自定义对象，它封装了银行账户的核心属性和行为。通过实例化这个类，我们可以创建多个具有相同接口的不同账户，并独立操作它们。
原文地址: 编程笔记 html5&css&js 087 JavaScript 自定义对象
