理解javascript封装

理解Javascript封装指的是掌握如何使用封装来保证代码的安全性和可维护性。封装是面向对象编程中重要的三大特性之一，通过封装我们可以隐藏对象的内部细节，使得外部调用方不需要了解对象的内部实现细节，从而提高代码的可靠性和可维护性。

封装的原则

封装的原则是“高内聚，低耦合”，即一个对象的内部属性和方法之间应该紧密关联，外部调用方不应该直接访问对象的内部属性和方法。

封装的实现

Javascript中实现封装的具体方法包括：

1. 使用闭包来隐藏属性变量，从而保证属性变量不被外部访问，同时提供Getter和Setter方法，使得外部可以通过方法来访问和修改属性。
2. 使用Constructor和原型对象的方式定义对象，将对象的属性和方法封装在对象内部，外部调用方通过对象的接口访问对象的属性和方法。

例如：

// 使用闭包实现封装

function Counter() {
  // 利用闭包隐藏变量
  let count = 0;

  // 提供Getter和Setter方法
  this.setCount = function(val) {
    count = val;
  }
  this.getCount = function() {
    return count;
  }

  // 对象方法
  this.increment = function() {
    count++;
  }
  this.decrement = function() {
    count--;
  }
}

// 使用Constructor和原型对象实现封装

function Person(name, age, gender) {
  // 私有属性
  let _name = name;
  let _age = age;
  let _gender = gender;

  // 公有属性
  this.phone = '';

  // 公有方法
  this.getName = function() {
    return _name;
  }
  this.getAge = function() {
    return _age;
  }
}

// 定义原型方法
Person.prototype.sayHello = function() {
  console.log(`Hello, my name is ${this.getName()}, I am ${this.getAge()} years old.`);
}

封装的优点

封装的优点主要体现在以下几个方面：

1. 提高代码的可维护性，对象内部实现细节可以进行修改而不影响外部调用方的代码。
2. 提高代码的安全性，外部调用方无法直接访问对象的内部实现细节，从而避免了对对象属性的意外修改或访问。
3. 提高代码的可读性，封装可以将对象的接口和实现分离开来，从而使得代码更加简洁、易读。
4. 促进代码的重用性，封装可以将对象的实现与具体功能解耦，从而提高代码的重用性和灵活性。

示例说明

假设我们有一个名为Person的对象，它有以下属性：

• name：姓名
• age：年龄
• gender：性别

现在我们需要对这个对象进行封装，保证属性安全，并提供公共的Getter和Setter方法。

使用闭包实现

function Person(name, age, gender) {
  let _name = name;
  let _age = age;
  let _gender = gender;

  this.setName = function(name) {
    _name = name;
  }

  this.getName = function() {
    return _name;
  }

  this.setAge = function(age) {
    _age = age;
  }

  this.getAge = function() {
    return _age;
  }

  this.setGender = function(gender) {
    _gender = gender;
  }

  this.getGender = function() {
    return _gender;
  }
}

使用Constructor和原型对象实现

function Person(name, age, gender) {
  let _name = name;
  let _age = age;
  let _gender = gender;

  this.phone = '';

  this.setName = function(name) {
    _name = name;
  }

  this.getName = function() {
    return _name;
  }

  this.setAge = function(age) {
    _age = age;
  }

  this.getAge = function() {
    return _age;
  }

  this.setGender = function(gender) {
    _gender = gender;
  }

  this.getGender = function() {
    return _gender;
  }
}

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