认识封装，函数才是JS之本！

前端

2023-10-08 20:17:03

什么是JS封装

JS封装是一种将数据和操作方法组织在一起形成一个独立模块的技术。这种独立的模块称为对象，它允许我们在代码中对数据进行隐藏，只对外暴露部分数据和操作方法，从而提高代码的可读性、可维护性和可扩展性。

封装的好处

封装可以带来许多好处，包括：

提高代码的可读性：封装可以将代码组织成逻辑上相关的模块，使代码更易于理解和维护。
提高代码的可维护性：封装可以使我们更容易地对代码进行修改和扩展，而无需影响其他部分的代码。
提高代码的可扩展性：封装可以使我们更容易地将代码扩展到新的应用中，而无需对现有代码进行重大修改。
提高代码的可重用性：封装可以使我们更容易地将代码重用于其他项目中，从而节省开发时间。
提高代码的安全性：封装可以使我们更容易地保护敏感数据，防止其被未经授权的用户访问。

如何进行JS封装

进行JS封装有几种方法，包括：

使用对象字面量：对象字面量是一种使用花括号来创建对象的简单方法。对象字面量中的键值对表示对象的属性和方法。
使用构造函数：构造函数是一种用于创建对象的函数。构造函数中的参数表示对象的属性，而构造函数中的代码则表示对象的初始化方法。
使用原型对象：原型对象是用于创建新对象的基础对象。原型对象中的属性和方法会被继承到所有使用该原型对象创建的对象中。

结合实例代码来帮助理解

// 使用对象字面量进行封装
const person = {
  name: 'John Doe',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
};

// 使用构造函数进行封装
function Person(name, age) {
  this.name = name;
  this.age = age;
  this.greet = function() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  };
}

// 使用原型对象进行封装
function Person() {
  this.name = 'John Doe';
  this.age = 30;
}

Person.prototype.greet = function() {
  console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
};

// 创建对象
const person1 = new Person('Jane Doe', 25);
const person2 = new Person('John Doe', 30);

// 调用对象方法
person1.greet(); // Hello, my name is Jane Doe and I am 25 years old.
person2.greet(); // Hello, my name is John Doe and I am 30 years old.