JavaScript之信息的封装 js对象入门

2023年5月19日下午9:40 • JavaScript

下面是针对“JavaScript之信息的封装 js对象入门”的完整攻略：

什么是信息封装

信息封装是一种数据抽象的方式，可以隐藏数据的具体实现细节，只暴露对外的接口部分。通过这种方式来达到保护数据的目的，同时也可以控制对数据的访问权限。

JavaScript 中可以通过对象来实现信息封装，具体实现方式是通过定义对象的属性和方法，来封装对象的数据和行为。

JavaScript 对象的创建

在 JavaScript 中，我们可以通过如下两种方式来创建对象：

对象字面量

对象字面量是一种直接创建和初始化对象的方式，它通过一系列键值对的方式来定义对象的属性和方法，例如：

let person = {
  name: 'Tom',
  age: 18,
  sayHi: function() {
    console.log('Hi, I am ' + this.name);
  }
};

上述代码中，创建了一个 person 对象，并定义了其 name、age 两个属性和 sayHi 方法。可以通过 . 运算符来访问对象的属性和方法，例如 person.age 或 person.sayHi()。

构造函数

对象的构造函数是一种创建对象的模板，通过函数的方式来定义对象的属性和方法，例如：

function Person(name, age) {
  this.name = name;
  this.age = age;
  this.sayHi = function() {
    console.log('Hi, I am ' + this.name);
  }
};

上述代码中，定义了一个 Person 构造函数，并通过 this 关键字来定义了其 name、age 两个属性和 sayHi 方法。可以通过 new 关键字来实例化一个 Person 对象，例如：

let person = new Person('Tom', 18);

示例

下面通过一个示例来展示对象的使用，该示例是实现一个简单的银行账户管理系统，包含账户的存款和取款操作，涉及到的操作数据都需要通过信息封装来保护。

创建 Account 对象

首先，我们先创建一个 Account 对象，该对象包含账户的初始金额 balance 属性和 deposit、withdraw 方法。其中，deposit 方法用于向账户中存入指定金额，withdraw 方法用于从账户中取出指定金额。

function Account(balance) {
  this.balance = balance;

  this.deposit = function(amount) {
    this.balance += amount;
    console.log(`成功存入 ${amount} 元，账户余额为 ${this.balance} 元。`);
  };

  this.withdraw = function(amount) {
    if (amount > this.balance) {
      console.log(`余额不足，当前账户余额为 ${this.balance} 元。`);
    } else {
      this.balance -= amount;
      console.log(`成功取出 ${amount} 元，账户余额为 ${this.balance} 元。`);
    }
  };
}

在上述代码中，我们通过 this 关键字来定义了 balance 属性和 deposit、withdraw 方法，deposit 和 withdraw 方法都包含一个参数 amount，用于传递存款和取款的金额。

使用 Account 对象

我们已经创建了 Account 对象，下面来展示如何使用它。首先，我们需要实例化一个账户，并对其进行操作：

let account = new Account(1000);

account.deposit(500); // 存入500元，账户余额为1500元。
account.withdraw(1000); // 取出1000元，账户余额为500元。
account.withdraw(1000); // 余额不足，当前账户余额为500元。

上述代码中，我们实例化了一个账户，并分别执行了 deposit 和 withdraw 操作，输出了相应的操作结果。可以看到，deposit 和 withdraw 操作都会输出当前账户的余额信息，同时进行了数据校验，避免了出现一些不合理的操作。