javaScript封装的各种写法

JavaScript中的封装是面向对象编程中的重要概念之一，主要目的是为了保护数据和方法，防止被其他代码随意篡改。下面我会详细讲解JavaScript封装的各种写法。

JavaScript封装的各种写法

1. 构造函数

构造函数是创建对象的基础，可以使用函数封装对象的属性和方法，我们可以用this关键字指向当前对象，来实现对属性和方法的操作。下面是一个示例：

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

在此示例中，我们定义了一个Person构造函数，在构造函数中，我们通过this来定义了name和age这两个属性，以及sayHello这个方法。当我们使用new关键字创建一个新对象时，就可以访问这些属性和方法了：

let person = new Person('Tom', 20);
console.log(person.name); // Tom
console.log(person.age); // 20
person.sayHello(); // Hello, I am Tom

2. 原型

原型是每个JavaScript对象都有的一个属性，它是一个指针，指向该对象的原型对象。原型对象可以包含对象的属性和方法，这些属性和方法会被该对象所继承。下面是一个示例：

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

Person.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
}

let person = new Person('Tom', 20);
console.log(person.name); // Tom
console.log(person.age); // 20
person.sayHello(); // Hello, I am Tom

在此示例中，我们将sayHello方法封装在了Person.prototype中，这样做的好处是在多个实例中共用同一个方法，节省了内存。当我们访问person.sayHello()时，JavaScript会自动沿着原型链向上查找，从而找到Person.prototype中的sayHello方法。

示例

下面是一个实战示例，展示如何通过构造函数和原型结合的方式封装一个可以创建模态框的类：

function Modal(options) {
  // 构造函数中的属性
  this.title = options.title; // 标题
  this.content = options.content; // 内容
  this.modalContainer = null; // 模态框容器
}

// 构造函数中的方法
Modal.prototype.init = function() {
  // 创建模态框容器
  this.modalContainer = document.createElement('div');
  // 模态框内容
  let modalContent = document.createElement('div');
  modalContent.innerHTML = this.content;

  // 模态框标题，关闭按钮
  let modalTitle = document.createElement('div');
  modalTitle.innerHTML = this.title;
  let closeButton = document.createElement('button');
  closeButton.innerText = '关闭';
  // 点击关闭按钮关闭模态框
  closeButton.addEventListener('click', function() {
    document.body.removeChild(this.modalContainer);
  }.bind(this))

  // 添加模态框内容、标题和关闭按钮
  this.modalContainer.appendChild(modalTitle);
  this.modalContainer.appendChild(modalContent);
  this.modalContainer.appendChild(closeButton);
  // 将模态框容器添加到body中
  document.body.appendChild(this.modalContainer);
};

// 创建模态框
let modal = new Modal({
  title: '提示',
  content: '这是一个模态框'
});
modal.init();

在此示例中，我们通过构造函数创建了一个Modal类，通过原型的方式为该类添加了init方法，用于创建模态框。该示例展示了如何通过构造函数和原型结合的方式进行封装，以及如何通过绑定函数内部的this指向对象的方式，来解决常见的作用域问题。