JS面向对象编程基础篇（二） 封装操作实例详解

JS面向对象编程基础篇（二） 封装操作实例详解，是一篇介绍JavaScript中封装操作的教程文章。以下是详细的攻略解释：

什么是封装？

封装是指，将数据和操作数据的方法封装在一起，对外部隐藏具体实现的细节，只向外部开放必要的接口。封装有利于降低模块之间的耦合度，提高代码的可维护性、可读性和安全性。

如何使用封装？

1. 使用构造函数
   通过使用构造函数创建对象，可以达到封装的目的。

function Animal(name, age) {
  // 私有属性
  var secret = '123456';

  // 公有属性
  this.name = name;
  this.age = age;

  // 公有方法
  this.say = function() {
    console.log('我叫' + this.name + '，今年' + this.age + '岁');
  }

  // 私有方法
  function getSecret() {
    return secret;
  }
}

在上面的Animal构造函数中，我们定义了私有属性secret和私有方法getSecret，并且在构造函数中使用this关键字定义了公有属性name、age和方法say。这里的私有属性和方法可以保证对象的安全性和独立性，不会被外部修改或访问到，而公有属性和方法则可以给外部使用和调用。

1. 使用ES6中的class关键字
   在ES6中新增了class关键字，也可以用来实现封装操作。

class Animal {
  constructor(name, age) {
    // 私有属性
    let secret = '123456';

    // 公有属性
    this.name = name;
    this.age = age;
  }

  // 公有方法
  say() {
    console.log('我叫' + this.name + '，今年' + this.age + '岁');
  }

  // 私有方法
  #getSecret() {
    return secret;
  }
}

在ES6中，使用class定义一个类，可以在constructor中定义私有属性和直接在类中定义公有方法，使用#关键字可以定义私有方法。可以看到，使用class关键字可以更加简洁的实现封装。

封装操作示例

1. 封装一个计算器类
   在这个示例中，我们使用class关键字来封装一个计算器类，实现加、减、乘、除四个操作符的基本运算。

class Calculator {
  constructor() {
    this.result = 0;
  }

  add(num) {
    this.result += num;
    return this;
  }

  subtract(num) {
    this.result -= num;
    return this;
  }

  multiply(num) {
    this.result *= num;
    return this;
  }

  divide(num) {
    this.result /= num;
    return this;
  }

  getResult() {
    return this.result;
  }
}

在上面的代码中，我们定义了一个Calculator类，通过constructor函数定义了一个初始值为0的result属性。add、subtract、multiply和divide四个方法分别实现加、减、乘、除的计算，使用return关键字将this(也就是当前对象)返回，方便连续使用。getResult方法可以返回计算的结果。

下面是使用示例：

let calculator = new Calculator();
let result = calculator.add(10).subtract(3).multiply(2).divide(5).getResult();
console.log(result); // 输出3.2

1. 封装一个验证码生成器类
   在这个示例中，我们使用构造函数的方式封装一个验证码生成器类，依次实现生成随机字符串、生成随机颜色、生成验证码三个方法。

function Captcha(length) {
  // 验证码长度
  this.length = length || 4;

  // 验证码字符串
  var code = '';

  // 生成随机字符串
  function getRandomString() {
    return Math.random().toString(36).substr(2, this.length);
  }

  // 生成随机颜色
  function getRandomColor() {
    return 'rgba(' + Math.round(Math.random() * 255) + ','
          + Math.round(Math.random() * 255) + ','
          + Math.round(Math.random() * 255) +', 1)';
  }

  // 生成验证码
  this.generate = function() {
    code = getRandomString();
    var canvas = document.createElement('canvas');
    var ctx = canvas.getContext('2d');
    canvas.width = this.length * 12;
    canvas.height = 20;
    ctx.save();
    ctx.fillStyle = getRandomColor();
    ctx.fillRect(0, 0, canvas.width, canvas.height);
    ctx.restore();
    ctx.save();
    ctx.textBaseline = 'middle';
    ctx.font = '16px Arial';
    var x = 2, y = canvas.height / 2;
    for(var i = 0; i < this.length; i++) {
      ctx.fillStyle = getRandomColor();
      var deg = Math.random() * 20 * Math.PI / 180;
      var ch = code.charAt(i);
      ctx.rotate(deg);
      ctx.fillText(ch, x, y);
      ctx.rotate(-deg);
      x += ctx.measureText(ch).width;
    }
    ctx.restore();
    var dataURL = canvas.toDataURL('image/png');
    return {
      code: code,
      dataURL: dataURL
    };
  }
}

在上面的代码中，我们使用this来定义了length属性，和generate方法，并使用var定义了私有变量code、私有方法getRandomString和getRandomColor。generate方法中首先使用getRandomString方法生成随机字符串，然后使用HTML5的canvas API生成一个验证码图片并将生成的code和图片URL返回。

下面是使用示例：

var captcha = new Captcha();
var result = captcha.generate();
console.log(result.code);
console.log(result.dataURL);

以上就是关于JS面向对象编程基础篇（二） 封装操作实例详解的攻略解释，希望对你有所帮助。